The avatar for @jeantimex
Su
Published
D3 Tutorials
Edited
Apr 21, 2020
1 fork
3 stars
D3 Tutorials
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 US
How to draw a US map
US State County MapSan Jose Rainy DaysBasic Horizontal Bar ChartBasic Pie Chart
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require('d3@5')
Insert cell
topojson = require('topojson-client@3')
Insert cell
Insert cell
Insert cell
Insert cell
us = d3.json('https://d3js.org/us-10m.v2.json')
Insert cell
data = topojson.feature(us, us.objects.states).features
Insert cell
Insert cell
{
// Create an empty SVG with 960px width and 600px height.
const svg = DOM.svg(960, 600);
// Create an instance of geoPath.
const path = d3.geoPath();
// Use the path to plot the US map based on the geometry data.
d3.select(svg)
.append('g')
.selectAll('path')
.data(data)
.enter()
.append('path')
.attr('d', path);
return svg;
}
Insert cell
Insert cell
html`
<style>
path {
fill: #fff;
stroke: #000;
}
</style>`
Insert cell
Insert cell

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.
Learn more