xAxis = svg => svg
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.ticks(d3.timeMonth.every(3))
.tickFormat(d => d <= d3.timeYear(d) ? d.getFullYear() : null))
.call(g => g.select(".domain")
.remove())
xAxis2 = svg => svg
.attr("transform", `translate(0,${50})`)
.call(d3.axisBottom(x)
.ticks(d3.timeMonth.every(3))
.tickFormat(d => d <= d3.timeYear(d) ? d.getFullYear() : null))
.call(g => g.select(".domain")
.remove())
yAxis2 = svg => svg
.attr("transform", `translate(${margin.left},${y(1e6)})`)
.call(d3.axisRight(y)
.ticks(1)
.tickSize(width - margin.left - margin.right))
.style('stroke', 'red')
// .tickFormat(formatTick))
.call(g => g.select(".domain")
.remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 1.0)
.attr("stroke-dasharray", "6"))
.call(g => g.selectAll(".tick text")
.attr("x", 4)
.attr("dy", -4))
yAxis = svg => svg
.attr("transform", `translate(${margin.left},${y(2000000)})`)
.call(d3.axisRight(y)
.tickSize(width - margin.left - margin.right)
.tickFormat(formatTick))
.call(g => g.select(".domain")
.remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", "2,2"))
.call(g => g.selectAll(".tick text")
.attr("x", 4)
.attr("dy", -4))
function formatTick(d) {
const s = (d / 1e6).toFixed(1);
return this.parentNode.nextSibling ? `\xa0${s}` : `$${s} million`;
}
x = d3.scaleTime()
.domain([new Date(2010, 7, 1), new Date(2012, 7, 1)])
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, 2e6])
.range([height - margin.bottom, margin.top])
margin = ({top: 20, right: 0, bottom: 30, left: 0})
height = 500
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.
