I help SaaS startups tell better stories.
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("defs")
.selectAll("linearGradient")
.data(data.filter(d => d.end !== null))
.join("linearGradient")
.attr("id", d => (d.gradientId = DOM.uid("gradient")).id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", d => x(d.start))
.attr("x2", d => x(d.end))
.call(g => g.append("stop").attr("stop-color", "currentColor"))
.call(g => g.append("stop").attr("offset", "100%").attr("stop-color", d => d.endUnknown ? "#fff" : "#ccc"));
const line = svg.append("g")
.attr("stroke", "currentColor")
.attr("stroke-width", 2)
.selectAll("line")
.data(data)
.join("line")
.attr("stroke", d => d.end === null ? "currentColor" : d.gradientId)
.attr("x1", d => x(d.start))
.attr("x2", d => x(d.end || x.domain()[1]))
.attr("y1", d => y(d.index))
.attr("y2", d => y(d.index));
svg.append("g")
.call(xAxis);
const label = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "end")
.selectAll("text")
.data(data)
.join("text")
.attr("x", d => x(d.start) - 6)
.attr("y", d => y(d.index))
.attr("dy", "0.35em")
.attr("fill-opacity", d => d.end === null ? null : 0.6)
.text(d => d.name);
const dot = svg.append("g")
.attr("fill", "currentColor")
.selectAll("circle")
.data(data.filter(d => d.end !== null && d.endUnknown === false))
.join("circle")
.attr("cx", d => x(d.end))
.attr("cy", d => y(d.index))
.attr("r", 2);
return svg.node();
}
data = d3.csvParse(await FileAttachment("mobile_breaches-7@2.csv").text(), ({startDate, model, endDate}, i) => ({index: i, name: model, start: parseDate(startDate), end: endDate === "current" ? null : parseDate(endDate) || d3.utcYear.offset(parseDate(startDate), 3), endUnknown: endDate === ""}))
parseDate = {
const parseDate = d3.utcParse("%B %d, %Y");
const parseMonth = d3.utcParse("%B, %Y");
const parseMonth2 = d3.utcParse("%B %Y");
const parseYear = d3.utcParse("%Y");
return d => parseDate(d) || parseMonth(d) || parseMonth2(d) || parseYear(d);
}
today = new Date(Date.UTC(2020, 2, 7))
x = d3.scaleUtc()
.domain([d3.min(data, d => d.start), today])
.rangeRound([margin.left, width - margin.right])
y = d3.scalePoint()
.domain(d3.range(data.length))
.rangeRound([margin.top, height - margin.bottom])
.padding(1)
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g => g.append("g")
.attr("stroke", "white")
.attr("stroke-width", 2)
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y2", height - margin.bottom - margin.top))
margin = ({top: 30, right: 10, bottom: 10, left: 70})
height = (data.length + 2) * 20 + margin.top + margin.bottom
d3 = require("d3@5")
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.
