The avatar for @d3
D3
Bring your data to life.
Public
Let’s Make a Bar Chart
Edited
Oct 26, 2023
16 forks
65 stars
Insert cell
Insert cell
data = [4, 8, 15, 16, 23, 42]
Insert cell
Insert cell
Insert cell
Insert cell
{
const div = document.createElement("div");
div.innerHTML = "Hello, world!";
return div;
}
Insert cell
Insert cell
Insert cell
{
const p = d3.selectAll("p");
// p.style("color", "red"); // Uncomment this line and run the code!
// p.style("color", null); // Uncomment this line to clear the color.
return p;
}
Insert cell
Insert cell
{
const div = d3.create("div");
div.html("Hello, world!");
return div.node();
}
Insert cell
Insert cell
d3.create("span")
.style("color", "white")
.style("background-color", "black")
.html("Hello, world!")
.node()
Insert cell
Insert cell
{
const span = d3.create("span");
span.style("color", "white");
span.style("background-color", "black");
span.html("Hello, world!");
return span.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
{
const table = d3.create("table");
const tbody = table.append("tbody");
tbody.append("tr").append("td").text("First!");
tbody.append("tr").append("td").text("Second.");
tbody.append("tr").append("td").text("Third.");
return table.node();
}
Insert cell
Insert cell
html`<div style="font: 10px sans-serif; text-align: right; color: white;">
<div style="background: steelblue; padding: 3px; margin: 1px; width: 40px;">4</div>
<div style="background: steelblue; padding: 3px; margin: 1px; width: 80px;">8</div>
<div style="background: steelblue; padding: 3px; margin: 1px; width: 150px;">15</div>
<div style="background: steelblue; padding: 3px; margin: 1px; width: 160px;">16</div>
<div style="background: steelblue; padding: 3px; margin: 1px; width: 230px;">23</div>
<div style="background: steelblue; padding: 3px; margin: 1px; width: 420px;">42</div>
</div>`
Insert cell
Insert cell
Insert cell
{
const div = d3.create("div")
.style("font", "10px sans-serif")
.style("text-align", "right")
.style("color", "white");

div.selectAll("div")
.data(data)
.join("div")
.style("background", "steelblue")
.style("padding", "3px")
.style("margin", "1px")
.style("width", d => `${d * 10}px`)
.text(d => d);

return div.node();
}
Insert cell
Insert cell
{
// Create an empty (detached) chart container.
const div = d3.create("div");

// Apply some styles to the chart container.
div.style("font", "10px sans-serif");
div.style("text-align", "right");
div.style("color", "white");

// Define the initial (empty) selection for the bars.
const bar = div.selectAll("div");

// Bind this selection to the data (computing enter, update and exit).
const barUpdate = bar.data(data);

// Join the selection and the data, appending the entering bars.
const barNew = barUpdate.join("div");

// Apply some styles to the bars.
barNew.style("background", "steelblue");
barNew.style("padding", "3px");
barNew.style("margin", "1px");

// Set the width as a function of data.
barNew.style("width", d => `${d * 10}px`);

// Set the text of each bar as the data.
barNew.text(d => d);

// Return the chart container.
return div.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 420])
Insert cell
Insert cell
x(4) // the length of the bar representing 4
Insert cell
x(16) // the length of the bar representing 16
Insert cell
Insert cell
{
const div = d3.create("div")
.style("font", "10px sans-serif")
.style("text-align", "right")
.style("color", "white");

div.selectAll("div")
.data(data)
.join("div")
.style("background", "steelblue")
.style("padding", "3px")
.style("margin", "1px")
.style("width", d => `${x(d)}px`)
.text(d => d);

return div.node();
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more