yScale = d3.scaleBand().padding(0.2)
.domain(data.map((d) => d.month))
.range([height - margin.bottom, margin.top])
xScale = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.days)]).nice()
.range([margin.left, width - margin.right])
{
// Create an empty SVG with specified width and height.
const svg = d3.select(DOM.svg(width, height));
svg.append('g').call(title('San Jose Rainfall Days'))
// Draw the x and y axes.
svg.append('g').call(xAxis('Month'))
svg.append('g').call(yAxis('Average Days'))
svg.append('g').call(xGrid)
// Draw the line.
svg.selectAll('rect')
.data(data)
.join('rect')
.attr('x', (d) => margin.left)
.attr('y', (d) => yScale(d.month))
.attr('width', (d) => xScale(d.days) - margin.right)
.attr('height', yScale.bandwidth())
return svg.node();
}
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.
