chart = {
// Set initial position of nodes
nodes.forEach(function(d) {
d.radius = rScale(d[scaleVar]);
});
const simulation = d3.forceSimulation();
simulation.nodes(nodes);
simulation
.force("link", d3.forceLink(links).id(d => d.GEOID))
.force("charge", d3.forceManyBody().strength(-30))
// .force('y', d3.forceY().y(function(d) { return latScale(d['LAT'])}))
// .force('x', d3.forceX().x(function(d) { return lonScale(d['LON'])}))
.force('x', d3.forceX().x(function(d) { return projection([d['LON'],d['LAT']])[0] }).strength(0.5))
.force('y', d3.forceY().y(function(d) { return projection([d['LON'],d['LAT']])[1] }).strength(0.5))
//.force("center", d3.forceCenter(width / 2, height / 2))
.force('collide', d3.forceCollide().radius(function(d) { return d.radius + 4}));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const link = svg.append("g")
.attr("stroke", "#EEE")
.attr("stroke-width", 1.5)
.selectAll("line")
.data(links)
.join("line");
const grid = svg.append("g")
.attr("class", "grid")
.selectAll('.grid-point')
.data(nodesGeoJson.features)
.join("g")
.attr("class", "grid-point")
.attr('transform', function(d) {
return 'translate(' + projection(d.coordinates)[0] + ',' + projection(d.coordinates)[1] + ')';
})
grid.append('circle')
.attr('fill', "#efefef")
.attr("r", 2)
const node = svg.append("g")
.attr("class", "nodes")
.selectAll('.node')
.data(nodes)
.join("g")
.attr("class", "node")
.attr('transform', function(d) {
return 'translate(' + projection([d['LON'],d['LAT']])[0] + ',' + projection([d['LON'],d['LAT']])[1] + ')'
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
node.append('circle')
.attr("class", function(d) {
return "bubble"; // + d.type
})
.attr('fill', "#ccc")
.attr("r", function(d){ return d.radius; });
node.append('text')
.attr("class", 'label')
.attr('dy', '.35em')
.attr("text-anchor", "middle")
.text(function(d) { return d.STUSPS })
.attr('fill', "#555")
.attr('font-size', "10px")
.attr('font-family', "Arial, sans-serif")
.attr('font-weight', "600");
simulation.on("tick", () => {
node
.attr('transform', function(d) {
d.x = Math.max(d.radius, Math.min((width - margin.right - margin.left) - d.radius, d.x));
d.y = Math.max(d.radius, Math.min((height - margin.top - margin.bottom) - d.radius, d.y));
return `translate(${d.x},${d.y})`
});
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);
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return svg.node();
}
latExt = d3.extent(nodes, function(d) { return d['LAT']; });
lonExt = d3.extent(nodes, function(d) { return d['LON']; });
rScale = d3.scaleSqrt()
.domain(d3.extent(nodes, function(d) { return d[scaleVar]; }))
.range([0, maxBubbleSize]);
scaleVar = 'ALAND';
margin = ({top: 20, right: 20, bottom: 20, left: 20})
height = 500
// Future improvement: incorporate projection to for plotting points
path = d3.geoPath().projection(projection)
projection([-119.611119733214, 37.2422147173351])
projection = d3.geoAlbersUsa().scale(900).translate([width/2, height/2])
//.scale(1300).translate([width/2, height/2])
//.fitSize([width, height], nodesGeoJson)
import {geoAlbersUsaPr} from "@d3/u-s-map-with-puerto-rico"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
links = d3.tsvParse(await FileAttachment("cb_2019-us-state-links.tsv").text())
nodes = d3.tsvParse(await FileAttachment("cb-2019-us-states-centroids.tsv").text(), d3.autoType)
// nodes = d3.tsvParse(await FileAttachment("cb-2019-usa-centroids.tsv").text(), d3.autoType)
// includes Puerto Rico but the current albersUSA
d3 = require("d3@5")
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.
