Published
Edited
Dec 22, 2021
nodes = Files.text(nodes_data).then(t => d3.dsvFormat(',').parse(t))
{
const colorScale = d3.scaleOrdinal(d3[schema])
// create the SVG container
let svg = d3.select(html`<svg></svg>`)
.attr('width', myWidth)
.attr('height', h);
// create a layer or group
let allNodes = svg.append('g')
.classed('allNodes',true)
let sc = 0;
let dc = 0;
let gNodes = allNodes.selectAll('.allNodes')
.data(nodes)
.enter()
.append('g')
.attr('class', d => 'n'+d.id)
.classed('lNode',true)
.attr("transform", (d) =>
"translate("
+ (d.category == 2 ? (d.cx=radius+wPad , radius+wPad): (d.cx= myWidth-radius*2-wPad,myWidth-radius*2-wPad))
+ ","
+ ( d.category == 2 ?
(sc+=1, d.cy = sc*(radius*2+hPad), sc*(radius*2+hPad) ):
(dc+=1, d.cy = dc*(radius*2+hPad), dc*(radius*2+hPad) )
)
+ ")"
);
let cNodes = gNodes
.append('rect')
.attr('rx',d => d.category == 2 ? radius: radius/5)
.attr('x',-radius)
.attr('y',-radius)
.attr('width',radius*2)
.attr('height',radius*2)
.attr('fill',(d,i) => d.category == 2 ? ( d.color=colorScale(i),colorScale(i) ) : 'lightgray')
.attr('fill-opacity',1)
.attr('stroke', d => d.category == 2 ? (d3.rgb(colorScale(d)).darker(1)): 'darkgray')
.attr('stroke-width',1)
let nodeText = gNodes.append('text')
.text(d => d.name.replace(/ /g, '\n'))
.attr('x',d => d.category == 2 ? -radius-5:radius+5)
.attr("text-anchor", d => d.category == 2 ? "end":"start") // text-align: right
.attr('alignment-baseline','middle')
let nodeLabel = gNodes.append('text')
.text(d => d.id)
.attr("text-anchor", "middle") // text-align: center
.attr('alignment-baseline','middle')
// console.log(nodes);
// console.log('edges',edges)
let allLinks = svg.append('g')
.classed('allEdges',true)
const nodDict = d3.nest()
.key(d => d.name)
.object(nodes)
//CURVED NODES inspired from: https://medium.com/codegg/loving-those-svg-curves-d0409473158c
function linkfn (link) {
let x1 = (nodDict[link.source][0]['cx']+radius)
let y1 = (nodDict[link.source][0]['cy'])
let x2 = (nodDict[link.target][0]['cx']-radius)
let y2 = (nodDict[link.target][0]['cy'])
return "M" + x1 + "," + y1 // start at the child node
+ "C" + (x1 + x2) / 2 + "," + y1 // pull the line a little leftward
+ " " + (x1 + x2) / 2 + "," + y2 // pull the line a little rigthward
+ " " + x2 + "," + y2; // end at the parent node
}
let gLinks = allLinks.selectAll('.allEdges')
.data(edges)
.enter()
.append('g')
.classed('link',true)
.append('path')
.attr( 'd', d => linkfn(d)) //archi curvi tipo network
//describe stroke
.attr('stroke', d => nodDict[d.source][0]['color'] )
// .attr('stroke', '#999')
.attr('stroke-opacity', 0.6)
.attr('stroke-width',3)
.attr('fill', 'none')
return svg.node();
}
import {slider} from "@jashkenas/inputs"
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.
