Published
Edited
Dec 9, 2020
1 fork
// cityCounter = {
// for (let i = 0; i < citiesPeers.length; i++) {
// yield Promises.delay(3000, i);
// }
// }
// peerNet = {
// let peerCities = await simpleQuery(citiesRaw[cityCounter]);
// net.push({ city: citiesRaw[cityCounter], peers: peerCities });
// }
// net = []
// JSON.stringify(net)
drag = simulation => {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
return d36
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
map = {
//create SVG
let width = 960;
let height = 500;
let svg = d3
.create('svg')
.attr('id', 'worldMap')
.attr('viewBox', "0 0 " + width + " " + height)
.attr('preserveAspectRatio', 'xMinYMin meet');
//drawing utilities
let projection = d3
.geoRobinson()
.center([0, 0])
.scale(120)
.rotate([0, 0]);
let path = d3.geoPath().projection(projection);
let g = svg.append("g");
//oceans
g.append("path")
.datum({ type: "Sphere" })
.attr("class", "water")
.attr('fill', '#D0E1D4')
.attr("d", path);
// world countries
g.selectAll(".countries")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.attr("class", 'countries')
.attr('fill', '#F2F6D0')
.attr('stroke', '#D0E1D4');
//draw city geocircles
g.selectAll(".cities")
.data(citiesRaw)
.enter()
.append("path")
.attr('class', 'cities')
.attr('fill', '#EDAFB8')
.attr('stroke', 'none')
.attr('stroke-width', 0)
.attr('d', function(e) {
return path(
d3
.geoCircle()
.center([e.Longitude, e.Latitude])
.radius(1.5)()
);
})
.attr('id', function(e) {
let idName = e.City.split(' ').join('_');
return idName;
})
.attr('cursor', 'pointer')
.on('click', async function(f) {
d3.selectAll('.cities')
.transition()
.duration(500)
.attr('fill', '#EDAFB8')
.attr('stroke', 'white')
.attr('stroke-width', 0);
d3.select(this)
.transition()
.duration(500)
.attr('fill', 'magenta');
let peers = await simpleQuery(f);
peers = peers[topic];
for (let i = 0; i < peers.length; i++) {
let peer = peers[i];
d3.select("#" + peer.City.split(' ').join('_'))
.raise()
.transition()
.duration(1000)
.attr('fill', '#71697A')
.attr('stroke', topicStyles[topic].color)
.attr('stroke-width', 3);
}
})
.on('mouseover', function(e) {
d3.select(this)
.raise()
.transition()
.attr('stroke', '#71697A')
.attr('stroke-width', 1);
})
.on('mouseout', function(e) {
d3.select(this)
.transition()
.attr('stroke', 'white')
.attr('stroke-width', 0);
});
// zoom and pan
const zoom = d3
.zoom()
.scaleExtent([1, 10])
.on("zoom", () => {
g.attr("transform", d3.event.transform);
});
//connect zoom to SVG
svg.call(zoom);
//show map
return svg.node();
}
world
// City,Country,State,Latitude,Longitude,PopGrowth,Population2020,BikeNetwork,CarbonFootprint,PriceIncome,MinimumWage,GDP,Unemployment,GreenEnergy,Lifespan,CPIIndex,CostOfLiving,GreenSpace,EnergyUse,Literacy,Commute,Land,WomenLabour,GINI,GDPpc
viewof cityName = text({
title: 'City Name',
placeholder: "Placeholder text"
// description: "This input only changes value on submit",
})
{
let city = {};
Object.assign(city, citiesRaw[0]);
for (const [key, value] of Object.entries(city)) {
city[key] = city[value] * (Math.random() * .5 + .75);
}
return simpleQuery(city);
}
simpleQuery(citiesRaw[2])
citiesRaw[0]
citiesPeers = FileAttachment("peers@2.json").json()
d36 = require("d3@6")
{
let response = await simpleQuery(citiesRaw[24]);
return JSON.stringify(response);
}
cityList = {
let data = [];
citiesNorm.forEach(function(city) {
data.push({ label: city.City, value: city.City.split(' ').join('_') });
});
return data;
}
{
return JSON.stringify(
cityList.map(
d => "<option value='" + d.value + "'>" + d.label + "</option>"
)
);
}
import { slider, button, select } from "@jashkenas/inputs"
import { text } from "@jashkenas/inputs"
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.
