D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
annalabrozzi
Full window
Github gist
test practice
Built with
blockbuilder.org
<!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:0;bottom:0;left:0; } </style> </head> <body> <script> //Array.indexOf()?, myArray refers to a, 6 refers to b isWithin = function (a,b) { x = a.indexOf(b) if (x == -1) return false else return true } myArray = [4,6,20]; console.log(isWithin(myArray,6)); //practice drawing flag //he'll give an aspect ratio of ex: width:height = 3:2, may have to manually write out the svg code OR write javascript code that generates svg (using d3) (two different things) //data join is .data() method //svg methods: .data(), .enter(), .append(rect), .attr("x",d.x), .attr("width",d.width) //know javascript objects myData = [ {//one object in this array width: 50, height:250, x:0, y:0, color:"#" },{//second rectange object},{ //third rectabgle object } ]; //flag_data //writing javascript code that is outputting svg code //svg width and height is like the canvas, the javascript code is the painting //.enter() converts data from your dataset to svg svg.selectAll("rect") .data(flag_data) .enter() .append("rect") .attr("width", function (d) {return d.width}) .attr("height", function (d) {return d.height}) .attr("fill", entercolorhere) </script> </body>
https://d3js.org/d3.v4.min.js