Public
Edited
Jan 31, 2024
1 star
display = {
const width = 1200, height = 610;
const svg = d3.create("svg")
.attr("viewBox", [0, -100, width, height+150]);
var projection = d3.geoMiller().fitSize([width, height], boundary);
var background = svg.append("g");
var diagram = svg.selectAll("polyline");
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.data(places).enter().append("polyline")
.attr("points", function(d) {return d.Icon})
.attr("transform", function(d) {
var x = projection([d.Longitude, d.Latitude])[0];
var y = projection([d.Longitude, d.Latitude])[1];
return 'translate(' + x + " " + y + ") rotate(180) scale(5)"})
.style('stroke', 'white')
.style('stroke-width', '0.3')
.style("fill", "lavender")
.style("fill-opacity", "0.5")
.on('mouseover', showInfo)
.on('mouseout', hideInfo);
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))
.style("stroke", "white")
function showInfo (event,d) {
d3.select(this).style('fill', 'purple');
info.append("path")
.datum([[width - 375, 130],
[width - 375, projection([d.Longitude, d.Latitude])[1]],
[projection([d.Longitude, d.Latitude])[0], projection([d.Longitude, d.Latitude])[1]]])
.attr("d", polyline.polyline().attr("points", d => d))
.style("stroke", "purple")
.style("stroke-width", "1")
.style('stroke-dasharray', '5 5')
.style('fill', 'none');
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.Name);
info.append("text")
.attr('class', 'description')
.attr('x', width - 350).attr('y', 150)
.text(d.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() {
d3.select(this).style('fill', 'lavender');
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', "purple")
.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', "purple")
.each(function(d) {wrap_text(d3.select(this), 200)});
return svg.node();
}
places = {
var pin = Array();
for (let i = 0; i < locationPin.length; i++) {
var temp = locationPin[i].slice(0,2);
pin.push(temp);
}
var data = [];
for (let i = 0; i < spots.length; i++) {
var temp = {...spots[i]}; // copy all contents
temp.Icon = pin;
data.push(temp);
}
return 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.
