Software developer and power user
// see: https://observablehq.com/@observablehq/how-to-require-stubborn-modules
octicons = require('https://bundle.run/@primer/octicons@12.0')
octicons.alert
display = (octicons) =>
d3.create("table")
.call(addHead)
.call(addBody, Object.values(octicons))
.node();
d3 = require("d3-selection@2")
addHead = (table) => {
const head = table.append("thead")
const row = head.append("tr");
const columns = ["24px", "16px", "Name", "Keywords"];
columns.forEach(name => {
row.append("th")
.attr("scope", "col")
.text(name);
});
}
addBody = (table, icons) => {
const body = table.append("tbody");
icons.forEach(icon => addRow(body, icon));
}
addRow = (body, icon) =>
body.append("tr")
.call(addVariants, icon)
.call(addName, icon.name)
.call(addKeywords, icon.keywords)
addVariants = (row, icon) => [24, 16].forEach(height => addIcon(row, icon, height))
addIcon = (row, icon, height) => {
const cell = row.append("td");
if (icon.heights[height] !== undefined) {
const svg = icon.toSVG({height});
cell.html(svg);
}
}
addName = (row, name) => {
const cell = row.append("td");
cell.append("span")
.attr("class", "name")
.text(name);
}
addKeywords = (row, keywords) => row.append("td").text(keywords.join(", "))
symbolPropertyIsRedundant = {
const icons = Object.values(octicons);
const result = icons.filter(d => d.name !== d.symbol);
return result.length === 0;
}
html`<style>
table {
max-width: unset;
}
th,
td {
padding: 4px;
}
th:not(:last-child) {
width: 1%;
}
th:nth-child(1),
td:nth-child(1),
th:nth-child(2),
td:nth-child(2) {
text-align: center;
}
.octicon {
display: inline-block;
vertical-align: middle;
fill: currentColor;
}
.name {
white-space: nowrap;
}
</style>`
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.
