Public
Edited
Jan 31, 2024
Seoul Old
display = {
const width = 1200, height = 610;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMiller().fitSize([width-100, height-100], municipalities);
var background = svg.append("g");
var diagram = svg.append("g");
var diagram = svg.selectAll("circle");
var title = svg.append("g");
var description = svg.append("g");
var info = svg.append("g");
background.selectAll("path")
.data(municipalities.features).enter().append("path")
.style("fill", "pink");
background.selectAll("path1")
.data(water.features).enter().append("path")
.style("fill", "lightblue");
diagram.selectAll("circle")
.data(places).enter().append("circle")
.attr("cx", function(d) {return projection([d.Longitude,d.Latitude])[0]})
.attr("cy", function(d) {return projection([d.Longitude,d.Latitude])[1]})
.attr('r',3)
.style("fill", "black");
title.append("text")
.text('Passport to Seoul');
description.append("text")
.text('Collection of dream trip spots');
svg.selectAll("text")
.style('font-family', 'roboto+slab');
background.selectAll("path")
.attr("d", d3.geoPath().projection(projection))
.attr("transform", `translate(100, 50)`)
.style("stroke", "white")
diagram.selectAll("path")
.attr("d", d3.geoPath().projection(projection))
.attr("transform", `translate(100, 50)`)
.style("stroke", "white")
.on('mouseover', showInfo)
.on('mouseout', hideInfo);
function showInfo (event,d) {
info.append("line")
.attr('x1', width - 375)
.attr('y1', 130)
.attr('x2', projection(d.geometry.coordinates)[0])
.attr('y2', projection(d.geometry.coordinates)[1])
.style('stroke-width', '1')
.style("stroke", "purple")
.style('stroke-dasharray', '6 4');
info.append("path")
.datum([[width - 375, 100], [width - 375, 160]])
.attr("d", polyline.polyline().attr("points", d => d))
.style("stroke", "purple")
.style("stroke-width", "3");
info.append("text")
.attr('class', 'title')
.text(d.properties.name);
info.append("text")
.attr('class', 'description')
.attr('x', width - 350).attr('y', 150)
.text(d.properties.description);
info.selectAll("text.title")
.attr('x', width - 350).attr('y', 125)
.style('font-size', '24px')
.style('font-weight', 'bold')
.style('fill', "purple")
.each(function(d) {wrap_text(d3.select(this), 150)});
info.selectAll("text.description")
.style('font-size', '16px')
.style('font-weight', 'regu')
.style('fill', "purple")
.each(function(d) {wrap_text(d3.select(this), 200)});
}
function hideInfo() {
info.selectAll('line').remove();
info.selectAll('path').remove();
info.selectAll('text').remove();
}
title.selectAll("text")
.attr('x', '50').attr('y', '100')
.style('font-size', '32px')
.style('font-weight', 'bold')
.style('fill', "white")
.each(function(d) {wrap_text(d3.select(this), 150)});
description.selectAll("text")
.attr('x', '50').attr('y', '130')
.style('font-size', '16px')
.style('font-weight', 'regular')
.style('fill', "white")
.each(function(d) {wrap_text(d3.select(this), 200)});
return svg.node();
}
places = {
var data = [];
for (let i = 0; i < spots.length; i++) {
var temp = {...spots[i]}; // copy all contents
temp.Icon = locationPin;
data.push(temp);
}
return data
}
locationPin = FileAttachment("Location Pin.txt").tsv({array:true})
spots = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vS1xhAB0_o3dZTj1SFbgm1QxBWHpqrLrPL0n9PaomyXEb6k_XIUE0jP5PLmMevej1PDNzcMi5rtJO2d/pub?gid=0&single=true&output=csv", d3.autoType)
water = FileAttachment("water@1.geojson").json()
municipalities = FileAttachment("municipalities@2.geojson").json()
import {wrap_text} from "@ben-tanen/svg-text-and-tspan-word-wrapping"
import {Legend} from "@d3/color-legend"
polyline = require("shape2path@3");
d3 = require("d3@6", "d3-geo@3", "d3-geo-projection@4")
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.
