Published
Edited
Aug 17, 2020
chart = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links)
.id(d => d.id))
.force("charge", d3.forceManyBody())
.force("radial", d3.forceRadial(300, width/2, height/2).strength(1))
.force("center", d3.forceCenter(width / 2, height / 2));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", d => d.value * 20);
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", d => 10 + d.numberOfFactors)
.attr("fill", color)
.call(drag(simulation));
let radius = 900
let t=0
simulation.force('x', d3.forceX().x(function(d) {
return Math.round( 150 + Math.sin(d.id+t) * radius);
}))
.force('y', d3.forceY().y(function(d) {
return Math.round( 150 + Math.cos(d.id+t) * radius);
}))
simulation.on("tick", () => { t++
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);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
data = createDataSet(0, 9, false )
function drawArc() {
const dimensions = ({
height:500,
width:1900,
margin: {
top: 5,
right: 30,
bottom: 30,
left: 10,
}
})
const svg = d3.select("#chart")
.append("svg")
.attr("width", dimensions.width + dimensions.margin.left)
.attr("height", dimensions.height);
const allNodes = data.nodes.map(function(d){return d.title})
const x = d3.scalePoint()
.range([10, 850])
.domain(allNodes)
svg.selectAll("mylabels")
.data(data.nodes)
.enter()
.append("text")
.attr("x", function(d){ return(x(d.title))})
.attr("y", dimensions.height-5)
.text(function(d){ return(d.title)})
.style("text-anchor", "middle")
const idToNode = {};
data.nodes.forEach(function (n) {
idToNode[n.id] = n;
});
let start
let end
svg.selectAll('mylinks')
.data(data.links)
.enter()
.append('path')
.attr('d', function (d) {
start = x(idToNode[d.source].title)
end = x(idToNode[d.target].title)
return ['M', start, dimensions.height-30,
'A',
(start - end)/2, ',',
(start - end)/2, 0, 0, ',',
start < end ? 1 : 0, end, ',', dimensions.height-30]
.join(' ');
})
.style("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", function (d) { return d.value*20; })
svg.selectAll("mynodes")
.data(data.nodes)
.enter()
.append("circle")
.attr("cx", function(d){ return(x(d.title))})
.attr("cy", dimensions.height-30)
.attr("r", 8)
.style("fill", "#69b3a2")
}
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.
