Published
Edited
Jan 29, 2021
1 fork
5 stars
md`# Trellis - Static Graph Example`
container = html`<div/>`
layout({ nodes: nodes, edges: edges }).then(({ nodes, edges }) => {
const { x, y, zoom } = trellis.boundsToViewport(
trellis.getSelectionBounds(nodes, 40),
{ width: width, height: 600 }
)
const options = {
x,
y,
zoom,
width: width,
height: 600,
}
render({ nodes, edges, options })
})
render = {
const render = trellis.renderers.WebGL.Renderer({ container })
invalidation.then(() => render.delete())
return render
}
layout = trellis.layout.Force.Layout()
edges = {
const edges = [
{
"source":"greg.piper@enron.com",
"target":"louise.kitchen@enron.com",
"subject":"RE: Confusion Around Treasury Workstation",
"timestamp":1010591818000
},
{
"source":"greg.piper@enron.com",
"target":"sally.beck@enron.com",
"subject":"Management Team Changes",
"timestamp":987618000000
},
{
"source":"greg.piper@enron.com",
"target":"rosalee.fleming@enron.com",
"subject":"FW: Enron Management Committee Extended Meeting",
"timestamp":1011741746000
},
{
"source":"greg.piper@enron.com",
"target":"john.lavorato@enron.com",
"subject":"FW: Move to Enron Center south",
"timestamp":1005345493000
},
{
"source":"greg.piper@enron.com",
"target":"kenneth.lay@enron.com",
"subject":"Associate/Analyst Program",
"timestamp":998591065000
},
{
"source":"greg.piper@enron.com",
"target":"mark.frevert@enron.com",
"subject":"PRC Process - Confidentiality",
"timestamp":994973352000
},
{
"source":"greg.piper@enron.com",
"target":"mike.mcconnell@enron.com",
"subject":"eCommerce Commercial & Origination List",
"timestamp":962983440000
},
{
"source":"greg.piper@enron.com",
"target":"jim.fallon@enron.com",
"subject":"Post Petition Organization",
"timestamp":1007914815000
},
{
"source":"greg.piper@enron.com",
"target":"jeff.skilling@enron.com",
"subject":"",
"timestamp":987736680000
},
{
"source":"greg.piper@enron.com",
"target":"greg.whalley@enron.com",
"subject":"RE:",
"timestamp":977130480000
},
{
"source":"greg.piper@enron.com",
"target":"john.sherriff@enron.com",
"subject":"Transatlantic meetings",
"timestamp":994686180000
},
{
"source":"greg.piper@enron.com",
"target":"raymond.bowen@enron.com",
"subject":"New Cash Conrol Process - 2:00 pm Meeting, December 5, 2001 in the 50th floor Board Room",
"timestamp":1007569737000
},
{
"source":"greg.piper@enron.com",
"target":"rick.buy@enron.com",
"subject":"RE: Books",
"timestamp":996765405000
},
{
"source":"greg.piper@enron.com",
"target":"jeffrey.mcmahon@enron.com",
"subject":"FW: Revised Draft of the Assignment and License Agreement",
"timestamp":1008360492000
},
{
"source":"greg.piper@enron.com",
"target":"sherri.sera@enron.com",
"subject":"MD PRC Committee",
"timestamp":993605580000
},
{
"source":"greg.piper@enron.com",
"target":"rebecca.carter@enron.com",
"subject":"Enron Corp. Board of Directors Meeting - October 9, 2001",
"timestamp":1000926785000
},
{
"source":"greg.piper@enron.com",
"target":"billy.lemmons@enron.com",
"subject":"Full-Time Analyst Orientation - Happy Hour",
"timestamp":995045379000
},
{
"source":"greg.piper@enron.com",
"target":"e..haedicke@enron.com",
"subject":"RE: Voice Mail Retention",
"timestamp":999123123000
},
{
"source":"greg.piper@enron.com",
"target":"sharron.westbrook@enron.com",
"subject":"Europe Budget Review",
"timestamp":1004107832000
},
{
"source":"greg.piper@enron.com",
"target":"joannie.williamson@enron.com",
"subject":"Jeff Skilling",
"timestamp":990620760000
},
{
"source":"greg.piper@enron.com",
"target":"nicki.daw@enron.com",
"subject":"December 11, 2000 EWS PRC Meeting",
"timestamp":976186620000
},
{
"source":"greg.piper@enron.com",
"target":"karen.denne@enron.com",
"subject":"Final Communication Materials",
"timestamp":1005347164000
},
{
"source":"greg.piper@enron.com",
"target":"david.delainey@enron.com",
"subject":"",
"timestamp":980532900000
},
{
"source":"greg.piper@enron.com",
"target":"paula.rieker@enron.com",
"subject":"FW: Board of Directors Meeting - February 12, 2001",
"timestamp":1011135388000
},
{
"source":"greg.piper@enron.com",
"target":"david.oxley@enron.com",
"subject":"EWS OTC Discussions on individual BU MD and VP relative contributions for first 6 months of 2001",
"timestamp":993588300000
},
{
"source":"greg.piper@enron.com",
"target":"richard.causey@enron.com",
"subject":"University of Texas McCombs School of Business",
"timestamp":982339800000
},
{
"source":"greg.piper@enron.com",
"target":"dan.leff@enron.com",
"subject":"PROPOSED RETENTION PLAN: IMMEDIATE ACTION REQUIRED: NOTE FROM JANET DIETRICH & DAN LEFF",
"timestamp":1011897338000
},
{
"source":"john.sherriff@enron.com",
"target":"steven.kean@enron.com",
"subject":"Re: Draft Organizational Announcement about Japan",
"timestamp":988097640000
},
{
"source":"j..kean@enron.com",
"target":"richard.causey@enron.com",
"subject":"RE: Possible press release before market open on 11/20/01",
"timestamp":1006314519000
},
{
"source":"j..kean@enron.com",
"target":"maureen.mcvicker@enron.com",
"subject":"FW: Attached",
"timestamp":999297877000
},
{
"source":"j..kean@enron.com",
"target":"james.derrick@enron.com",
"subject":"FW: one more impt name",
"timestamp":1007733009000
},
{
"source":"j..kean@enron.com",
"target":"richard.shapiro@enron.com",
"subject":"Dynegy/Enron Point of Contact",
"timestamp":1005755431000
},
{
"source":"j..kean@enron.com",
"target":"pr <.palmer@enron.com>",
"subject":"FW: Management Committee Survey",
"timestamp":999809278000
},
{
"source":"j..kean@enron.com",
"target":"mark.koenig@enron.com",
"subject":"FW: DJ Concerned Energy Cos Make Few Changes In Enron Dealings",
"timestamp":1004035227000
},
{
"source":"j..kean@enron.com",
"target":"stanley.horton@enron.com",
"subject":"DRAFT - EGS ORGANIZATION CHANGES MEMORANDUM AND ORG CHART",
"timestamp":1001017513000
},
{
"source":"j..kean@enron.com",
"target":"a..shankman@enron.com",
"subject":"",
"timestamp":1005928159000
},
{
"source":"j..kean@enron.com",
"target":"cindy.olson@enron.com",
"subject":"RE:",
"timestamp":1006203351000
},
{
"source":"j..kean@enron.com",
"target":"janet.dietrich@enron.com",
"subject":"Lay It On the Line Survey Results",
"timestamp":1002115901000
},
{
"source":"j..kean@enron.com",
"target":"rex.rogers@enron.com",
"subject":"FW: Enron Capital Trust I (12b) and Enron Capital Trust II (12b)",
"timestamp":1005831878000
}
]
return edges.map((edge) => ({ id: `${edge.source}::${edge.target}`, source: edge.source, target: edge.target, label: edge.subject }))
}
color = {
const categoricalScale = scale.scaleOrdinal(chromatic.schemeTableau10)
return (x) => categoricalScale(Math.min(10, x))
}
styleNode = (group) => ({
color: color(group),
labelSize: 10,
labelWordWrap: 260,
stroke: [{ color: '#FFF', width: 2 }, { color: color(group), width: 1 }],
icon: { type: 'textIcon', family: 'Material Icons', text: 'person', color: '#fff', size: 21 },
badge: [{
position: 45,
color: color(group),
stroke: '#FFF',
icon: {
type: 'textIcon',
family: 'Helvetica',
size: 10,
color: '#FFF',
text: '8',
}
}],
})
trellis = require('@sayari/trellis@0.3.0-rc.0/index.umd.min.js')
chromatic = require('d3-scale-chromatic')
scale = require('d3-scale')
font = html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
md`Based on https://observablehq.com/@jameslaneconkling/trellis#trellis`
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.
