Published
Edited
Jul 30, 2019
3 forks
md`# Line graph`
chart = {
const svg = d3.create('svg')
.attr('viewBox', [ 0, 0, width, height ])
svg.append('g')
.call(xAxis)
svg.append('g')
.call(yAxis)
const path = svg.append('g')
.attr('fill', 'none')
.attr('stroke-width', 1.5)
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.selectAll('path')
.data(data.series)
.join('path')
.attr('stroke', d => color(d.name))
.style('mix-blend-mode', 'multiply')
.attr('d', d => line(d.values))
svg.call(hover, path)
return svg.node()
}
function hover(svg, path) {
svg
.style("position", "relative");
if ("ontouchstart" in document) svg
.style("-webkit-tap-highlight-color", "transparent")
.on("touchmove", moved)
.on("touchstart", entered)
.on("touchend", left)
else svg
.on("mousemove", moved)
.on("mouseenter", entered)
.on("mouseleave", left);
const dot = svg.append("g")
.attr("display", "none");
dot.append("circle")
.attr("r", 2.5);
dot.append("text")
.style("font", "10px sans-serif")
.attr("text-anchor", "middle")
.attr("y", -8);
function moved() {
d3.event.preventDefault()
const ym = y.invert(d3.event.layerY)
const xm = x.invert(d3.event.layerX)
const i1 = d3.bisectLeft(data.dates, xm, 1)
const i0 = i1 - 1
const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0
const series = data.series.reduce((a, b) => {
if (Math.abs(a.values[i] - ym) < Math.abs(b.values[i] - ym))
return a
else
return b
})
const score = series.values[i]
dot.attr("transform", `translate(${x(data.dates[i])},${y(series.values[i])})`)
dot.select("text").text(`${ series.name }: ${ score }`)
}
function entered() {
dot.attr("display", null)
}
function left() {
dot.attr("display", "none")
}
}
line = d3.line()
.defined(d => !isNaN(d))
.x((d, i) => x(data.dates[i]))
.y(d => y(d))
color = d3.scaleOrdinal()
.domain(data.series.map(d => d.name))
.range([ 'blue', 'orange', 'red'])
y = d3.scaleLinear()
.domain([ 0, d3.max(data.series, d => d3.max(d.values) + 1) ])
.range([ height - margin.bottom, margin.top ])
yAxis = g => g
.attr('transform', `translate(${ margin.left }, 0)`)
.call(d3.axisLeft(y))
.call(g => g.select('.domain').remove())
.call(g => g.select('.tick:last-of-type text').clone()
.attr('x', 1)
.attr('text-anchor', 'start')
.attr('font-weight', 'bold')
.text(data.y)
)
x = d3.scaleUtc()
.domain(d3.extent(data.dates))
.range([ margin.left + 5, width - margin.right ])
xAxis = g => g
.attr('transform', `translate(0, ${ height - margin.bottom })`)
.call(d3.axisBottom(x).ticks(data.dates.length).tickSizeOuter(0))
height = 400
margin = ({ top: 20, right: 20, bottom: 30, left: 30 })
data = Object.assign({}, _data, { dates: _data.dates.map(d3.utcParse('%Y-%m'))})
/***
* Corresponds to a three facet requests (primary, internal contrast, and external benchmark) for
* `month_responded_on` that has been transformed.
*/
_data = ({
y: 'Count',
series: [
{
name: 'primary',
values: [
12, 1, 4, 4, 7, 10
]
},
{
name: 'contrast',
values: [
3, 2, 1, 5, 8, 9
]
},
{
name: 'benchmark',
values: [
10, 10, 10, 1, 12, 2
]
}
],
dates: [
'2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'
]
})
d3 = require('d3')
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.
