Lic. en Ciencias de la Computación, DC, FCEyN, UBA.
Profesor Asociado en el ITBA.
Public
Edited
Jan 24
1 fork
Importers
1 star
// color = d3.scaleSequential(d3.interpolateBlues)
most_popular
Type Table, then Shift-Enter. Ctrl-space for more options.
// top10.mens
BumpChart(test_data, {
x: "fecha",
y: "pos",
z: "title",
interval: "week",
reverse: false,
title: "test",
width
})
//
// https://github.com/observablehq/framework/blob/main/examples/chess/src/components/BumpChart.js
//
function BumpChart(
data,
{
x = "month",
y = "rating",
z = "name",
interval = "month",
reverse = false,
title,
width
} = {}
) {
const rank = Plot.stackY2({ x, z, order: y, reverse: reverse });
const [xmin, xmax] = d3.extent(Plot.valueof(data, x));
return Plot.plot({
width,
title: title,
marginLeft: 70,
marginRight: 70,
x: {
[width < 480 ? "insetRight" : "inset"]: 120,
label: null,
grid: true
},
y: {
axis: null,
inset: 20,
reverse: true
},
color: {
scheme: "spectral"
},
marks: [
Plot.lineY(
data,
Plot.binX(
{ x: "first", y: "first", filter: null },
{
...rank,
stroke: z,
strokeWidth: 24,
curve: "bump-x",
sort: { color: "y", reduce: "first" },
interval,
render: halo({
stroke: "var(--theme-background-alt)",
strokeWidth: 27
})
}
)
),
Plot.text(data, {
...rank,
text: rank.y,
fill: "black",
stroke: z,
channels: {
[y]: y,
"title\0": (d) => d.title
// "title\0": (d) => formatTitle(d.title)
// federation: "federation",
// born: (d) => String(d.born)
},
tip: { format: { y: null, text: null } }
}),
width < 480
? null
: Plot.text(data, {
...rank,
filter: (d) => d[x] <= xmin,
text: z,
dx: -20,
textAnchor: "end"
}),
Plot.text(data, {
...rank,
filter: (d) => d[x] >= xmax,
text: z,
dx: 20,
textAnchor: "start"
})
]
});
}
//
// https://github.com/observablehq/framework/blob/main/examples/chess/src/components/BumpChart.js
//
function halo({stroke = "currentColor", strokeWidth = 3} = {}) {
return (index, scales, values, dimensions, context, next) => {
const g = next(index, scales, values, dimensions, context);
for (const path of [...g.childNodes]) {
const clone = path.cloneNode(true);
clone.setAttribute("stroke", stroke);
clone.setAttribute("stroke-width", strokeWidth);
path.parentNode.insertBefore(clone, path);
}
return g;
};
}
// function formatTitle(title) {return title === "GM" ? "Grand Master" : title;}
// d3.json("https://observablehq.observablehq.cloud/framework-example-chess/_file/data/top-ranked-players.4158a567.json")
// top10 = d3.json("https://cors-anywhere.herokuapp.com/https://observablehq.observablehq.cloud/framework-example-chess/_file/data/top-ranked-players.4158a567.json",d3.autoType)
// BumpChart(top10.mens.map((d) => ({ ...d, month: new Date(d.month) })),{ y: "rating", width, reverse: true })
// BumpChart(top10.womens.map((d) => ({ ...d, month: new Date(d.month) })),{ width })
m = require("moment")
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.
