36:["$","title",null,{"children":"Walmart’s Growth | Clayton Dembski | Observable"}] 3e:Ta02,md`# Walmart’s Growth This animation shows the expansion of Walmart over the last fifty years. On July 2, 1962 in [Rogers, Arkansas](https://en.wikipedia.org/wiki/Rogers,_Arkansas), the first Walton’s opened. [This dataset](http://users.econ.umn.edu/~holmes/data/WalMart/index.html) from 2006 includes about 3,100 Walmart locations in the continguous United States. The work was forked from Mike Bostock's Walmart Growth, which can be found at https://observablehq.com/@mbostock/walmarts-growth?collection=@observablehq/maps. This project requires a critique and change of some novel data visualization. The original work populates the map with a series of points, representing locations in the us, however, in doing this, two peices of information are hard to parse. First off, by the time 2006 is reached, one can barely make out which state is which: the information density of the bubbles is too great, hiding the actual state lines. Ideas: \n*-opacity of bubble outlines* \n*-white outline on top of bubbles*\n The second problem is that, especally as the number of bubbles increases, it is very difficult for the user to identify what data is appearing where, and difficult to esitmate the density of the state. Ideas: \n*-Heatmap using concepts from https://observablehq.com/@jake-low/how-well-does-population-density-predict-u-s-voting-outcome?collection=@observablehq/maps Particularly the magma and inferno colorschemes. Each state should have a heatmap coloring of the number of walmarts. A novel extension may be to have the individual points also color coded, the main difficulty being a compatible colorscheme, possibly texture*\n *-Each point has a connected tooltip, whcih shows the user the number of the storem and the year it was created. This could be extended to include the exact location in the future, by further farming from the reverse geolocate *\n *-Each State has an associated tooltip: the name of the state and the number of walmarts in the state. This will be for the current year.*\n *Below the chloropleth is a scatterplot where each store is plotted as a year vs storenumber chart. With time, a novel extension may be for an "over state" hover on the map to highlight on the scatterplot only the points which belong to the state, and possibly for a hover over an individual state to highlight only the point in the scatter which corrisponds *\n `3f:T15a4,chart = { replay; const width = 960; const height = 600; const path = d3.geoPath(); const delay = d3.scaleTime() .domain([data[0].date, data[data.length - 1].date]) .range([0, 20000]); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); // const svg2 = d3.select(DOM).append("svg").attr("height", height).attr("width",width).style("width", "100%") // .style("height", "auto"); //svg.append("rect").attr("width",width).attr("height",height).attr("fill","#404040") svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", function(d) {if(d.id === "15" || d.id === "02"){return "white";}else{return "#ddd"}}) .attr("d", path); //legend? const domain = [3, 129]; const color = d3.scaleLog() .base(2) .domain(domain) .interpolate(() => d3.interpolateInferno) var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); const thresholds = d3.range(2, 7); const x = d3.scaleLog() .base(2) .domain(domain) .rangeRound([1, 260]); const legend = svg.append("g") .style("font-size", "0.8rem") .style("font-family", "sans-serif") .attr("transform", "translate(600,40)"); const label = legend.append("text") .attr("y", -8) .attr("font-weight", "bold") .text("Number of Walmarts"); const scale = legend.append("g"); scale.selectAll("rect") .data(thresholds) .enter().append("rect") .attr("height", 10) .attr("x", d => x(2**d)) .attr("width", d => x(2 * 2**d) - x(2**d)) .attr("fill", d => color(1.5**(13-d))); //color(1.5*(2**d))), color(1.65**(11-d))) //END LEGEND const formatTime = d3.timeFormat("%B %d, %Y"); scale.call( d3.axisBottom(x) .tickSize(15) .tickFormat(v => v > 9999 ? d3.format(".2s")(v) : v > 999 ? d3.format(".1s")(v) : String(v)) ) .select(".domain") .remove(); const color2 = d3.scaleLinear() .interpolate(() => d3.interpolateInferno) const color3 = d3.scaleLinear() .interpolate(() => d3.interpolateBlues) // svg.append("path") // .datum(topojson.merge(us, us.objects.lower48.geometries)) // .attr("fill", "#ddd") // .attr("d", path); const g = svg.append("g") .attr("fill", "red") .attr("stroke", "black").on("mousemove", function() { tooltip2.attr( "transform", `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})` ).raise(); }).on("mouseout", function() { tooltip2.call(callout, null); }); const tooltip2 = svg.append("g"); for (const d of data) { d3.timeout(() => { var snum = d.num; var sstr = d.state; var sttl = d.total; var sdate = d.date; g.append("circle") .attr("transform", `translate(${d})`) .attr("r", 3) .attr("fill-opacity", 1) .attr("fill", "#ddd") .attr("stroke-opacity", 0) .on("mouseover", function(f) { tooltip2.call( callout, `\n ${format(formatTime(sdate))}, \n Store Number: ${format(sttl)}` ); }) .transition() .attr("fill-opacity", .5) // .attr("stroke", "white") .attr("stroke-opacity", .5); mutable ttl = d.total; mutable curstate = d.state; svg .selectAll("path") .data(topojson.feature(us, us.objects.states).features).filter( function(f){return f.id===d.id}) .join("path") .attr("fill", color2(.95-d.col)) .attr("d", path) .on("mouseover", function(f) { tooltip2.call( callout, `\n ${format(sstr)}, \nTotal Stores: ${format(snum)}` ); }).on("mousemove", function() { tooltip2.attr( "transform", `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})` ).raise(); }).on("mouseout", function() { tooltip2.call(callout, null); }); // // mutable ttlprev = ttl; //mutable timePrev = date; //console.log(d3.select('svg').selectAll('path')); //.each(function(f){f.attr("fill", function() { // if (f.someAttribute vs marker.someAttribute){ // return "red"; // } // return "red"; // })}) }, delay(d.date)); } svg.append("path") .datum(topojson.mesh(us, us.objects.lower48, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width","2") .attr("stroke-linejoin", "round") .attr("d", path); svg.append("circle").on("mouseover", function(f) { tooltip2.call( callout, `\n The First Walton’s \n July 2, 1962 \n Rogers, Arkansas ` ); }).on("mouseout", function() { tooltip2.call(callout, null); }) .attr("fill", "white") .attr("stroke", "black") .attr("transform", `translate(${data[0]})`) .attr("r", 5); svg.transition() .ease(d3.easeLinear) .duration(delay.range()[1]) .tween("date", () => { const i = d3.interpolateDate(...delay.domain()); return t => mutable date = d3.timeDay(i(t)); }); return svg.node(); }40:[] 3a:{"id":"ef7da62b6b5a14f8","slug":"walmarts-growth-intermediate-infection-version/3","title":"Walmart’s Growth","thumbnail":"8b7dc0cac12e1892d1c97b4529cdac9d7e74a40fcc430397fcb9166e36548618","access_level":"public","create_time":"$D2020-02-29T08:06:49.331Z","update_time":"$D2023-05-12T03:39:03.688Z","view_time":null,"first_public_time":"$D2020-02-29T08:42:30.130Z","has_unpublished_edits":null,"fork":{"id":"33d064a94089eb6e","slug":"walmarts-growth-intermediate-infection-version/2","title":"Walmart’s Growth, Intermediate Infection Version","owner":{"id":"29d5be2333130c85","login":"cabincabin","name":"Clayton Dembski"}},"stars":1,"starred":false,"owner":{"type":"team","id":"29d5be2333130c85","login":"cabincabin","name":"Clayton Dembski","avatar_url":"https://avatars-next.observableusercontent.com/7c130a85ca2238bd630d933c0079144d146eb55c09b00809cc47bc9481661ebe","tier":"starter_2024","bio":"Hey,\r\nmy name's Clayton Dembski.\r\n\r\nI'm a Robotics and Computer Science Double Major from WPI.\r\n\r\nNice.","followed_by_you":false,"follows_you":false},"version":1005,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"15222a605e9120f5","login":"cabincabin","name":"Clayton Dembski","avatar_url":"https://avatars-next.observableusercontent.com/7c130a85ca2238bd630d933c0079144d146eb55c09b00809cc47bc9481661ebe","tier":null,"bio":"Hey,\r\nmy name's Clayton Dembski.\r\n\r\nI'm a Robotics and Computer Science Double Major from WPI.\r\n\r\nNice.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"15222a605e9120f5","login":"cabincabin","name":"Clayton Dembski","avatar_url":"https://avatars-next.observableusercontent.com/7c130a85ca2238bd630d933c0079144d146eb55c09b00809cc47bc9481661ebe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Walmart’s Growth","cells":[{"id":0,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"viewof replay = html`