base map-Tokyo
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");
var c = svg.selectAll("circle") //d3 geopath
.data(restaurant1.features)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',3)
.attr('fill','red')
.style('fill-opacity','0.5')
.on('mouseover',restaurant1Text)
.on('mouseout',removerestaurant1Text)
function restaurant1Text(event,d){
svg
c.enter().append("text")
.data(restaurant1.features)
.enter()
.append("text")
.attr("x", function(d) {return path1.centroid(d)[0]-15})
.attr("y", function(d) {return path1.centroid(d)[1]-7})
.attr('class','restaurant1_name')
.style('font-faimly','helvetica')
.style('font-size','6px')
.style('font-weight','light')
.text(d.properties.name)
}
function removerestaurant1Text(){
d3.selectAll('text.restaurant1_name').remove()
}
c.enter().append("circle")
.data(restaurant2.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',3)
.attr('fill','blue')
.style('fill-opacity','0.5')
.on('mouseover',restaurant2Text)
.on('mouseout',removerestaurant2Text)
function restaurant2Text(event,d){
svg
c.enter().append("text")
.data(restaurant2.features)
.enter()
.append("text")
.attr("x", function(d) {return path1.centroid(d)[0]-15})
.attr("y", function(d) {return path1.centroid(d)[1]-7})
.attr('class','restaurant2_name')
.style('font-faimly','helvetica')
.style('font-size','6px')
.style('font-weight','light')
.text(d.properties.name)
}
function removerestaurant2Text(){
d3.selectAll('text.restaurant2_name').remove()
}
c.enter().append("circle")
.data(stations.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',1)
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '.3')
.style("stroke", "grey")
g.selectAll("path3")
.data(railway.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path3)
.style("fill", "none")
.style('stroke-opacity','.8')
.style("stroke-width", '.4')
.style("stroke", "rgb(114,140,180)")
c.enter().append("circle")
.data(tour.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',3)
.attr('fill','rgb(38,74,142)')
.style("fill-opacity", '1')
.style("stroke", "none")
.on('mouseover',tourText)
.on('mouseout',removetourText)
function tourText(event,d){
svg
.append("text")
.attr('x','600')
.attr('y','760')
.attr('class','tour_name')
.style('font-faimly','helvetica')
.style('font-size','10px')
.style('font-weight','bold')
.text(d.properties.name)
svg
.append("text")
.attr('x','600')
.attr('y','780')
.attr('class','tour_description')
.style('font-faimly','helvetica')
.style('font-size','9px')
.style('font-weight','light')
.text(d.properties.description)
svg
.append("line")
.attr('x1','630')
.attr('y1','650')
.attr('x2',path1.centroid(d)[0])
.attr('y2',path1.centroid(d)[1])
.attr('class','fLine')
.style("stroke-width", '0.5')
.style("stroke", "rgb(0,0,0)")
.style('stroke-dasharray','4 2')
svg
.append("line")
.attr('x1','630')
.attr('y1','650')
.attr('x2','630')
.attr('y2','750')
.attr('class','fLine')
.style("stroke-width", '0.5')
.style("stroke", "rgb(0,0,0)")
.style('stroke-dasharray','4 2')
}
function removetourText(){
d3.selectAll('text.tour_name').remove()
d3.selectAll('text.tour_description').remove()
d3.selectAll('line.fLine').remove()
}
var p = svg.selectAll("polyline")
c.enter().append("polyline")
.data(text)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill','none')
.style("stroke-width", '0.5')
.style("stroke", "rgb(241,179,192)")
c.enter().append("polyline")
.data(range)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill','none')
.style("stroke-width", '2')
.style("stroke", "rgb(114,140,180)")
.style('stroke-dasharray','3 1')
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", 'rgb(244,214,217)')
.style('fill-opacity','.2')
.style('stroke-opacity','.3')
.style("stroke-width", '2')
.style("stroke", "rgb(241,179,192)")
return svg.node();
}
range = FileAttachment("pointsrange.txt").tsv({array:true})
icons = FileAttachment("ICONS@1.txt").tsv({array:true})
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})
text = FileAttachment("wardtext.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.
