data = [4, 8, 15, 16, 23, 42,58]
{
const div = d3.create("div")
.style("font", "10px sans-serif")
.style("text-align", "left")
.style("color", "white");
div.selectAll("div")
.data(data)
.join("div")
.style("background", "purple")
.style("padding", "3px")
.style("margin", "1px")
.style("width", d => `${d * 10}px`)
.text(d => d);
return div.node();
}
{
// 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); //this is your 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();
}
x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 420])
x(4) // the length of the bar representing 4
x(16) // the length of the bar representing 16
{
const div = d3.create("div")
.style("font", "13px sans-serif")
.style("text-align", "left")
.style("color", "white");
div.selectAll("div")
.data(data)
.join("div")
.style("background", "purple")
.style("padding", "3px")
.style("margin", "1px")
.style("width", d => `${x(d)}px`)
.text(d => d);
return div.node();
}
d3 = require("d3@6")
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.
