How to draw a simple line chartSimple line chart with axis labelsMultiple line charts with same domainMultiple line charts with different domainTrends of Coronavirus (Covid-19) Total and Daily Cases of Each County in the USHow to draw a US mapUS State County MapSan Jose Rainy DaysBasic Horizontal Bar ChartBasic Pie Chart
Simple line chart with grid lines
xGrid = (g) => g
.attr('class', 'grid-lines')
.selectAll('line')
.data(xScale.ticks())
.join('line')
.attr('x1', d => xScale(d))
.attr('x2', d => xScale(d))
.attr('y1', margin.top)
.attr('y2', height - margin.bottom)
yGrid = (g) => g
.attr('class', 'grid-lines')
.selectAll('line')
.data(yScale.ticks())
.join('line')
.attr('x1', margin.left)
.attr('x2', width - margin.right)
.attr('y1', d => yScale(d))
.attr('y2', d => yScale(d))
{
// Create an empty SVG with specified width and height.
const svg = d3.select(DOM.svg(width, height));
// Draw the x and y axes.
svg.append('g').call(xAxis)
svg.append('g').call(yAxis)
// Draw the grid lines.
svg.append('g').call(xGrid)
svg.append('g').call(yGrid)
// Draw the line.
svg.append('path')
.datum(data)
.attr('d', line);
return svg.node();
}
html`
<style>
.grid-lines line {
stroke: gray;
stroke-opacity: 0.2;
}
</style>`
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.
