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 MapSan Jose Rainy DaysBasic Horizontal Bar Chart
Basic Pie Chart
radius = Math.min(width, height) / 2
{
// Create an empty SVG with specified width and height.
const svg = d3.select(DOM.svg(
width + margin.left + margin.right,
height + margin.top + margin.bottom
));
const g = svg.append('g')
.attr('transform', `translate(${margin.left + width / 2},${margin.top + height / 2})`)
// Compute the position of each group on the pie:
const pie = d3.pie().value((d) => d.value)
const pieData = pie(d3.entries(data))
g.selectAll('pies')
.data(pieData)
.join('path')
.attr('d', d3.arc()
.innerRadius(0)
.outerRadius(radius)
)
.attr('fill', (d, i) => colors[i % colors.length])
.attr('stroke', 'black')
.style('stroke-width', '1px')
.style('opacity', 0.7)
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.
