Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

iris demo

simple csv demo

for the building-blocks intro video

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>

<body>

<script>
    d3.csv("iris.csv", function(err, data) {
      console.log("DATA", data);
      var width = 960;
      var height = 500;
      var svg = d3.select("body").append("svg")
      .attr({width: width, height: height }).style("background", "gray")
      
			var xscale = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return +d.sepalW })])
      .range([0, width - 100])
      var yscale = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return +d.sepalL })])
      .range([height, 100])
      
      svg.selectAll("circle").data(data)
      .enter()
      .append("circle")
      .attr({
        cx: function(d) { return xscale(+d.sepalW) },
        cy: function(d) { return yscale(+d.sepalL) },
        r: 10,
        fill: "#d7f8f4",
        stroke: "#111",
        "fill-opacity": 0.4
      })
    })
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js