regions = ['Northeast', 'Midwest', 'South', 'West']
matrix = [
// To NE To MW To S To W
[0, 79000, 412000, 104000], // From northeast
[54000, 0, 356000, 146000], // From midwest
[122000, 276000, 0, 317000], // From south
[68000, 162000, 459000, 0] // From west
]
chord = d3.chordDirected()
.sortGroups(d3.ascending)
.padAngle(0.1)
data = chord(matrix)
data.groups
outerRadius = 275
innerRadius = outerRadius - 10
nodePath = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
nodePath(data.groups[0])
labelArc = d3.arc()
.innerRadius(outerRadius + 20)
.outerRadius(outerRadius + 20)
edgePath = d3.ribbonArrow()
.radius(innerRadius)
edgePath(data[0])
regionColor = d3.scaleOrdinal()
.domain(regions)
.range(d3.schemeCategory10)
{
// set up
const margin = { top: 25, bottom: 25, left: 50, right : 75 };
const svg = d3.create('svg')
.attr('width', outerRadius * 2 + margin.left + margin.right)
.attr('height', outerRadius * 2 + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`)
.append('g')
// have 0,0 be at the center of the circle
.attr('transform', `translate(${outerRadius},${outerRadius})`);
// Task 1
const nodesGroup = g.append('g');
// Task 2
const edgesGroup = g.append('g');
// Add labels for the nodes.
nodesGroup.selectAll('text')
.data(data.groups)
.join('text')
.attr('font-size', 11)
.attr('font-family', 'sans-serif')
.attr('transform', d => `translate(${labelArc.centroid(d)})`)
.attr('text-anchor', d => {
const [x, y] = labelArc.centroid(d);
return x > 0 ? 'start' : 'end';
})
.text(d => regions[d.index])
return svg.node();
}
x = null
y = null
populationColor = null
legend({ color: populationColor, title: 'Population Flow, 2017-2018'})
{
// margin convention
const margin = {top: 40, right: 0, bottom: 0, left: 60};
const svg = d3.create('svg')
.attr('width', matrixWidth + margin.left + margin.right)
.attr('height', matrixHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// create and add axes
const xAxis = d3.axisTop(x).tickSize(0);
g.append("g")
.call(xAxis)
.call(g => g.selectAll(".domain").remove())
.append("text")
.attr("x", matrixWidth / 2)
.attr("y", -margin.top + 5)
.attr("fill", "black")
.attr("text-anchor", "middle")
.attr("dominant-baseline", "hanging")
.text("Target");
const yAxis = d3.axisLeft(y).tickSize(0);
g.append("g")
.call(yAxis)
.call(g => g.selectAll(".domain").remove())
.append("text")
.attr("x", -margin.left)
.attr("y", matrixHeight / 2)
.attr("fill", "black")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "start")
.text("Source");
// draw the squares
return svg.node();
}
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.
