#30DayMapChallenge - Line & OSM
Non-Vehicle Routes in Paris
map = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto")
.style("background", "white");
const g = svg.append('g')
g.append("path")
.datum(route_paris)
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 0.5)
.attr("d", path);
g.append("path")
.datum(departements)
.attr("fill", "none")
.attr("stroke", "#525861")
.attr("stroke-width", 1.2)
.attr("d", path);
g.append("path")
.datum(arrondissements)
.attr("fill", "none")
.attr("stroke", "#525861")
.attr("stroke-width", 0.9)
.attr("d", path);
return svg.node()
}
height = 700
projection = d3
.geoMercator()
.scale(Math.pow(2, 20.5) / (2 * Math.PI))
.translate([width / 2, height / 2])
.center(coords)
path = d3.geoPath(projection)
import {departements,arrondissements } from '@neocartocnrs/bars-pubs-in-paris'
route_paris = FileAttachment("route_paris.json").json()
import {coords} from '@mydu/30dmc-data'
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.
