margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
x = d3
.scaleTime()
.domain(d3.extent(data, (d) => d.Year))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, 100])
.nice()
.range([height - margin.bottom, margin.top])
xAxis = (g) =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
)
yAxis = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call((g) => g.select(".domain").remove())
.call((g) =>
g
.select(".value")
.clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("ylabel", "Year")
.text(data.y)
)
line = d3
.line()
.defined((d) => !isNaN(d.value))
.x((d) => x(d.Year))
.y((d) => y(d.value))
function transition(path) {
path
.transition()
.duration(7500)
.attrTween("stroke-dasharray", tweenDash)
.on("end", () => {
d3.select(this).call(transition);
});
}
function tweenDash() {
const l = this.getTotalLength(),
i = d3.interpolateString("0," + l, l + "," + l);
return function (t) {
return i(t);
};
}
//data = (percent_data.map(({ Year, percentage_female }) => ({
// Year,
// value: percentage_female
//})),
//{ y: "Percentage Women Executives" })
data = file.map(({ Year, percentage_female }) => ({
Year,
value: percentage_female
}))
d3 = require("d3@5")
callout = (g, value) => {
if (!value) return g.style("display", "none");
g.style("display", null)
.style("pointer-events", "none")
.style("font", "15px sans-serif");
const path = g
.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g
.selectAll("text")
.data([null])
.join("text")
.call((text) =>
text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.attr("anchor", "top")
.attr("label", "Female (%)")
.style("font-weight", (_, i) => (i ? null : "bold"))
.text((d) => d)
);
const { x, y, width: w, height: h } = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr(
"d",
`M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`
);
}
import { radio } from "@jashkenas/inputs"
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.
