Visualization, Prototypes, ML, Data wrangling and Art.
chart = (data) => {
const overlap = 3
const height = data.series.length * 15
const margin = ({top: 100, right: 20, bottom: 30, left: 220})
const x = d3.scaleTime()
.domain(d3.extent(data.dates))
.range([margin.left, width - margin.right])
const y = d3.scalePoint()
.domain(data.series.map(d => d.name))
.range([margin.top, height - margin.bottom])
const z = d3.scaleLinear()
.domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()
.range([0, -overlap * y.step()])
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0))
.call(g => g.select(".domain").remove())
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSize(0).tickPadding(4))
.call(g => g.select(".domain").remove())
const area = d3.area()
.curve(d3.curveBasis)
//.defined(d => !isNaN(d))
.x((d, i) => x(data.dates[i]))
.y0(0)
//.y1(d => z(d))
.y1(d => z(d) || 0)
const line = area.lineY1()
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
var lg = svg.append("defs").append("linearGradient")
.attr("id", "mygrad")//id of the gradient
.attr("x1", "0%")
.attr("x2", "0%")
.attr("y1", "0%")
.attr("y2", "100%")//since its a vertical linear gradient
lg.append("stop")
.attr("offset", "0%")
.style("stop-color", "#259661")//end in red
.style("stop-opacity", 1)
lg.append("stop")
.attr("offset", "100%")
.style("stop-color", "white") //start in blue
.style("stop-opacity", 1)
const group = svg.append("g")
.selectAll("g")
.data(data.series)
.join("g")
.attr("transform", d => `translate(0,${y(d.name) + 1})`);
group.append("path")
.style("fill", "url(#mygrad)")
//.attr("fill", "#259661")
//.attr("fill-opacity", 0.3)
.attr("d", d => area(d.values));
group.append("path")
.attr("fill", "none")
.attr("stroke", "#259661")
.attr("d", d => line(d.values));
return svg.node();
}
topics = data("key")
subtopics = data("subtopic")
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.
