Published
Edited
Jul 26, 2020
2 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(data.flatMap(d => d.visits)))
.range([params.svg.height - params.margin.bottom, params.margin.top])
formatNumber = y.tickFormat(100)
mutable params = {
let output = {};
output["svg"] = {
"width": 954,
"height": 768
};
output["margin"] = {
"top": 72,
"right": 24,
"bottom": 72,
"left": 24
};
output["padding"] = {
"top": 4,
"right": 12,
"bottom": 4,
"left": 12
};
output["plot"] = {
"x": output["margin"]["left"],
"y": output["margin"]["top"],
"width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"],
"height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"]
};
return output;
}
data = {
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]
})
}
});
dataObjectTarget = dataObjectTarget.sort((a, b) => {
return b.visits[1] - a.visits[1];
}).slice(0,5);
// dataObjectTarget = dataObjectTarget.sort((a, b) => {
// return b.visits[1] - a.visits[1];
// }).slice(-5);
const extraPropertiesSource = {
columns: ["5 July 2020", "25 July 2020"],
xAxisLabel: "Time",
yAxisLabel: "Visits",
observation: "",
title: "Neko Atsume cat visits",
};
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.
