Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Created April 24, 2020 00:54
Show Gist options
  • Save tomshanley/aad3a9a50b0d6d0c1e1cf4e77f500bd7 to your computer and use it in GitHub Desktop.
Save tomshanley/aad3a9a50b0d6d0c1e1cf4e77f500bd7 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!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>
var dataset = [20, 55, 30, 40, 50, 35, 97, 75, 100, 45];
var w = 500;
var h =100;
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0,w])
.paddingInner(0.05);
var yScale = d3.scaleBand()
.domain(d3.range(d3.max(dataset)))
.rangeRound([0,h]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d,i) {
return xScale(i);
})
.attr("y",function(d){console.log(yScale(d)); return h - yScale(d);})
.attr("width", xScale.bandwidth())
.attr("fill", function(d) {if(d<50) { return "blue" }
else if (d>=50) { return "red" }; })
.attr("height", function(d){return yScale(d);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment