Published
Edited
Jul 27, 2020
7 stars
n = data.columns.length
function dodge(positions, separation = 12, maxiter = 10, maxerror = 1e-1) {
positions = Array.from(positions);
let n = positions.length;
if (!positions.every(isFinite)) throw new Error("invalid position");
if (!(n > 1)) return positions;
let index = d3.range(positions.length);
for (let iter = 0; iter < maxiter; ++iter) {
index.sort((i, j) => d3.ascending(positions[i], positions[j]));
let error = 0;
for (let i = 1; i < n; ++i) {
let delta = positions[index[i]] - positions[index[i - 1]];
if (delta < separation) {
delta = (separation - delta) / 2;
error = Math.max(error, delta);
positions[index[i - 1]] -= delta;
positions[index[i]] += delta;
}
}
if (error < maxerror) break;
}
return positions;
}
line = d3.line()
.x((d, i) => x(i))
.y(y)
x = d3.scalePoint()
.domain(d3.range(n))
.range([params.margin.left, params.svg.width - params.margin.right])
.padding(0.5)
y = d3.scaleLinear()
.domain(d3.extent(rankedData.flatMap(d => d.visitsRanked)))
.range([params.margin.top, params.svg.height - params.margin.bottom])
lineLog = d3.line()
.x((d, i) => x(i))
.y(yLog)
yLog = d3.scaleLog()
.domain(d3.extent(data.flatMap(d => d.visits)))
.range([params.svg.height - params.margin.bottom, params.margin.top])
format = number => d3.format("d")(number)
rankedData = {
const rowConversionFunction = ({
"Name": name,
"Visits": visits
}) => ({
name,
visits: +visits
});
const data5Jul = await d3.tsvParse(tsv5Jul, rowConversionFunction);
const data25Jul = await d3.tsvParse(tsv25Jul, rowConversionFunction);
let dataObjectTarget = [];
data25Jul.forEach(after => {
if (data5Jul.some(before => before.name === after.name)) {
dataObjectTarget.push({
name: after.name,
visits: [data5Jul.find(before => before.name === after.name).visits, after.visits]
})
}
});
const before = dataObjectTarget.map(d => d.visits[0]);
const after = dataObjectTarget.map(d => d.visits[1]);
const sortedBefore = before.slice().sort((a, b) => b - a);
const ranksBefore = before.map(v => sortedBefore.indexOf(v) + 1);
const sortedAfter = after.slice().sort((a, b) => b - a);
const ranksAfter = after.map(v => sortedAfter.indexOf(v) + 1);
dataObjectTarget = dataObjectTarget.map((d, i) => {
d.visitsRanked = [ranksBefore[i], ranksAfter[i]]
return d;
});
const extraPropertiesSource = {
columns: ["5 July 2020", "25 July 2020"],
xAxisLabel: "Time",
yAxisLabel: "Rank by visit",
observation: "",
title: "Neko Atsume cat visit rankings",
};
return Object.assign(dataObjectTarget, extraPropertiesSource);
}
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.
