How to draw a simple line chartSimple line chart with grid linesMultiple 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 axis labels
xAxis = (label) => (g) => g
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale))
// Add label
.append('text')
.attr('class', 'axis-label')
.text(label)
.attr('x', margin.left + (width - margin.left - margin.right) / 2)
.attr('y', 50) // Relative to the x axis.
yAxis = (label) => (g) => g
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
// Add label
.append('text')
.attr('class', 'axis-label')
.text(label)
.attr('transform', 'rotate(-90)')
.attr('x', -(margin.top + (height - margin.top - margin.bottom) / 2))
.attr('y', -50) // Relative to the y axis.
html`
<style>
.axis-label {
fill: #000;
font-size: 16px;
text-anchor: middle;
}
</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.
