davo · January 9, 2025 23:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Dorling Cartogram</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.10/d3.js"></script>
    <style>
    #chart {
      width: 960px;
      height: 470px;
    }

    circle {
      stroke: #000;
      stroke-width: .5px;
    }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <button id="restart" onclick="force.start()">Reheat</button>
    <button id="update" onclick="update()">Renew</button>

    <script>
    window.onload = function() {
      var force = d3.layout.force()
          .charge(0)
          .gravity(0)
          .size([960, 470]);

      var update;

      d3.json("us-state-centroids.json", function(states) {
        var project = d3.geo.albersUsa(),
            idToNode = {},
            links = [];

        update = function() {
          d3.select("svg").remove();

          var svg = d3.select("#chart").append("svg")
              .attr("width", 960)
              .attr("height", 470)
            .append("g")
              .attr("transform", "translate(50,20)");

          var nodes = states.features.map(function(d) {
            var xy = project(d.geometry.coordinates);
            return idToNode[d.id] = {
              x: xy[0],
              y: xy[1],
              gravity: {x: xy[0], y: xy[1]},
              width: Math.random()*100+25,
              height: Math.random()*100+25
            };
          });

          var overlapColor = d3.scale.linear()
            .domain([0, 7])
            .range(["#2070a0", "orange"]);

          force
              .nodes(nodes)
              .links(links)
              .start()
              .on("tick", function(e) {
            var k = e.alpha,
                kg = k * .02,
                spaceAround = 0.;

            nodes.forEach(function(a, i) {
              a.x += (a.gravity.x - a.x) * kg;
              a.y += (a.gravity.y - a.y) * kg;

              a.overlapCount = 0;

              nodes.slice(i + 1).forEach(function(b) {
                dx =  (a.x - b.x);
                dy =  (a.y - b.y);

                adx = Math.abs(dx);
                ady = Math.abs(dy);

                mdx = (1+spaceAround)* (a.width + b.width)/2;
                mdy = (1+spaceAround)* (a.height + b.height)/2;

                if (adx < mdx  &&  ady < mdy) {          
                  l = Math.sqrt(dx * dx + dy * dy);

                  lx = (adx - mdx) / l * k;
                  ly = (ady - mdy) / l * k;

                  if (lx > ly  &&  ly > 0) lx = 0;
                  else if (ly > lx  &&  lx > 0) ly = 0;

                  dx *= lx;
                  dy *= ly;
                  a.x -= dx;
                  a.y -= dy;
                  b.x += dx;
                  b.y += dy;

                  a.overlapCount++;
                }
              });
            });

            svg.selectAll("rect")
                .style("fill", function(d) { return overlapColor(d.overlapCount); })
                .attr("x", function(d) { return d.x - d.width/2; })
                .attr("y", function(d) { return d.y - d.height/2; });

            svg.selectAll("line")
              .attr("x2", function(d) { return d.x; })
              .attr("y2", function(d) { return d.y; });

            svg.selectAll("circle.end")
              .attr("cx", function(d) { return d.x; })
              .attr("cy", function(d) { return d.y; });
          });

          var g = svg.selectAll("g")
              .data(nodes)
            .enter()
              .append("g")
                .attr("transform", "translate(100,100),scale(0.5)");

          g.append("circle")
            .attr("stroke", "#000")
            .attr("fill", "#fff")
            .attr("cx", function(d) { return d.gravity.x; })
            .attr("cy", function(d) { return d.gravity.y; })
            .attr("r", 3);

          g.append("line")
            .attr("stroke", "#000")
            .attr("opacity", "0.3")
            .attr("x1", function(d) { return d.gravity.x; })
            .attr("y1", function(d) { return d.gravity.y; });

          g.append("rect")
            .attr("opacity", 0.75)
            .attr("x", function(d) { return d.x - d.width/2; })
            .attr("y", function(d) { return d.y - d.height/2; })
            .attr("width", function(d, i) { return d.width; })
            .attr("height", function(d, i) { return d.height; });

          g.append("circle")
            .attr("class", "end")
            .attr("stroke", "#000")
            .attr("fill", "#fff")
            .attr("r", 3);
        };

        update();
      });
    };
    </script>

  </body>
 </html>
diff --git a/us-state-centroids.json b/us-state-centroids.json
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Dorling Cartogram</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.10/d3.js"></script>
	<style>
	#chart {
	width: 960px;
	height: 470px;
	}

	circle {
	stroke: #000;
	stroke-width: .5px;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<button id="restart" onclick="force.start()">Reheat</button>
	<button id="update" onclick="update()">Renew</button>

	<script>
	window.onload = function() {
	var force = d3.layout.force()
	.charge(0)
	.gravity(0)
	.size([960, 470]);

	var update;

	d3.json("us-state-centroids.json", function(states) {
	var project = d3.geo.albersUsa(),
	idToNode = {},
	links = [];

	update = function() {
	d3.select("svg").remove();

	var svg = d3.select("#chart").append("svg")
	.attr("width", 960)
	.attr("height", 470)
	.append("g")
	.attr("transform", "translate(50,20)");

	var nodes = states.features.map(function(d) {
	var xy = project(d.geometry.coordinates);
	return idToNode[d.id] = {
	x: xy[0],
	y: xy[1],
	gravity: {x: xy[0], y: xy[1]},
	width: Math.random()*100+25,
	height: Math.random()*100+25
	};
	});

	var overlapColor = d3.scale.linear()
	.domain([0, 7])
	.range(["#2070a0", "orange"]);

	force
	.nodes(nodes)
	.links(links)
	.start()
	.on("tick", function(e) {
	var k = e.alpha,
	kg = k * .02,
	spaceAround = 0.;

	nodes.forEach(function(a, i) {
	a.x += (a.gravity.x - a.x) * kg;
	a.y += (a.gravity.y - a.y) * kg;

	a.overlapCount = 0;

	nodes.slice(i + 1).forEach(function(b) {
	dx = (a.x - b.x);
	dy = (a.y - b.y);

	adx = Math.abs(dx);
	ady = Math.abs(dy);

	mdx = (1+spaceAround)* (a.width + b.width)/2;
	mdy = (1+spaceAround)* (a.height + b.height)/2;

	if (adx < mdx && ady < mdy) {
	l = Math.sqrt(dx * dx + dy * dy);

	lx = (adx - mdx) / l * k;
	ly = (ady - mdy) / l * k;

	if (lx > ly && ly > 0) lx = 0;
	else if (ly > lx && lx > 0) ly = 0;

	dx *= lx;
	dy *= ly;
	a.x -= dx;
	a.y -= dy;
	b.x += dx;
	b.y += dy;

	a.overlapCount++;
	}
	});
	});

	svg.selectAll("rect")
	.style("fill", function(d) { return overlapColor(d.overlapCount); })
	.attr("x", function(d) { return d.x - d.width/2; })
	.attr("y", function(d) { return d.y - d.height/2; });

	svg.selectAll("line")
	.attr("x2", function(d) { return d.x; })
	.attr("y2", function(d) { return d.y; });

	svg.selectAll("circle.end")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });
	});

	var g = svg.selectAll("g")
	.data(nodes)
	.enter()
	.append("g")
	.attr("transform", "translate(100,100),scale(0.5)");

	g.append("circle")
	.attr("stroke", "#000")
	.attr("fill", "#fff")
	.attr("cx", function(d) { return d.gravity.x; })
	.attr("cy", function(d) { return d.gravity.y; })
	.attr("r", 3);

	g.append("line")
	.attr("stroke", "#000")
	.attr("opacity", "0.3")
	.attr("x1", function(d) { return d.gravity.x; })
	.attr("y1", function(d) { return d.gravity.y; });

	g.append("rect")
	.attr("opacity", 0.75)
	.attr("x", function(d) { return d.x - d.width/2; })
	.attr("y", function(d) { return d.y - d.height/2; })
	.attr("width", function(d, i) { return d.width; })
	.attr("height", function(d, i) { return d.height; });

	g.append("circle")
	.attr("class", "end")
	.attr("stroke", "#000")
	.attr("fill", "#fff")
	.attr("r", 3);
	};

	update();
	});
	};
	</script>

	</body>
	</html>