Old school D3 from simpler times

All examples By author By category About

nowherenearithaca

Full window Github gist

iris demo

simple csv demo

for the building-blocks intro video

forked from enjalot's block: iris demo

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

<body>

<script>
    
    //console.log(d3.select("body"));
     
    d3.csv("iris.csv", function(err, data) {
      
      console.log("DATA", data);
      var width = 960;
      var height = 500;
      //why is this returning a null thing after the attr setting?
      var svg = d3.select("body").append("svg")
      								.attr({width: width, height: height })
								      .style("background", "blue");
      //console.log(svg);
      //svg.attr({width: width, height: height });
      svg.style("background", "blue");
        
			var xscale = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.sepalW })])
      .range([0, width - 100]);
      var yscale = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.sepalL })])
      .range([height, 100]);
      
      var stuffWithData = svg.selectAll("circle").data("hello"); //data);
      
      console.log("Stuff with data", stuffWithData);
      
      console.log("Stuff with data - enter", stuffWithData.enter());
      console.dir("Stuff with data - exit", stuffWithData.exit());
       
      
      stuffWithData.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
      })
      console.log("The Circles",d3.selectAll("circle"));
      
    })
  </script>
</body>

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

https://d3js.org/d3.v4.min.js