Data Scientist passionate with making colourful shapes appear and move on my computer screen.
Published
Edited
Oct 15, 2020
map2 = {
const svg = d3
.select(DOM.svg(width, height_cities_map))
.style("width", width)
.attr('class', 'map_cities')
.style("height", height);
const water = svg
.selectAll(".tile")
.data(tiles_all)
.enter()
.append("path")
.style("fill", water_color)
.style("fill-opacity", .35)
.attr("d", d => {
return path_all(d.data.water);
})
.style("stroke-width", 1)
.style("stroke-opacity", .5);
const earth = svg
.selectAll(".tile")
.data(tiles_all)
.enter()
.append("path")
.style("fill", "white")
.style("fill-opacity", 1)
.attr("d", d => {
return path_all(d.data.earth);
});
/*
const borders = svg
.selectAll(".tile")
.data(tiles_all)
.enter()
.append("path")
.style("fill", 'white')
.style("fill-opacity", 0)
//.style('path', streets_color)
.attr("d", d => {
return path_all(
d.data.boundaries.filter(d.data.water, d => !d.properties.boundary)
);
});
*/
let cities = svg.append('g');
const tooltip = svg.append("g").style('opacity', 0);
tooltip
.append('rect')
.attr('x', -5)
.attr('y', -15)
.attr('width', 100)
.attr('height', 20)
.style('opacity', 0.7)
.attr('fill', 'white');
tooltip.append('text');
const showTooltip = function(d) {
let dat = d.explicitOriginalTarget.__data__;
let city_name = dat.city.charAt(0).toUpperCase() + dat.city.slice(1);
tooltip.transition().duration(100);
tooltip
.style("opacity", 1)
.attr("transform", `translate (${dat.xmap + 10}, ${dat.ymap + 10})`);
let label = "City: " + city_name;
d3.select(this)
.attr('stroke-opacity', 1)
.attr('stroke', 'blue');
tooltip.select('text').text(label);
tooltip.select('rect').attr('width', label.length * 8);
};
const moveTooltip = function(d) {
let dat = d.explicitOriginalTarget.__data__;
tooltip;
};
const hideTooltip = function(d) {
let dat = d.explicitOriginalTarget.__data__;
tooltip
.transition()
.duration(200)
.style("opacity", 0);
d3.select(this)
.attr('stroke-opacity', 0.5)
.attr('stroke', red_traffic);
};
cities
.selectAll('circle')
.data(db_cities, d => d.detid)
.join('circle')
.attr('cx', d => d.xmap)
.attr('cy', d => d.ymap)
.attr('r', 3)
.attr('fill', 'none')
.attr('stroke', red_traffic)
.attr('stroke-width', 3)
.attr('stroke-opacity', 0.5)
.on("mouseover", showTooltip)
.on("mousemove", moveTooltip)
.on("mouseleave", hideTooltip);
return svg.node();
}
height_cities_map = 600
zoom_cities = 10
// average of positions of detectors; To_center cannot be dinamically defined as this, since it would generate a circular definition
[
d3.mean(
d3.rollups(db_to, v => d3.mean(v, d => d.long), d => d.detid).map(d => d[1])
),
d3.mean(
d3.rollups(db_to, v => d3.mean(v, d => d.lat), d => d.detid).map(d => d[1])
)
]
// The center of Torino
To_center = [7.667836578696744, 45.06376129699251]
is_business_day = in_values[0][0] == "true" ? true : false
hour1 = in_values[1][0][0]
hour2 = in_values[1][0][1]
// draw detectors
// https://observablehq.com/@gabrielelabanca/understanding-joins
d3
.select('svg.map_detect')
.selectAll('circle')
.data(db_ranged, d => d.detid)
.join(
enter =>
enter
.append("circle")
.attr('cx', d => d.xmap)
.attr('cy', d => d.ymap)
.attr('r', 5)
.attr('fill', 'red')
.attr('fill-opacity', d => d.flow / 2500),
update =>
update
.attr('cx', d => d.xmap)
.attr('cy', d => d.ymap)
.attr('r', 5)
.attr('fill', 'red')
.attr('fill-opacity', d => d.flow / 2500),
//.call(update => update.transition(t)
//.attr("x", (d, i) => i * 16)),
exit =>
exit
.attr("fill", "brown")
.attr("y", 30)
.remove()
)
weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
db_average_flow = {
let average_flow = d3.rollups(
db_to,
v => d3.mean(v, d => d.flow),
d => d.weekday,
d => d.hour
);
let db = average_flow
.map((d, i) => {
return d[1].map((dd, ii) => {
return { day: i, weekday: weekdays[i], hour: ii, flow: dd[1] };
});
})
.flat();
return db;
}
db_ranged = {
let str_is_business_day = is_business_day ? 'True' : 'False';
let db = d3
.rollups(
db_to.filter(
d =>
d.hour >= hour1 &&
d.hour < hour2 &&
d.business_day == str_is_business_day
),
v => d3.mean(v, d => d.flow),
d => d.detid
)
.map((d, i) => {
return { detid: d[0], flow: d[1] };
});
// assign variables to new processed database
db.forEach((d, i, v) => {
let det = db_to.filter(dd => dd.detid === d.detid)[0];
//console.log(det)
d.long = det.long;
d.lat = det.lat;
d.xmap = det.xmap;
d.ymap = det.ymap;
});
return db;
}
// import database from .csv
db_to = {
let db = d3.csvParse(await FileAttachment('df_to_mean@2.csv').text(),
d3.autoType)
db.forEach((d,i,v) => {
d.xmap = projection([d.long, d.lat])[0];
d.ymap = projection([d.long, d.lat])[1]})
return db
}
// import database from .csv
db_cities = {
let db = d3.csvParse(
await FileAttachment('cities@1.csv').text(),
d3.autoType
);
db.forEach((d, i, v) => {
d.xmap = projection_all([d.long, d.lat])[0];
d.ymap = projection_all([d.long, d.lat])[1];
});
return db;
}
db_to
timestamp_parser = d3.timeParse("%Y-%m-%d %H:%M:%S.%f");
// get geo tiles from Nextzen.org
tiles = Promise.all(tile().map(async d => {
d.data = await fetch(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=v0_A-Y3fTIyGjIDizTbXBA`).then(response => response.json()); // Sign up for an API key: https://www.nextzen.org
return d;
}))
// function to request data from Nextzen
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
// create the D3 projection, providing center and zoom level for the map
projection = d3.geoMercator()
.center(To_center)
.scale(Math.pow(2, zoom) / (2 * Math.PI))
.translate([width / 2, height / 2])
// get geo tiles from Nextzen.org
tiles_all = Promise.all(
tile_all().map(async d => {
d.data = await fetch(
`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=v0_A-Y3fTIyGjIDizTbXBA`
).then(response => response.json()); // Sign up for an API key: https://www.nextzen.org
return d;
})
)
// function to request data from Nextzen
tile_all = d3.tile()
.size([width, height_cities_map])
.scale(projection_all.scale() * 2 * Math.PI)
.translate(projection_all([0, 0]))
// create the D3 projection, providing center and zoom level for the map
projection_all = d3
.geoMercator()
.center(To_center)
.scale(Math.pow(2, zoom_cities) / (2 * Math.PI))
.translate([width / 2, height_cities_map / 2])
function filter({features}, test) {
return {type: "FeatureCollection", features: features.filter(test)};
}
path = d3.geoPath(projection)
path_all = d3.geoPath(projection_all)
yellow_traffic = "#ffcc4d"
red_traffic = "#dd2e44"
green_traffic = "#77b255"
streets_color = "#669966"
water_color = '#1199dd'
style = html`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">`
d3 = require("d3@6", "d3-geo@2", "d3-tile@1", "d3-simple-slider@1")
import { vl } from "@vega/vega-lite-api"
import { radio, number } from "@jashkenas/inputs"
import { inputsGroup } from "@bumbeishvili/input-groups"
import { rangeSlider } from "@mootari/range-slider"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.