A ♥ for data visualization + interaction
function generateTechnologyBadges(ts) {
const technologies = document.createElement('div');
technologies.classList.add("technologies");
ts.forEach(t => {
const technology = document.createElement('div');
technology.innerHTML = t;
const technologyKey = technologyLabelToKey(t);
technology.classList.add("technology", technologyKey);
for (let prop in stylesPerTechnology[technologyKey] || {}) {
technology.style[prop] = stylesPerTechnology[technologyKey][prop];
}
technologies.appendChild(technology);
});
return technologies;
}
generateTechnologyCells()
function generateTechnologyCells() {
return Plot.plot({
width: contentWidth,
marginLeft: 0,
x: {
label: null
},
color: {
scheme: "ylgnbu",
domain: [10, 0.5]
},
marks: [
Plot.cell(technologies, {
x: "technology",
fill: "count",
// sort: {x: "fill", reverse: true}
}),
Plot.text(technologies, {
x: "technology",
text: "count",
stroke: "white",
fill: "black",
fontSize: 14,
fontWeight: "lighter"
})
]
});
}
generateTechnologyOverview()
function generateTechnologyOverview() {
return Plot.plot({
grid: true,
marginLeft: 100,
width: contentWidth,
x: {
axis: "top",
label: "Technologies used"
},
y: {
label: "Projects"
},
marks: [
Plot.dot(technologiesPerProjectTuples, {
x: "technology",
y: "project",
sort: true,
r: 7,
fill: d => fillByTechnologyStyle(d)
})
]
});
}
function generateStackedTechnologies(alignment = "top") {
return Plot.plot({
height: 220,
marginLeft: 20,
width: contentWidth,
y: {
grid: true,
ticks: d3.max(Array.from(technologyCounts.values())),
tickFormat: Math.abs,
},
marks: [
Plot.dot(technologiesPerProjectTuples, Plot.stackY2({
x: "technology",
y: d => d.isUsed ? alignment === "top" ? -1 : 1 : 0,
r: 7,
fill: fillByTechnologyStyle
})),
Plot.axisX({anchor: alignment, label: "Technologies"}),
]
});
}
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.
