Published
Edited
Jan 8, 2020
3 forks
15 stars
Insert cell
Insert cell
{
const boxHeight = 300;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);

let nodes = [];
nodes.push([width / 2, boxHeight / 1.5]);
nodes.push([width / 4, boxHeight / 3]);

// Append the nodes to the svg element
for (let i = 0; i < nodes.length; i++) {
svg
.append('circle')
.attr('cx', nodes[i][0])
.attr('cy', nodes[i][1])
.attr('r', 20)
.style('fill', 'green');
}

// Create a horizontal link from the first node to the second
const link = d3.linkHorizontal()({
source: nodes[0],
target: nodes[1]
});

// Append the link to the svg element
svg
.append('path')
.attr('d', link)
.attr('stroke', 'black')
.attr('fill', 'none');

return svg.node();
}
Insert cell
Insert cell
{
const boxHeight = 300;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);

let nodes = [];
nodes.push([width / 2, boxHeight / 1.5]);
nodes.push([width / 4, boxHeight / 3]);
nodes.push([width / 1.5, boxHeight / 3]);

for (let i = 0; i < nodes.length; i++) {
svg
.append('circle')
.attr('cx', nodes[i][0])
.attr('cy', nodes[i][1])
.attr('r', 20)
.style('fill', 'green');
}

let links = [];
// Link from the first node to the second
links.push(
d3.linkHorizontal()({
source: nodes[0],
target: nodes[1]
})
);

// Link from the first node to the third
links.push(
d3.linkHorizontal()({
source: nodes[0],
target: nodes[2]
})
);

// Append the links to the svg element
for (let i = 0; i < links.length; i++) {
svg
.append('path')
.attr('d', links[i])
.attr('stroke', 'black')
.attr('fill', 'none');
}

return svg.node();
}
Insert cell
Insert cell
{
const boxHeight = 300;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);

let nodes = [];
nodes.push([width / 2, boxHeight / 1.5]);
nodes.push([width / 4, boxHeight / 3]);
nodes.push([width / 1.5, boxHeight / 3]);

for (let i = 0; i < nodes.length; i++) {
svg
.append('circle')
.attr('cx', nodes[i][0])
.attr('cy', nodes[i][1])
.attr('r', 20)
.style('fill', 'green');
}

let links = [];
// Link from the first node to the second
links.push(
d3.linkVertical()({
source: nodes[0],
target: nodes[1]
})
);

// Link from the first node to the third
links.push(
d3.linkVertical()({
source: nodes[0],
target: nodes[2]
})
);

// Append the links to the svg element
for (let i = 0; i < links.length; i++) {
svg
.append('path')
.attr('d', links[i])
.attr('stroke', 'black')
.attr('fill', 'none');
}

return svg.node();
}
Insert cell
d3 = require('d3')
Insert cell

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.
Learn more