md`# Timeline of Vue.js contributions from march 2018 - august 2019`
d3 = require("d3@5")
html`<style> .bar {
fill:teal;
}
.y-axis,.x-axis{
font-size:16px;
}
</style>`
{
const height = 600;
const width = 900;
const padding = 100;
const barPadding = 140;
const svg = DOM.svg(width, height);
const svgRef = d3.select(svg);
const removeHours = (d) => d.date.substring(0,16);
const nestedData = d3.nest()
.key(d => removeHours(d))
.rollup(d => d.length)
.entries(data)
const yScale = d3.scaleLinear()
.domain([0, d3.max(nestedData, d => d.value)])
.nice()
.range([height-padding, padding])
const xScale = d3.scaleTime()
.domain([d3.min(nestedData, d => new Date(d.key)), d3.max(nestedData, d => new Date(d.key))])
.nice()
.range([padding, width - padding])
svgRef
.append("g")
.attr("transform", "translate(" + padding + ",0)")
.classed("y-axis", true)
.call(d3.axisLeft(yScale))
svgRef
.append("text")
.text("Commits")
.attr("text-anchor", "middle")
.attr("x", padding)
.attr("y", padding - 20)
svgRef
.append("g")
.attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
.classed("x-axis",true)
.call(d3.axisBottom(xScale))
svgRef
.selectAll(".bar")
.data(nestedData)
.enter()
.append("rect")
.classed("bar", true)
.attr("fill", "#008080")
.attr("x", (d) => xScale(new Date(d.key)))
.attr("y", d => yScale(d.value))
.attr("height", d => {
return (height - padding) - yScale(d.value);
})
.attr("width", 1);
return svg;
}
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.
