Curious human. Interested in the mechanics of how things work.
Public
Edited
Dec 1, 2022
function networkHr(network){
const width = 500;
const height = 400;
const projection = d3
.geoEquirectangular()
.fitExtent([[0, 0], [width , height]], distanceData19)
const path = d3.geoPath()
.projection(d3.geoEquirectangular()
.fitSize([width, height], distanceData19))
// 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(months)
.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 + '-' + years[0]))
svg.selectAll(".divisions")
.data(distanceData19.features)
.enter().append("path")
.style("stroke", "#999")
.style("stroke-width", 0.5)
.attr("d", path)
.style("fill", "#f4f4f4");
svg.append('g').attr('class', 'mrt')
.each(function (node, i) {
let chart = d3.select(this);
let nodes = weekday['nodes'][i];
let edges = weekday['edges'][i];
console.log(nodes);
chart.append('g')
.attr('id', 'station')
.data(nodes)
.enter()
.append('circle')
.attr('stroke-width', 1)
.attr("transform", d=>{
return`translate(${projection([d.lng, d.lat])})`; })
.attr("r", 5)//d => radScale(d.properties[node + '_' + value]))
.attr('fill', 'none')
.attr("stroke-opacity", 0.7)
.attr('stroke', 1)//circleScale(value));
});
// 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", "flows")
.each(function (node, i) {
let chart = d3.select(this);
let nodes = weekday['nodes'][i];
let edges = weekday['edges'][i];
chart.append("g")
.attr("id", "mrts")
.selectAll("circles")
.data(nodes)
.enter()
.append("circle")
.attr("transform", d=>{ return`translate(${projection([d.lng, d.lat])})`; })
.attr("r", d => radScale(d['mean_day_volume']))
.attr('fill', "steelblue");
// chart.append("g")
// .attr("id", "flows")
// .selectAll("circles")
// .data(edges)
// .enter()
// .append("path")
// .attr("transform", d=>{ return`translate(${projection([d.lng, d.lat])})`; })
// .attr("r", d => radScale(d['mean_day_volume']))
// .attr('fill', "green");
chart.append("g")
.attr("id", "test")
.selectAll("paths")
.data(edges)
.enter()
.append("path")
.attr("d", (d) => {
let source = nodes.filter(row=> row['id'] === d['source'])[0];
let target = nodes.filter(row=> row['id'] === d['target'])[0];
console.log(source, target, d['target']);
let srcCoords = [source.lng, source.lat];
let trgCoords = [target.lng, target.lat];
// 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", 'green')//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 => linkScale(d['day_volume']));
});
return svg.node()
}
radScale = d3.scaleLinear().domain(radDomain).range(radiusRange);
linkScale = d3.scaleLinear().domain(linkDomain).range(linkRange);
weekday = ({nodes: [wd0419, wd1019, wd1119], edges: [ewd0419, ewd1019, ewd1119]})
weekend = ({nodes: [we0419, we1019, we1119], edges: [ewe0419, ewe1019, ewe1119]})
months = [4, 10, 11]
years = [2019]//, 2020, 2021]
import {rangeSlider} from '@mootari/range-slider'
distanceData19.features
wd0419 = FileAttachment("weekday-nodes-loc-04-2019.csv").csv({typed: true})
wd1019 = FileAttachment("weekday-nodes-loc-10-2019.csv").csv({typed: true})
wd1119 = FileAttachment("weekday-nodes-loc-11-2019.csv").csv({typed: true})
we0419 = FileAttachment("weekend-nodes-loc-04-2019.csv").csv({typed: true})
we1019 = FileAttachment("weekend-nodes-loc-10-2019.csv").csv({typed: true})
we1119 = FileAttachment("weekend-nodes-loc-11-2019.csv").csv({typed: true})
ewd0419 = FileAttachment("weekday-edges-04-2019.csv").csv({typed: true})
ewd1019 = FileAttachment("weekday-edges-10-2019.csv").csv({typed: true})
ewd1119 = FileAttachment("weekday-edges-11-2019.csv").csv({typed: true})
ewe0419 = FileAttachment("weekend-edges-04-2019.csv").csv({typed: true})
ewe1019 = FileAttachment("weekend-edges-10-2019.csv").csv({typed: true})
ewe1119 = FileAttachment("weekend-edges-11-2019.csv").csv({typed: true})
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.
