Variance Charts Example

Length & Width of Iris Sepals, Centimeters

Edit with CodePen

html

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

<div id="scatterplot-example">

  <h3>Length &amp; Width of Iris Sepals, Centimeters</h3>

  <chart data="#iris"
         map-xy="sepalWidth sepalLength"
         scale-x-linear="1 5"
         scale-y-linear="2 10">
    <guide-y></guide-y>
    <guide-x></guide-x>
    <points></points>
  </chart>

</div>

css

#scatterplot-example {
  width: 100%;
  padding: 60px 80px 80px 80px;
  color: #444444;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}
#scatterplot-example h3 {
  text-align: center;
  margin: 0 0 28px 0;
}
#scatterplot-example chart {
  width: 100%;
  height: 400px;
}
#scatterplot-example point {
  background-color: rgba(220, 112, 98, 0.4);
}