base map-simple
d3 = require("d3@6")
chart = {
const width = 900,
height = 910;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], bbox);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path3") //d3 geopath
.data(wards.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'none')
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
return svg.node();
}
commercial = FileAttachment("commercial.geojson").json()
stations = FileAttachment("stations.geojson").json()
railway = FileAttachment("railway@1.geojson").json()
restaurant1 = FileAttachment("kura sushi.geojson").json()
restaurant2 = FileAttachment("sushiro.geojson").json()
wards = FileAttachment("Tokyo Wards.geojson").json()
bbox = FileAttachment("new bounding.geojson").json()
tour = FileAttachment("tour spots.geojson").json()
density1 = FileAttachment("density1.txt").tsv({array:true})
density2 = FileAttachment("density2.txt").tsv({array:true})
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.
