Master Media Design Student at HEAD Geneva
alphaForum = hfParseProcessingFile('alpha-forum-data.csv.zip')
alphaForum
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
//title: "Contribution ranges of top contibutors",
color: {legend: true},
y: {
grid: true,
label: null,
tickSize: 0,
domain: topContributors
},
width: 1200,
marginLeft: 100,
marks: [
Plot.ruleY(alphaForumTable, Plot.groupY({x1: "min", x2: "max"}, {y:"author", x: "date"})),
Plot.dot(
alphaForumTable,
{x: "date", y: "author", r: 5, fill: 'forum', opacity: 0.3}),
Plot.tip(alphaForumTable, Plot.pointer({
x: "date",
y: "author",
title: (d) => `<b>${d.author}</b> – ${(new Date(d.date).toLocaleDateString())} <br><a href="${d.url}" target="_blank">${d.forum}/${d.topic}</a> <br><br> ${d.post}`,
render: (index, scales, values, dimensions, context, next) => {
const g = next(index, scales, values, dimensions, context);
const [i] = index;
if (i === undefined) return g;
const textElement = d3.select(g)
.select(`g[aria-label="tip"] text`);
// Get the bounding box of the text element
const bbox = textElement.node().getBBox();
textElement.html("");
/*
const text = d3.select(g)
.select(`g[aria-label="tip"] text`)
.html("")*/
const foreignObject = d3.select(g)
.select(`g[aria-label="tip"] g`)
.html("")
.append("foreignObject")
.attr("width", 200)
.attr("height", 200)
.style("background-color", "white")
.style("padding-top", "5px")
.style("border", "1px solid black");
// Select the inner <g> element that has the transform attribute
const innerG = d3.select(g).select('g');
// Get the transform attribute
const transformAttr = innerG.attr('transform');
// Extract the y translation value
const yTranslate = transformAttr.match(/translate\(\d+,\s*(\d+)\)/)[1];
if (yTranslate > (dimensions.height) / 2 + dimensions.marginBottom + dimensions.marginTop) {
foreignObject.style("y", "-200px")
}
const body = foreignObject.append("xhtml:body");
body.html(`${values.title[i]}`);
console.log(g);
return g;
}
}))
],
})
// custom tooltip from here
// https://observablehq.com/@mtsvelik/clickable-hyperlinks-in-plot-tip
import {hfParseProcessingFile} from "@tiborudvari/hf-utils"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.