Variance Charts Example

Atomic Volume

Atomic Number Li 3Na 11K 19Rb 37Cs 55the rare earths

html

<link id="atoms"
      rel="variance-data"
      href="//variancecharts.com/data/atoms.csv">

<div id="tufte_atom">

  <chart data="#atoms"
         map-xy="number atomicVolume"
         scale-x-linear="0 100" scale-y-linear="0 80">
    <guide-y class="left"
             ticks="0 20 40 60 80"></guide-y>
    <span class="legend-y">Atomic Volume</span>
    <guide-x class="bottom"
             ticks="0 20 40 60 80 100"></guide-x>
    <span class="legend-x">Atomic Number</span>
    <points></points>
    <annotation data-atomic-volume="13"
                data-number="3">Li 3</annotation>
    <annotation data-atomic-volume="25"
                data-number="11">Na 11</annotation>
    <annotation data-atomic-volume="45"
                data-number="19">K 19</annotation>
    <annotation data-atomic-volume="55"
                data-number="37">Rb 37</annotation>
    <annotation data-atomic-volume="74"
                data-number="55">Cs 55</annotation>
    <annotation id="rare-earths"
                data-atomic-volume="20"
                data-number="62">the rare earths</annotation>
  </chart>

</div>

css

#tufte_atom {
  width: 100%;
  padding: 60px 80px 100px 120px;
  color: #444444;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
}
#tufte_atom chart {
  width: 100%;
  height: 400px;
}
#tufte_atom .legend-y, #tufte_atom .legend-x {
  position: absolute;
}
#tufte_atom .legend-y {
  left: -120px;
  top: 50%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#tufte_atom .legend-x {
  width: 100%;
  text-align: center;
  bottom: -60px;
}
#tufte_atom point {
  background-color: rgba(220, 112, 98, 0.8);
}
#tufte_atom annotation {
  width: 80px;
  margin-left: 8px;
  margin-bottom: 6px;
}
#tufte_atom #rare-earths {
  display: block;
  text-align: center;
  margin: 0;
}