Curious human. Interested in the mechanics of how things work.
Public
Edited
Dec 20, 2022
Importers
viewof daytime = Inputs.checkbox(vals, {label: "Time of day", value:['mean']})
linkScale = d3.scaleLinear().domain(travelExtents).range(linkRange)
linkColor = d3.scaleDiverging(travelExtents, d3.interpolateRainbow);
linkColor(400)
dayDist(distanceData19)
dayDist(distanceData21)
timeDistance(distanceData19)
timeDistance(distanceData21)
hrDistance(distanceData19)
hrDistance(distanceData21)
wkday(network21)
function wkday (network){
const width = 250;
const height = 200;
const projection = d3
.geoEquirectangular()
.fitExtent([[0, 0], [width , height]], data)
const path = d3.geoPath()
.projection(d3.geoEquirectangular()
.fitSize([width, height], data))
// let domain = [];
// for (let i in network) {
// for (let j in days) {
// domain.push(network[i][j]);
// }
// }
// domain = d3.extent(domain);
// let linkScale = d3.scaleLinear().domain(domain).range([0.001, 5])
// // domain.reverse()
// let linkColor = d3.scaleDiverging(domain, d3.interpolateInferno);
// let linkOp = d3.scaleLinear(domain, [0.1, 0.8])
let linkScale = d3.scaleLinear().domain(travelExtents).range([0.1, 10])
// domain.reverse()
let linkColor = d3.scaleDiverging(travelExtents, d3.interpolateInferno);
let linkOp = d3.scaleLinear(travelExtents, [0.2, 1])
const div = html`<div></div>`
const svg = d3.select(div).selectAll("svg")
.data(days)
.enter().append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
svg.append("text")
.attr("dx", width-20)
.attr("dy", 10)
.style("text-anchor", "end")
.style("font", "14px 'IBM PLex Sans', sans-serif")
.text(d => d)
svg.selectAll(".divisions")
.data(data.features)
.enter().append("path")
.style("stroke", "#999")
.style("stroke-width", 0.5)
.attr("d", path)
.style("fill", "#f4f4f4");
var line = d3.line()
.x(function(d) {
return projection([d.lng,d.lat])[0];
})
.y(function(d) {
return projection([d.lng,d.lat])[1];
})
.curve(curve);
svg.append("g").attr("class", "paths")
.each(function (node, i) {
let chart = d3.select(this);
let subN = network.sort(function(a, b){return b-a}).filter(row=> row[node]>0);
// for (let v in vals) {
// let value = vals[v];
chart.append("g")
.attr("id", "test")
.selectAll("paths")
.data(subN)
.enter()
.append("path")
.attr("d", (d) => {
let bend = 15;
let source = [d.orig_lng, d.orig_lat];
let target = [d.dest_lng, d.dest_lat];
let toDraw = {type: "LineString", coordinates: [source, target]};
let fullPath = path(toDraw);
console.log(fullPath);
return fullPath;
})
.attr("stroke", d=>linkColor(d[node]))
.attr("stroke-linecap", "round")
// .append("circle")
.attr('stroke-width', d => linkScale(d[node]))
// .attr("transform", d=>{
// return`translate(${projection([d.properties.lng, d.properties.lat])})`; })
// .attr("r", d => radScale(d.properties[node]))
// .attr('fill', 'none')
.attr("stroke-opacity", d => linkOp(d[node]))
// .attr('stroke', circleScale(value));
// }
});
return div
}
networkTime(network19)
networkTime(network21)
networkHr(network19)
networkHr(network21)
function networkHr(network){
const width = 200;
const height = 150;
const projection = d3
.geoEquirectangular()
.fitExtent([[0, 0], [width , height]], data)
const path = d3.geoPath()
.projection(d3.geoEquirectangular()
.fitSize([width, height], data))
// let domain = [];
// for (let i in network) {
// for (let j in hrs) {
// domain.push(network[i][j]);
// }
// }
// domain = d3.extent(domain);
// let linkScale = d3.scaleLinear().domain(domain).range([0.5, 5])
// // domain.reverse()
// let linkColor = d3.scaleDiverging(domain, d3.interpolateInferno);
// let linkOp = d3.scaleLinear(domain, [0.1, 0.8])
let linkScale = d3.scaleLinear().domain(travelExtents).range([0.1, 10])
// domain.reverse()
let linkColor = d3.scaleDiverging(travelExtents, d3.interpolateInferno);
let linkOp = d3.scaleLinear(travelExtents, [0.2, 1])
const div = html`<div></div>`
const svg = d3.select(div).selectAll("svg")
.data(hrs)
.enter().append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
svg.append("text")
.attr("dx", width-20)
.attr("dy", 10)
.style("text-anchor", "end")
.style("font", "14px 'IBM PLex Sans', sans-serif")
.text(d => (d+1))
svg.selectAll(".divisions")
.data(data.features)
.enter().append("path")
.style("stroke", "#999")
.style("stroke-width", 0.5)
.attr("d", path)
.style("fill", "#f4f4f4");
svg.append("g").attr("class", "paths")
.each(function (node, i) {
let chart = d3.select(this);
let subN = network.sort(function(a, b){return b-a}).filter(row=> row[node]>0);
// for (let v in vals) {
// let value = vals[v];
chart.append("g")
.attr("id", "test")
.selectAll("paths")
.data(subN)
.enter()
.append("path")
.attr("d", (d) => {
let bend = 15;
let source = [d.orig_lng, d.orig_lat];
let target = [d.dest_lng, d.dest_lat];
let toDraw = {type: "LineString", coordinates: [source, target]};
let fullPath = path(toDraw);
console.log(fullPath);
return fullPath;
})
.attr("stroke", d=>linkColor(d[node]))
.attr("stroke-linecap", "round")
// .append("circle")
.attr('stroke-width', d => linkScale(d[node]))
// .attr("transform", d=>{
// return`translate(${projection([d.properties.lng, d.properties.lat])})`; })
// .attr("r", d => radScale(d.properties[node]))
// .attr('fill', 'none')
.attr("stroke-opacity", d => linkOp(d[node]))
// }
});
return div
}
{
let width=1000;
let height= 1000;
const projection = d3
.geoEquirectangular()
.fitExtent([[0, 0], [width , height]], distanceData19)
const path = d3.geoPath()
.projection(d3.geoEquirectangular()
.fitSize([width, height], distanceData19))
const svg = d3.select(DOM.svg( width + margin.left + margin.right, height + margin.top + margin.bottom))
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
g.selectAll(".divisions")
.data(distanceData19.features)
.enter().append("path")
.style("stroke", "#999")
.style("stroke-width", 0.5)
.attr("d", path)
.style("fill", "#f4f4f4");
// fill: #f4f4f4;
// stroke: #999;
// stroke-width: 0.5;
// svg.append("g")
// .selectAll("circle")
// .data(data)
// .join("circle")
// .attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`)
// .attr("r", 0.5)
// .attr('fill', "green")
// .append("title")
// .text(d => d.name);
// g.selectAll(".circles")
// .data(distanceData19.features)
// .enter().append("circle")
// .attr("transform", d=>{ console.log(projection([d.lng, d.lat])); return`translate(${projection([d.lng, d.lat])})`; })
// .attr("r", 0.5)
// .attr('fill', "green")
// .append("title")
g.append("g").attr("class", "paths")
.each(function (node, i) {
let chart = d3.select(this);
console.log(chart);
chart.append("g")
.attr("id", "test")
.selectAll("circles")
.data(distanceData19.features)
.enter()
.append("circle")
.attr("transform", d=>{ console.log(projection([d.lng, d.lat])); return`translate(${projection([d.lng, d.lat])})`; })
.attr("r", 0.5)
.attr('fill', "green")
});
return svg.node()
}
circleScale = d3.scaleOrdinal().domain(vals).range(circleColors)
circleColors = ["#219ebc","#d62828","#f77f00","#fcbf49"]
vals = ['std', 'max', 'mean', 'min']
days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
// times = ['morning', 'afternoon', 'evening', 'night']
// hrs = [i for i in range(23)]
times = ['morning', 'afternoon', 'evening', 'night']
hrs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
margin = ({top: 0, bottom: 10, left: 10, right: 10})
distanceData19 = FileAttachment("distance_range_pln_area_2019@2.geojson").json()
distanceData21 = FileAttachment("distance_range_pln_area_2021@2.geojson").json()
network21 = FileAttachment("network_volume_pln_area_2021.csv").csv({typed: true})
network19 = FileAttachment("network_volume_pln_area_2019.csv").csv({typed: true})
path = d3.geoPath()
.projection(d3.geoMercator()
.fitSize([width, height], distanceData19))
import {rangeSlider} from '@mootari/range-slider'
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.
