Curious human. Interested in the mechanics of how things work.
Public
Edited
Feb 3, 2023
2 forks
2 stars
canvasSize = Math.min(560, width);
height
(length + margin) *1
function translateS(d, i) {
return `translate(${(length/2 + marginS)*i * 2}, ${-height/2})`;
}
timeResponse = {
let countries = Array.from(new Set(time.map(row => row.country)));
let df = {};
countries.map(row => {
let subdf = time.filter(d => d['country'] === row);
let numOwn = subdf.filter(row => row['own_transport'] === 'Yes').length;
let numNOwn = subdf.filter(row => row['own_transport'] === 'No').length;
df[row + '_' + 'num_own'] = numOwn;
df[row + '_' + 'num_no_own'] = numNOwn;
});
// let numOwn = time.filter(row => row['own_transport'] === 'Yes').length;
// let numNOwn = time.filter(row => row['own_transport'] === 'No').length;
return df;//{'own_transport': numOwn, 'no_own_transport': numNOwn};
}
distResponse = {
let countries = Array.from(new Set(distance.map(row => row.country)));
let df = {};
countries.map(row => {
let subdf = distance.filter(d => d['country'] === row);
let numOwn = subdf.filter(row => row['own_transport'] === 'Yes').length;
let numNOwn = subdf.filter(row => row['own_transport'] === 'No').length;
df[row + '_' + 'num_own'] = numOwn;
df[row + '_' + 'num_no_own'] = numNOwn;
});
// let numOwn = time.filter(row => row['own_transport'] === 'Yes').length;
// let numNOwn = time.filter(row => row['own_transport'] === 'No').length;
return df;//{'own_transport': numOwn, 'no_own_transport': numNOwn};
}
function deg2rad(deg) { return deg * Math.PI / 180 }
svgWidth = 960
svgHeight = 300
height = 150
cols = 5
margin = 4 //between individual charts
function translate(d, i) {
return `translate(${(radius+margin)*(2*(i%cols)+1)}, ${(radius+margin)*((2*Math.floor(i/cols))+1.25)})`;
}
spiralScale = d3.scaleLinear().domain([0, maxTime]).range([0, 100])
function axisSpiral(length) {
return d3.lineRadial()
.angle((d, i) => Math.PI / _precision * i)
.radius((d, i) => i * (outerR - innerR) / length + innerR)({ length });
}
maxTime = d3.extent(time.map(row => row['time_travelled']))[1];
maxDist = d3.extent(distance.map(row => row['distance_travelled']))[1];
distanceCountries = Array.from(new Set(distance.map(row=> row['country'])));
timeCountries = Array.from(new Set(time.map(row=> row['country'])));
distance = FileAttachment("distance-travelled.csv").csv({typed: true})
time = FileAttachment("time-travelled.csv").csv({typed: true})
import {select, slider, text} from "@jashkenas/inputs"
d3 = require('d3', 'd3-radial-axis')
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.
