Published unlisted
Edited
Dec 16, 2021
slopecolor = d3
.scaleOrdinal()
.domain(["Higher on CoinDesk Ranking", "Lower on CoinDesk Ranking"])
.range(["#00D964", "#FF0000"])
.unknown("#ccc")
data = {
const data = d3.csvParseRows(
await FileAttachment("New_Slope_chart@6.csv").text()
);
return Object.assign(
data.slice(1).map(([name, delta, id, abbr, ...values]) => ({
name,
values: values.map((x) => +x),
abbr,
delta: parseFloat(delta),
id: parseInt(id)
})),
{
columns: data[0].slice(4)
}
);
}
function dodge(positions, separation = 10, 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;
}
n = data.columns.length
function halo(text) {
text
.clone(true)
.each(function () {
this.parentNode.insertBefore(this, this.previousSibling);
})
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 4)
.attr("stroke-linejoin", "round");
}
line = d3.line()
.x((d, i) => x(i))
.y(y)
x = d3.scalePoint()
.domain(d3.range(n))
.range([margin.left, width - margin.right])
.padding(0.5)
y = d3
.scaleLinear()
.domain(d3.extent(data.flatMap((d) => d.values)).reverse())
.range([height - margin.bottom, margin.top])
formatNumber = d3.format("~s")
height = 2200
margin = ({
top: 40,
right: width > 500 ? 250 : 30,
bottom: 10,
left: width > 500 ? 250 : 30
})
padding = width > 500 ? 3 : 0
import {legend} from "@d3/color-legend"
d3 = require("d3@6")
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.
