Skip to content

Instantly share code, notes, and snippets.

@davegotz

davegotz/index.html

Created January 20, 2022 02:24
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 davegotz/1c6a57de799f131e63cdf5ab4fe10d87 to your computer and use it in GitHub Desktop.
Save davegotz/1c6a57de799f131e63cdf5ab4fe10d87 to your computer and use it in GitHub Desktop.
Download ZIP
Let's Make a Bar Chart with DIVs
Raw
index.html
<html>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<div class="chart">
</div>
<script>
// This is the data array which will be represented as a bar chart.
let data = [4, 8, 15, 16, 23, 42];
// Define an x scale.
let x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 500]);
// Select the chart div which will be the container for the new bar chart
let chart = d3.select(".chart");
chart.selectAll("div")
.data(data).join("div")
.style("background", "steelblue")
.style("color", "white")
.style("text-align", "right")
.style("font", "10px san-serif")
.style("padding", "3px")
.style("margin", "1px")
.style("width", d => x(d)+"px")
.text(d => d);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment