Traffic Deaths Per 100,000 Persons, 1951-1959

NYCTMARI
Edit with CodePen

html

<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>

css

#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;
}