<link id="traffic"
rel="variance-data"
href="//variancecharts.com/data/traffic.csv">
<div id="line-multiple">
<h3>Traffic Deaths Per 100,000 Persons, 1951-1959</h3>
<chart data="#traffic"
map-xy="year deathsPer100000"
scale-x-linear="1951 1959"
scale-y-linear="6 16">
<guide-y></guide-y>
<guide-x></guide-x>
<groups by="state">
<line></line>
</groups>
<groups by="state">
<points></points>
</groups>
<annotation data-deaths-per100000="12.9"
data-year="1959">NY</annotation>
<annotation data-deaths-per100000="10"
data-year="1959">CT</annotation>
<annotation data-deaths-per100000="11"
data-year="1959">MA</annotation>
<annotation data-deaths-per100000="9"
data-year="1959">RI</annotation>
</chart>
</div>
#line-multiple {
width: 100%;
padding: 60px 80px 80px 80px;
color: #444444;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
#line-multiple h3 {
text-align: center;
margin: 0 0 28px 0;
}
#line-multiple chart {
width: 100%;
height: 400px;
}
#line-multiple line path {
stroke-width: 2px;
}
#line-multiple group:nth-child(1) line path {
stroke: #7dac9f;
}
#line-multiple group:nth-child(1) point {
background: #f6f7f0;
border: 2px solid #649c8d;
}
#line-multiple group:nth-child(2) line path {
stroke: #dc7062;
stroke-dasharray: 4 2;
}
#line-multiple group:nth-child(2) point {
background: #f6f7f0;
border: 2px solid #d55241;
}
#line-multiple group:nth-child(3) line path {
stroke: #66a8d4;
}
#line-multiple group:nth-child(3) point {
background: #f6f7f0;
border: 2px solid #4696cb;
}
#line-multiple group:nth-child(4) line path {
stroke: #e5b060;
}
#line-multiple group:nth-child(4) point {
background: #f6f7f0;
border: 2px solid #df9f3d;
}
#line-multiple annotation {
font-size: 14px;
margin-bottom: 8px;
margin-left: 10px;
}