md`# freeCodeCamp D3.js Course`
{
const svg = DOM.svg(960,500);
const projection = d3.geoNaturalEarth1();
const pathGenerator = d3.geoPath().projection(projection);
const map = d3.select(svg)
map.append('path')
.attr('fill','#4242e4')
.attr('d',pathGenerator({type:"Sphere"}));
map.selectAll('path').data(countries.features)
.enter().append('path')
.attr('d',d=>pathGenerator(d))
.attr('fill','lightgreen')
.attr('stroke','black')
.attr('stroke-opacity','0.4')
return svg
}
countries = topojson.feature(world,world.objects.countries)
world = d3.json('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json')
topojson = require("topojson-client@3")
d3 = require('d3','d3-geo@2','d3-geo-projection@3')
import {projectionInput} from "@d3/projection-comparison"
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.
