Curious human. Interested in the mechanics of how things work.
Public
Edited
Feb 2, 2023
1 fork
2 stars
viewof opac = slider({
min: 0.1,
max: 1,
step: 0.1,
value: 0.2,
title: "Opacity",
description: "Opacity"
})
tim = {
const el = DOM.svg(svgWidth, svgHeight);
d3.select(el).selectAll('g')
.data(sTime)
.join(
enter => enter.append('g')
.attr('width', width-(margin*2))
.attr('height', height-(margin*2))
.attr('transform', translate),
update => update
.attr('transform', translate)
)
.each(radChartTime)
return el;
}
function radChartTime(data) {
const chartSpace = d3.select(this);
const locVal = d3.extent(data.data.map(row=> row['time_travelled']))[1];
const rScale = d3.scaleLinear()
.domain([0, maxTime])
.range([0, radius]);
const containerWidth = width-(margin*2);
const containerHeight = height-(margin*2);
const axisGrid = chartSpace.append("g")
.attr("class", "scaleWrapper");
axisGrid.append("circle")
.attr("r", rScale(maxTime))
.style("fill", "none")
.style("stroke", "#b8b8b8")
.style("stroke-dasharray", "1");
axisGrid.selectAll(".gridCircle")
.data(data.data)
.enter()
.append("circle")
.attr("class", "gridCircle")
.attr("r", d => rScale(d.time_travelled))
.style("fill", "none")
.style("stroke", (d, i) => {
if (i === data.data.length-1) {
return 'orange';
} else {
return '#a8a8a8';
}
})
// .style("stroke-dasharray", "none")
.style("stroke-width", "1px")
.style("fill-opacity", opac);
axisGrid.append("text")
.attr("class", "title")
.text(data.country)
.attr("y", height)
.attr("x", -width/4);
axisGrid.append("text")
.attr("y", rScale(locVal))
.text(locVal + ' minutes');
}
sTime
margin = 4 //between individual charts
svgWidth = 960
svgHeight = 300
height = "150"
cols = 5
rows = 2
dotRadius = 2
viewof width = text({
title: "Height of each chart",
value: 200,
submit: "Go"
})
function translate(d, i) {
return `translate(${(radius+margin)*(2*(i%cols)+1)}, ${(radius+margin)*((2*Math.floor(i/cols))+1)})`;
}
maxTime = d3.extent(time.map(row => row['time_travelled']))[1];
maxDistance = 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'])));
sTime = {
let df = [];
for (let d in timeCountries) {
let country = timeCountries[d];
let subdf = time.filter(row => row['country'] === country);
subdf = subdf.sort(function(a, b){return a['time_travelled']-b['time_travelled']});
let obj = {country: country, data: subdf};
df.push(obj);
}
return df;
}
sDistance = {
let df = [];
for (let d in distanceCountries) {
let country = distanceCountries[d];
let subdf = distance.filter(row => row['country'] === country);
subdf = subdf.sort(function(a, b){return b['distance_travelled']-a['distance_travelled']});
let obj = {country: country, data: subdf};
df.push(obj);
}
return df;
}
time = FileAttachment("time-travelled.csv").csv({typed: true})
import {select, slider, 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.
