Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
forked from anonymous'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:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<svg height="100%" width="100%" /> | |
<script> | |
var rectWidth = 50; | |
var height = 300; | |
var data = [100, 250, 175, 200, 20]; | |
// Feel free to change or delete any of the code you see in this editor! | |
var svg = d3.select("svg"); | |
var enter = svg.selectAll("rect") | |
.data(data).enter().append("rect") | |
.attr("x", (d, i) => i * rectWidth) | |
.attr("y", d => height - d) | |
.attr("width", rectWidth) | |
.attr("height", d => d) | |
.attr("fill", function (d) { | |
if (d === 250) return "red"; | |
return "blue" | |
}) | |
.attr("stroke", "white") | |
console.log(enter) | |
</script> | |
</body> |