How to draw a simple line chartSimple line chart with grid linesSimple 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 MapBasic Horizontal Bar ChartBasic Pie Chart
San Jose Rainy Days
xScale = d3.scaleBand().padding(0.2)
.domain(data.map((d) => d.month))
.range([0, width])
yScale = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.days)]).nice()
.range([height, 0])
xAxis = (label) => (g) => g
.attr('transform', `translate(${margin.left},${margin.top + height})`)
.call(d3.axisBottom(xScale))
// Add label
.append('text')
.style('text-anchor', 'middle')
.style('fill', '#000')
.style('font-size', '14px')
.text(label)
.attr('x', width / 2)
.attr('y', 50) // Relative to the x axis.
yAxis = (label) => (g) => g
.attr('transform', `translate(${margin.left},${margin.top})`)
.call(d3.axisLeft(yScale))
// Add label
.append('text')
.style('text-anchor', 'middle')
.style('fill', '#000')
.style('font-size', '14px')
.text(label)
.attr('transform', 'rotate(-90)')
.attr('x', -height / 2)
.attr('y', -40) // Relative to the y axis.
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.
