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
c.enter().append("circle")
.data(stations1.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")
c.enter().append("circle")
.data(restaurants.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',4.5)
.style("fill", "red")
.style('fill-opacity','0.5')
.style("stroke", "none")
.on('mouseover',restOn)
.on('mouseout',restOff)
function restOn(event,d){
svg
.append("line")
.attr('x1','670')
.attr('y1','840')
.attr('x2',path1.centroid(d)[0])
.attr('y2',path1.centroid(d)[1])
.attr('class','fLine')
.style("stroke-width", '2')
.style("stroke", "red")
.style('stroke-opacity','0.5')
.style('stroke-dasharray','4 2')
}
function restOff(){
d3.selectAll('line.fLine').remove()
}
c.enter().append("circle")
.data(mealbox.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',6.5)
.style("fill", "rgb(114,140,180)")
.style('stroke-opacity','1')
.style("stroke-width", '1.5')
.style("stroke", "rgb(241,179,192)")
.on('mouseover',StatOn)
.on('mouseout',StatOff)
function StatOn(event,d){
svg
.append('circle')
.attr("cx", path1.centroid(d)[0])
.attr("cy", path1.centroid(d)[1])
.attr('r',65)
.attr('fill', 'rgb(244,214,217)')
.attr('stroke-width','2')
.attr('stroke',"rgb(114,140,180)")
.attr('stroke-dasharray','2 2')
.style('fill-opacity','.3')
.attr('class','CircleStat')
}
function StatOff(event,d){
d3.selectAll('circle.CircleStat').remove()
}
c.enter().append("circle")
.data(commercial.features)
.enter()
.append("circle")
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('class','coutline')
.attr('r',40)
.style("stroke-width", '2')
.style("stroke-opacity", '1')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','3 1')
.style("fill", 'none')
.on('mouseover',commOn)
.on('mouseout',commOff)
function commOn(event,d){
d3.selectAll('circle.coutline').style("fill-opacity", "0.5")
d3.selectAll('circle.coutline').style("fill", "rgb(247,178,181)")
svg
.append("line")
.attr('x1','500')
.attr('y1','500')
.attr('x2','670')
.attr('y2','657')
.attr('class','fLine')
.style("stroke-width", '2')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','4 2')
}
function commOff(event,d){
d3.selectAll('circle.coutline').style("fill", "none")
d3.selectAll('line.fLine').remove()
}
g.selectAll("path3")
.data(railway.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path3)
.style("fill", "none")
.style('stroke-opacity','.4')
.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','100')
.attr('y','100')
.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','100')
.attr('y','120')
.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','150')
.attr('y1','300')
.attr('x2',path1.centroid(d)[0])
.attr('y2',path1.centroid(d)[1])
.attr('class','fLine')
.style("stroke-width", '0.5')
.style("stroke", "rgb(114,140,180)")
.style('stroke-dasharray','4 2')
svg
.append("line")
.attr('x1','150')
.attr('y1','300')
.attr('x2','150')
.attr('y2','130')
.attr('class','fLine')
.style("stroke-width", '0.5')
.style("stroke", "rgb(114,140,180)")
.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(icons)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill','none')
.style("stroke-width", '0.7')
.style("stroke", "rgb(114,140,180)")
c.enter().append("polyline")
.data(range)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill','none')
.style("stroke-width", '2')
.style("stroke-opacity", '1')
.style("stroke", "rgb(114,140,180)")
.style('stroke-dasharray','3 1')
c.enter().append("polyline")
.data(residential)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill','none')
.style("stroke-width", '2')
.style("stroke-opacity", '1')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','3 1')
.on('mouseover',resiOn)
.on('mouseout',resiOff)
function resiOn(event,d){
d3.select(this).style("fill-opacity", "0.5")
d3.select(this).style("fill", "rgb(247,178,181)")
svg
.append("line")
.attr('x1','250')
.attr('y1','500')
.attr('x2','670')
.attr('y2','720')
.attr('class','fLine')
.style("stroke-width", '2')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','4 2')
}
function resiOff(event,d){
d3.select(this).style("fill", "none")
d3.selectAll('line.fLine').remove()
}
c.enter().append("polyline")
.data(school)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.attr('class','foutline')
.style('fill','none')
.style("stroke-width", '2')
.style("stroke-opacity", '1')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','3 1')
.on('mouseover',schoolOn)
.on('mouseout',schoolOff)
function schoolOn(event,d){
d3.selectAll('polyline.foutline').style("fill-opacity", "0.5")
d3.selectAll('polyline.foutline').style("fill", "rgb(247,178,181)")
svg
.append("line")
.attr('x1','450')
.attr('y1','480')
.attr('x2','670')
.attr('y2','605')
.attr('class','fLine')
.style("stroke-width", '2')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','4 2')
}
function schoolOff(event,d){
d3.selectAll('polyline.foutline').style("fill", "none")
d3.selectAll('line.fLine').remove()
}
c.enter().append("polyline")
.data(business)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.attr('class','boutline')
.style('fill','none')
.style("stroke-width", '2')
.style("stroke-opacity", '1')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','3 1')
.on('mouseover',busiOn)
.on('mouseout',busiOff)
function busiOn(event,d){
d3.selectAll('polyline.boutline').style("fill-opacity", "0.5")
d3.selectAll('polyline.boutline').style("fill", "rgb(247,178,181)")
svg
.append("line")
.attr('x1','450')
.attr('y1','550')
.attr('x2','670')
.attr('y2','773')
.attr('class','fLine')
.style("stroke-width", '2')
.style("stroke", "rgb(247,178,181)")
.style('stroke-dasharray','4 2')
}
function busiOff(event,d){
d3.selectAll('polyline.boutline').style("fill", "none")
d3.selectAll('line.fLine').remove()
}
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)")
c.enter().append("polyline")
.data(title)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill',"rgb(247,178,181)")
.style("fill-opacity", '.3')
.style("stroke-width", '2')
.style("stroke-opacity", '1')
.style("stroke", "rgb(114,140,180)")
c.enter().append("polyline")
.data(titleicon)
.enter()
.append("polyline")
.attr("points", function(d) {return d})
.style('fill',"none")
.style("stroke-width", '2.5')
.style("stroke-opacity", '1')
.style("stroke", "rgb(114,140,180)")
return svg.node();
}
titleicon = FileAttachment("titleicon.txt").tsv({array:true})
title = FileAttachment("title.txt").tsv({array:true})
business = FileAttachment("business@1.txt").tsv({array:true})
school = FileAttachment("school@1.txt").tsv({array:true})
residential = FileAttachment("residential.txt").tsv({array:true})
restaurants = FileAttachment("restaurants@1.geojson").json()
mealbox = FileAttachment("meal box points.geojson").json()
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()
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})
stations1 = FileAttachment("stations@1.geojson").json()
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.
