Public
Edited
Dec 3, 2020
md`# 📑 Exploration of Graphs`
edges=[{from:'♔',to:'♕'},{from:'♔',to:'♖'},{from:'♔',to:'♗'},{from:'♔',to:'♘'},
{from:'♕',to:'♘'},{from:'♖',to:'♘'},{from:'♖',to:'♚'},{from:'♖',to:'♛'},
{from:'♗',to:'♖'},{from:'♗',to:'♚'},{from:'♘',to:'♛'},{from:'♚',to:'♛'},
{from:'♛',to:'♜'},{from:'♛',to:'♝'},{from:'♜',to:'♝'},{from:'♜',to:'♞'}]
{const height=Math.min(400,width*.5);
const svg=d3.create('svg').attr('viewBox',[0,0,width,height]),
link=svg.selectAll('.link').data(graph.links)
.join('line').classed('link',true),
node=svg.selectAll('.node').data(graph.nodes)
.join('circle').attr('r',10).classed('node',true)
.classed('fixed',d=>d.fx!==undefined);
yield svg.node();
const center=d3.forceCenter(width/2,height/2);
const simulation=d3.forceSimulation().nodes(graph.nodes)
.force('charge',d3.forceManyBody())
.force('center',center)
.force('link',d3.forceLink(graph.links))
.on('tick',tick);
const drag=d3.drag().on('start',dragstart)
.on('drag',dragged);
node.call(drag).on('click',click);
function tick() {
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);
node.attr('cx',d=>d.x).attr('cy',d=>d.y);}
function click(event,d) {
delete d.fx; delete d.fy;
d3.select(this).classed('fixed',false);
simulation.alpha(1).restart();}
function dragstart() {
d3.select(this).classed('fixed',true);}
function dragged(event,d) {
d.fx=clamp(event.x,0,width);
d.fy=clamp(event.y,0,height);
simulation.alpha(1).restart();} }
function clamp(x,lo,hi) {return x<lo?lo:x>hi?hi:x;}
graph=({
nodes:Array.from({length:12},()=>({})),
links:[{source:0,target:1},
{source:1,target:2},{source:1,target:3},
{source:2,target:5},
{source:3,target:4},{source:3,target:10},
{source:4,target:5},
{source:5,target:6},{source:5,target:7},
{source:6,target:7},{source:6,target:9},
{source:7,target:8},
{source:9,target:4},{source:9,target:10},
{source:10,target:11}]})
names=([...'abcdefghijkl'])
graph.nodes.map((item,i)=>item.name=names[i])
html`<style>
.link {stroke:silver; stroke-width:2px;}
.node {cursor:move; fill:steelblue;
stroke:silver; stroke-width:2px;}
.node.fixed {fill:#ff355e;}
</style>`
d3=require('d3@6')
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.
