{ const svg = d3
.create('svg')
.attr("viewBox", [0, -25, width, 50])
.attr("cursor", "ew-resize"),
shift = ms.minute * TS / zoom,
gen = xGen(dateCursor - ms.day * 4, ms.day * 4),
axis = timelineDouble(),
node = svg.node()
svg.call(
domainZoom()
.x(gen)
.axisX(axis)
.link((context, scaleX) => {
//dateCursor.setTime((scaleX.domain()[0].getTime()+scaleX.domain()[1].getTime())/2)
//console.log(dateCursor)
})
)
svg.append("line")
.attr('x1', width/2)
.attr('x2', width/2)
.attr('y2', -width)
.attr('y1', width)
.attr('style', "stroke-width:1;stroke:rgb(255,0,0)")
return node
}
draw = scope => {
const domEl = document.createElement('div'),
draw2d = () => {
const svgWrapper = document.createElement('div')
const svg = d3.select(svgWrapper)
.style('text-align', 'center')
.append('svg')
.attr('width', canvasSize)
.attr('height', canvasSize)
.attr('viewBox', `${-canvasSize / 2} ${-canvasSize / 2} ${canvasSize} ${canvasSize}`)
const axisEl = svg
.append('g')
.attr('id', 'spiral-axis')
.classed('axis', true);
axisEl.call(spiralAxis);
chartDrawer(d3SVGDrawer(svg))
return svgWrapper
},
draw3d = () => {
const N = 100;
const gData = {
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
};
const Graph = ForceGraph3D()(canvas3DWrapper)
.width(canvasSize)
.height(canvasSize)
.graphData(gData)
//Graph.onEngineStop(() => Graph.zoomToFit(430));
const scene = Graph.scene()
chartDrawer(threeDrawer(scene))
return canvas3DWrapper
}
domEl.style = 'display: flex'
show.includes('2D') && domEl.appendChild(draw2d())
show.includes('3D') && domEl.appendChild(draw3d())
return domEl
}
chartDrawer = (drawer) => {
const drawStage = drawer.drawRing
drawStage(1, w)
//drawStage(.75, w)
//drawStage(.5, w)
drawStage(.25, w)
}
d3SVGDrawer = (svg) => ({
drawRing(scale=1,width=1){
svg.append('g')
.append('circle')
.attr('fill', 'transparent')
.attr('stroke', 'red')
.attr('stroke-width', width / 2 )
.attr('r', scale * (canvasSize / 2) - width / 4)
}
})
threeDrawer = (scene) => ({
drawRing(scale = 1, width = 1) {
const geometry = new THREE.RingGeometry( canvasSize*scale, canvasSize*scale+width, 180 );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
const mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
}
})
timelinePlus = scale =>
grouping()
.child("root", rootLabel(scale))
.child("top", timelineTop(scale).MF(majorMF))
.child(
"bottom",
timelineBottom(scale)
.MF(minorMF)
.fontPx(15)
)
.child("grid", grid(scale).MF(majorMF))
.method(
"scale",
(c, v) => (
c.grid.scale(v), c.top.scale(v), c.bottom.scale(v), c.root.scale(v)
)
)
import {timelineTop, timelineBottom, timelineDouble, grouping, grid, diff, ms, defaultMF, rootMF, minorMF, majorMF, formatLibrary, selectFormatBySpan} from "@notanaccent/timeline"
ForceGraph3D= require("3d-force-graph")
ForceGraph = require("force-graph")
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
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.
