Built with blockbuilder.org
Created
January 30, 2018 17:17
-
-
Save greenmna/8ae25bfb3cd655f9b785a3dffab6bfd2 to your computer and use it in GitHub Desktop.
Using Arrays to Make a Flag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
// 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) | |
var FrenchFlag= [{"fill": "blue", "x": 100}, {"fill": "white", "x":300}, {"fill": "red", "x":500}]; | |
console.log(FrenchFlag); | |
svg.selectAll("rect") //select all variables "rect" from variable svg (var svg=) | |
.data(FrenchFlag) | |
//identify varible FrenchFlag as data | |
.enter() | |
//put this data into the svg file where we've selected everything | |
.append("rect") | |
//when looking for the data, when it is found, make a rectange. This will make 3 rectanges, one for each object in the variable FrenchFlag | |
.attr("y", 100) | |
.attr("x", function(d) {return d.x;}) | |
//in object "x", look at the data (the value of x) and then return/show the data from x (in this case, the 3 objects will be generated at the specified x postions) | |
.attr("width", 200) | |
.attr("height", 400) | |
//y, width, and height values are applied to all objects because they're all specified | |
.attr("fill", function (d) {return d.fill;}) | |
.attr("stroke", "black") | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment