Interested in data visualisation, maps, JavasScript, and geology
Published
Edited
Oct 12, 2021
mutable debugA = {
}
imperial = [
{ name: "mile", childLength: 1760 },
// { name: "furlong", value: 3, childLength: 220 },
{ name: "yard", value: 3, childLength: 3 },
{ name: "foot", value: 1, childLength: 12 }
]
// lowest level imperial node
inch = ({ name: "inch", value: 1 / 1 })
imperialReducer = (currentValue, currentElement) => {
const parent = {
name: currentElement.name,
children: new Array(currentElement.childLength).fill(currentValue)
// value: currentElement.value
};
return parent;
}
imperialData = imperial.reduceRight(imperialReducer, inch)
imperialRoot = partition(imperialData, mile)
si = [
// { prefix: "mega", value: 10 ** 4 },
{ prefix: "kilo", value: 10 ** 3 },
{ prefix: "hecto", value: 10 ** 2 },
{ prefix: "deca", value: 10 ** 1 },
{ prefix: "", value: 10 ** 0 },
// { prefix: "deci", value: 10 ** -1 },
// { prefix: "centi", value: 10 ** -2 }
// { prefix: "milli", value: 10 ** -3 }
// { prefix: "micro", value: 0.0001 } // 10 ** -4 gives rounding error
]
// lowest level SI node
// millimeter = ({
// name: "millimeter",
// value: 0.001
// })
// lowest level SI node
decimeter = ({
name: "decimeter",
value: 0.1
})
metricReducer = (currentValue, currentElement) => {
const parent = {
name: currentElement.prefix + "meter",
children: new Array(10).fill(currentValue)
};
return parent;
}
metricData = si.reduceRight(metricReducer, decimeter)
metricRoot = partition(metricData, 1)
function drawRect(context, { minX, maxX, minY, maxY }) {
context.fillStyle = "black";
const x = minX;
const y = minY;
const width = maxX - minX - 2;
const height = maxY - minY - 1;
context.fillRect(x, y, width, height);
return context;
}
function labelVisible(d) {
return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 16;
}
function drawText(context, { minX, maxX, minY, maxY }, name) {
if (maxX - minX < 16) return;
context.fillStyle = "white";
const x = minX + 5;
const y = minY + 13;
context.fillText(name, x, y);
return context;
}
scale = d3.scaleLinear().domain([0, mile]).range([0, height])
mile = 1.609344 // in km's
partition = (data, km) => {
const root = d3.hierarchy(data).sum((d) => d.value);
// .size([height, (root.height + 1) * width / 3])
return d3.partition().size([scale(km), partitionWidth])(root);
}
partitionWidth = width / 2
dpi = window.devicePixelRatio || 1
halfWidth = width / 2
horizontalPadding = 5
height = 10000
margins = ({ bottom: 60 })
RBush = require("rbush@3")
d3 = import("d3@v7")
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.
