D3. Part 1 - HTML, SVG and a Basic Bar Chart
html`
<div>Hello World!</div>
<ol class="my-list">
<li style="color: blue">item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
`
d3 = require("d3@6")
d3.selectAll("li").attr("style", "color: red")
{
const list = d3.create("ol");
list.selectAll("li")
.data([5, 6, 12, 44])
.join("li")
.text((d) => d)
.attr("style", (d) => `color: ${d < 10 ? "lightblue" : "blue"}`);
return list.node();
}
html`<svg width="720" height="120">
<rect class="first-rect" y="0" x="0" height="20" width="150"></rect>
<rect y="25" x="0" height="20" width="110"></rect>
<rect y="50" x="0" height="20" width="50"></rect>
<circle cx="20" cy="90" r="10"></circle>
</svg>`
d3.selectAll(".first-rect").attr("fill", "red")
{
const svg = d3.create("svg")
.attr("width", 720)
.attr("height", 120);
svg.append("rect")
.attr("x", 0)
.attr("y", 25)
.attr("height", 20)
.attr("width", 150);
svg.append("rect")
.attr("x", 0)
.attr("y", 50)
.attr("height", 20)
.attr("width", 110)
.attr("fill", "red");
svg.append("rect")
.attr("x", 0)
.attr("y", 75)
.attr("height", 20)
.attr("width", 50);
return svg.node();
}
data = [23, 45, 66, 89, 33, 12, 23];
chartWidth = 720;
height = 150;
margin = ({top: 20, right: 0, bottom: 20, left: 20});
{
const svg = d3.create("svg")
.attr("width", chartWidth)
.attr("height", height);
svg.selectAll(".bar")
.data(data)
.join("rect")
.attr("class", "bar")
.attr("x", x(0))
.attr("y", (d, i) => y(i))
.attr("height", y.bandwidth())
.attr("width", (d) => x(d) - x(0));
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y));
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x));
return svg.node();
}
y = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.top, height - margin.bottom])
.padding(0.1)
x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([margin.left, chartWidth - margin.right])
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.
