Walmart’s growth

This animation shows the expansion of Walmart over the last fifty years. On July 2, 1962 in Rogers, Arkansas, the first Walton’s opened. This dataset from 2006 includes about 3,100 Walmart locations in the contiguous United States.

const svg = d3.create("svg")
    .attr("width", 975)
    .attr("height", 610)
    .attr("viewBox", [0, 0, 975, 610])
    .attr("style", "max-width: 100%; height: auto;");

svg.append("path")
    .datum(topojson.merge(us, lower48.geometries))
    .attr("fill", "#ddd")
    .attr("d", path);

svg.append("path")
    .datum(topojson.mesh(us, lower48, (a, b) => a !== b))
    .attr("fill", "none")
    .attr("stroke", "white")
    .attr("stroke-linejoin", "round")
    .attr("d", path);

const g = svg.append("g")
    .attr("fill", "none")
    .attr("stroke", "black");

const dot = g.selectAll("circle")
  .data(data)
  .join("circle")
    .attr("transform", (d) => `translate(${d})`);

svg.append("circle")
    .attr("fill", "blue")
    .attr("transform", `translate(${data[0]})`)
    .attr("r", 3);

display(svg.node());

let previousDate = -Infinity;

function update(date) {
  dot // enter
    .filter((d) => d.date > previousDate && d.date <= date)
    .transition().attr("r", 3);
  dot // exit
    .filter((d) => d.date <= previousDate && d.date > date)
    .transition().attr("r", 0);
  previousDate = date;
}

update(date); // side effect to trigger animation

const parseDate = d3.utcParse("%m/%d/%Y");
const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]);
const path = d3.geoPath(); // no projection, already projected
const data = FileAttachment("data/walmart.tsv")
  .tsv()
  .then((data) => data.map((d) => Object.assign(projection(d), {date: parseDate(d.date)})))
  .then((data) => data.sort((a, b) => d3.ascending(a.date, b.date)))
  .then(display);

const us = await FileAttachment("data/us-states-albers-10m.json").json();
const states = us.objects.states;
const lower48 = {type: "GeometryCollection", geometries: states.geometries.filter((d) => d.id !== "02" && d.id !== "15")};

import {Scrubber} from "./scrubber.js";