Skip to content

Instantly share code, notes, and snippets.

@erikdoe

erikdoe/basic-d3.html

Created September 19, 2019 08:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save erikdoe/01cd0b787d36a8996a4ffad50c620226 to your computer and use it in GitHub Desktop.
Save erikdoe/01cd0b787d36a8996a4ffad50c620226 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
basic-d3.html
<!DOCTYPE html>
<html>
<head>
<script src="d3.min.js"></script>
</head>
<body>
<h1>A simple bar chart</h1>
<script>
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 13, 12, 17, 21, 19, 23, 25, 27, 24, 18, 12, 8 ];
var w = 800;
var h = 300;
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 i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 8);
})
.attr("width",
w / dataset.length)
.attr("height", function(d) {
return d * 8;
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment