Variance Charts Example

Global Participation in Primary Education

by net enrollment rate, 2000 & 2009

20002009

{{value}}% {{value}}%

html

<link id="enrollment_rate"
      rel="variance-data"
      href="//variancecharts.com/data/enrollment_rate.json">

<div id="education_participation">

  <h3>Global Participation in Primary Education</h3>
  <h4>by net enrollment rate, 2000 &amp; 2009</h4>

  <chart data="#enrollment_rate"
         map-xy="year netEnrollment"
         scale-x-linear="2000 2009" scale-y-linear="70 100">
    <annotation class="year-left">2000</annotation>
    <annotation class="year-right">2009</annotation>
    <guide-y>
      <span class="label left">{{value}}%</span>
      <span class="label right">{{value}}%</span>
    </guide-y>
    <groups by="country">
      <line class="{{country}}"></line>
      <repeat>
        <point class="{{country}}"></point>
        <annotation class="{{country}}">
          <span class="country">{{country}}</span>
          <span class="enrollment">{{netEnrollment}}</span>
        </annotation>
      </repeat>
    </groups>
  </chart>

</div>

css

#education_participation {
  width: 100%;
  padding: 50px 80px 60px 80px;
  color: #444444;
  font-family: Helvetica, Arial, sans-serif;
  background: white;
}
#education_participation h3 {
  margin: 0 0 4px 0;
  text-align: center;
}
#education_participation h4 {
  margin: 0 0 28px 0;
  font-weight: normal;
  font-style: italic;
  text-align: center;
  color: #666666;
}
#education_participation chart {
  width: 30%;
  height: 500px;
  margin-top: 48px;
}
#education_participation guide-y {
  width: 180%;
  margin-left: -90%;
  left: 50%;
  border: none;
}
#education_participation guide-y .tick {
  width: 100%;
  border-color: #e2e2e2;
}
#education_participation guide-y .tick .label {
  text-align: left;
  right: auto;
  color: #cccccc;
  font-size: 24px;
  top: -14px;
  width: 100px;
}
#education_participation guide-y .tick .label.left {
  margin-left: -108px;
  text-align: right;
}
#education_participation guide-y .tick .label.right {
  right: 0;
  margin-right: -108px;
  text-align: left;
}
#education_participation guide-y .tick:nth-child(even) .label {
  display: none;
}
#education_participation line.World path {
  stroke: orange;
  stroke-width: 2px;
}
#education_participation point {
  background-color: #444444;
}
#education_participation point.World {
  background-color: orange;
}
#education_participation annotation {
  font-size: 12px;
  width: 300px;
  margin-bottom: 7px;
}
#education_participation annotation.year-right {
  right: 0;
  margin-right: -96px;
}
#education_participation annotation.year-left {
  text-align: right;
  margin-left: -96px;
}
#education_participation annotation.year-right, #education_participation annotation.year-left {
  width: auto;
  font-size: 24px;
  top: 6px;
  z-index: 100;
  font-weight: bold;
  width: 100px;
}
#education_participation annotation.World {
  color: orange;
  text-transform: uppercase;
  font-weight: bold;
}
#education_participation annotation.World .country {
  color: orange;
}
#education_participation annotation .enrollment {
  font-weight: bold;
}
#education_participation annotation .country {
  color: #666666;
}
#education_participation datum:first-child annotation {
  margin-left: -308px;
  text-align: right;
}
#education_participation datum:first-child .enrollment {
  float: right;
  margin-left: 4px;
}
#education_participation datum:last-child annotation {
  margin-left: 8px;
}
#education_participation datum:last-child .enrollment {
  float: left;
  margin-right: 4px;
}