Old school D3 from simpler times

All examples By author By category About

eamonm95

Full window Github gist

JS array

Built with blockbuilder.org

forked from eamonm95's block: fresh block

forked from eamonm95's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:10;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

/*
    svg.append("rect")
    	.attr("width", 50)
    	.attr("height", 100)
    	.attr("fill", "blue")
    	.attr("x", 200)
      .attr("y", 200)
    svg.append("rect")
    	.attr("width", 50)
    	.attr("height", 100)
    	.attr("fill", "white")
    	.attr("x", 250)
      .attr("y", 200)
    svg.append("rect")
    	.attr("width", 50)
    	.attr("height", 100)
    	.attr("fill", "red")
    	.attr("x", 300)
      .attr("y", 200)
    */

var frenchFlag = [{"x": 200,  "fill":"blue"}, 
                      {"x": 250, "fill":"white"}, 
                      {"x": 300, "fill":"red","y":200}];
    console.log(frenchFlag);
    //selects existing rectangle svgs
    svg.selectAll("rect")
    	//data-join connects the data to the rectangles
      .data(frenchFlag)
    	//checks the dataset to keep track of what has to happen in the following 					code
      .enter()
    	// kind of like a loop, checks to see the objects in the in the dataset and 				 sees that there are no rectangles to hold those values so it will run the 					following code three times in order to give those objects a home
    	.append("rect")
    	// each rectangle made will be at the y value of 100
    	if(function(d.y)== )
      .attr("y", 100)
    	// each rectangle will have a vlaue of x depending on what is checked in the 					dataset
    	.attr("x", function(d) {return d.x;})
    	// each rectangle has the same width and height
    	.attr("width", 50)
    	.attr("height", 100)
    	// each rectangle has a fill depending on the dataset
    	.attr("fill", function(d) {return d.fill;})
    
  </script>
</body>

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