Published
Edited
Jun 6, 2020
1 fork
2 stars
file = FileAttachment('schema-types.csv')
csv = d3.csvParse(await file.text())
typeRows = csv.filter(rowIsType)
uriIndex = typeRows.reduce(uriIndexReducer, {})
nodes = typeRows.map(nodesMapper)
links = typeRows.reduce(linksReducer, [])
depths = {
const v = nodes.map(() => 0)
yield v
await Promises.delay(1000)
markDepth([nodes[uriIndex['http://schema.org/Thing']]], 0, v)
yield v
}
color = d3.scaleSequential([5, 0], d3.interpolateViridis)
getNodeSize = d => 4 + (d.numParents < 2 ? 0 : d.numParents * 2)
samplePaths = getAncestryPaths(uriIndex['http://schema.org/TVSeries'])
samplePathLabels = pathsToLabels(samplePaths)
sampleAncestors = pathsToAncestorSet(samplePaths)
pathsToLabels = paths => paths
.map(row => row
.map(n => typeRows[n].label)
.reverse())
pathsToAncestorSet = paths => new Set(paths.reduce((acc, path) => ([...acc, ...path]), []))
getAncestryPaths = n => {
const expandPaths = (n, paths) => {
const nextPaths = paths.map(path => [...path, n])
const parents = findParents(n)
return parents.length > 0 ?
parents.reduce((acc, parent) => ([...acc, ...expandPaths(parent, nextPaths)]), []) :
nextPaths
}
const paths = [[n]]
return findParents(n).reduce((acc, parent) => ([...acc, ...expandPaths(parent, paths)]), [])
}
findParents = n => links.filter(l => l.target.id === n).map(l => l.source.id)
function markDepth(ns, d, value) {
const children = []
for(let i = 0; i < ns.length; i++){
const nn = ns[i]
value[nn.id] = d
children.push(...findSubTypes(nn))
}
if(children.length) markDepth(children, d + 1, value)
}
findSubTypes = node => links.filter(l => l.source === node).map(l => l.target)
updateNode = node => node.attr('transform', d => `translate(${d.x}, ${d.y})`)
updateLink = link => link
.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y)
drag = simulation => {
function dragStart(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart()
d.fx = d.x
d.fy = d.y
}
function dragMove(d) {
d.fx = d3.event.x
d.fy = d3.event.y
}
function dragEnd(d) {
if (!d3.event.active) simulation.alphaTarget(0)
d.fx = null
d.fy = null
}
return d3.drag()
.on('start', dragStart)
.on('drag', dragMove)
.on('end', dragEnd)
}
nodesMapper = ({id, label, subTypeOf}) => ({
id: uriIndex[id],
label,
x: Math.random() * width,
y: Math.random() * height,
numParents: subTypeOf.split(',').length,
})
linksReducer = (acc, row, i) => ([
...acc,
...(row.subTypes.split(',')
.map(uri => {
const target = uriIndex[uri.trim()]
return target ? {
source: i,
target,
} : undefined
})
.filter(i => i !== undefined)
)
])
typeIndexReducer = (acc, row, i) => ({...acc, [row.label]: i})
uriIndexReducer = (acc, row, i) => ({...acc, [row.id]: i})
rowIsType = row => !row.comment.startsWith('Data type') && (row.subTypeOf !== '' || row.subTypes !== '')
d3 = require('d3')
width = 800
height = 900
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.
