Skip to content

Instantly share code, notes, and snippets.

@matt-oxley matt-oxley/index.html
Last active Apr 5, 2019

Embed
What would you like to do?
D3 tutorial
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const data = [3, 5, 7, 2, 9, 2, 10, 4, 9, 3];
const height = 500;
const width = 200;
const barWidth = width / data.length;
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data)])
.range([0, height]);
const svg = d3
.select("body")
.style("text-align", "center")
.append("svg")
.style("border", "1px solid black")
.attr("width", 200)
.attr("height", height);
const bars = svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("height", d => yScale(d))
.attr("width", barWidth)
.attr("x", (d, i) => i * barWidth)
.attr("y", d => height - yScale(d))
.attr("stroke", "white")
.attr("fill", "steelblue");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.