2b:null 2c:["$","title",null,{"children":"Urban Commuter Boundaries | Sam Learner | Observable"}] 31:T467,legend = { svg.select("#legend-group").remove(); let legendGroup = svg.append("g").attr("id", "legend-group") legendGroup.append("rect") .attr("x", 8) .attr("y", 8) .attr("width", rectWidth) .attr("height", rectHeight) .style("fill", "url(#gradient)") // .style("stroke", "black"); legendGroup.append("text") .attr("x", (rectWidth / 2) + 4) .attr("y", rectHeight + 35) .style("text-anchor", "middle") .style("font-family", "sans-serif") .style("font-size", "12px") .text(`Tract residents working in ${displayCity} (%)`) const svgDefs = legendGroup.append('defs'); let gradient = svgDefs.append('linearGradient') .attr('id', 'gradient'); gradient.append('stop') .attr('class', 'stop-left') .attr('offset', '0') .style('stop-color', "white") gradient.append('stop') .attr('class', 'stop-right') .attr('offset', '1') .style("stop-color", mapColor) const axis = legendGroup .append("g") .attr("transform", "translate(8, 8)") axis .call(xAxis) .select(".domain").remove(); return legendGroup; }32:T428,toolTip = { const getCommuterVal = (cityData) => { return cityData.main_city_commuters ? d3.format(".1%")(1.0*cityData.main_city_commuters/cityData.total_commuters) : 'N/A'; } let toolTip = d3Tip() .attr('class', 'd3-tip') // .style("padding", "1rem") // .style("background-color", "white") // .style("stroke", "black") .html((d) => { const cityData = d.properties; // const commuterPct = tractData.main_city_commuters / tractData.total_commuters; //

% Commuters to ${tractData.MSA}: ${d3.format(".1%")(commuterPct)}

Tract: ${tractData.GEOID}

return ( `

Job location in ${displayCity}: ${getCommuterVal(cityData)}

` ) }); return toolTip }33:T699,generateMap = ({ geoJSON, chartProjection, pathGroup, mapType }) => { let path = d3.geoPath() .projection(chartProjection); pathGroup.selectAll("path") .data( geoJSON.features, d => d.properties.GEOID) .join( enter => enter.append("path") .attr("d", path) .attr("class", `${mapType}-path`) .style("opacity", 1.0) // .style('stroke-width', mapType === "state" ? 0.5 : 0) .style("stroke", "black") .style("stroke-width", mapType !== "tract" && showCityBoundaries ? 0.5 : 0) // .style("stroke-width", 0) .style("fill-opacity", d => { if (mapType !== "tract") { return 0; } return d.properties.total_commuters > 0 ? 1.0*d.properties.main_city_commuters / d.properties.total_commuters : 0.0; }) .on("mouseover", function(e, d) { if (mapType !== "tract") { d3.select(this) .attr("prev-stroke-width", d3.select(this).style("stroke-width")) .style("stroke-width", 1) toolTip.show(d, this); } }) .on("mouseout", function(e, d) { if (mapType !== "tract") { console.log("enter", showCityBoundaries) d3.select(this).style("stroke-width", d3.select(this).attr("prev-stroke-width")) toolTip.hide(); } }) .style("fill", d => { if (mapType === "state") { return "white"; } return mapColor }), update => update .style("stroke-width", mapType !== "tract" && showCityBoundaries ? 0.5 : 0), exit => exit.remove() ); };34:[{"id":"458b34a2b80cc52f7554c5ffac93c7e4ec2bf24bd9f8f9bbc43a50a9d63725a59bdc1e3dd7dccd8aeb6bd8f8ee59bb3899c7909013e631ff09b9200b6fa9d18c","href":"https://static.observableusercontent.com/files/458b34a2b80cc52f7554c5ffac93c7e4ec2bf24bd9f8f9bbc43a50a9d63725a59bdc1e3dd7dccd8aeb6bd8f8ee59bb3899c7909013e631ff09b9200b6fa9d18c","name":"places@1.json","type":"application/json","lastModified":1612384483064.757,"size":10309304},{"id":"ff3b97487ffd5defdb62db6e1549359d39632e32ae02884d9d34a469e1957ee9b107283a0132c268a4b661b18ad6289d29f61bb5036321ef4588d14b7725a242","href":"https://static.observableusercontent.com/files/ff3b97487ffd5defdb62db6e1549359d39632e32ae02884d9d34a469e1957ee9b107283a0132c268a4b661b18ad6289d29f61bb5036321ef4588d14b7725a242","name":"MCDs@1.json","type":"application/json","lastModified":1612388949501.034,"size":8346886},{"id":"f951417e36c428b8ea61c5aad37f96ebaebaa1fd3257952ea072444bb37da2c67a93e949c305a3a858362843ac31bcc900ba63c8a95c9ae74e2928b5302b86a4","href":"https://static.observableusercontent.com/files/f951417e36c428b8ea61c5aad37f96ebaebaa1fd3257952ea072444bb37da2c67a93e949c305a3a858362843ac31bcc900ba63c8a95c9ae74e2928b5302b86a4","name":"msa_largest_cities.csv","type":"text/csv","lastModified":1612217998383.918,"size":10457},{"id":"a4b6fc83b2c6f10a63722e48e0005d1205282081dc671e859fbaaf727d0df7d1fffab9769bb85c4c7b599548d92bebd09b93c4bd174807fccdc320748de858fe","href":"https://static.observableusercontent.com/files/a4b6fc83b2c6f10a63722e48e0005d1205282081dc671e859fbaaf727d0df7d1fffab9769bb85c4c7b599548d92bebd09b93c4bd174807fccdc320748de858fe","name":"places.json","type":"application/json","lastModified":1612218002080.791,"size":8618809},{"id":"4d309fa5a9585511c8669565903e4ba28ade816174f443dfb8fc5b21c2bbe945c3952f311c63c297c781fce0683207a195e3746deb0c91b382315efa19da0518","href":"https://static.observableusercontent.com/files/4d309fa5a9585511c8669565903e4ba28ade816174f443dfb8fc5b21c2bbe945c3952f311c63c297c781fce0683207a195e3746deb0c91b382315efa19da0518","name":"us_states.json","type":"application/json","lastModified":1612217998793.62,"size":375726}] 2f:{"id":"6a07f8b10d35f9ec","slug":"urban-commuter-boundaries","title":"Urban Commuter Boundaries","thumbnail":"f7e04c22b22de29328630cf4eefe26d86e511eb596399ecee25e53db981d76c1","access_level":"public","create_time":"$D2021-02-01T22:15:09.802Z","update_time":"$D2021-04-22T20:10:23.828Z","view_time":null,"first_public_time":"$D2021-02-01T23:42:50.002Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":"starter_2024"},"version":857,"publish_version":857,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null}],"members":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"83fdbdefc726a57e","slug":"sketches","title":"Sketches","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"type":"notebook","body":{"title":"Urban Commuter Boundaries","cells":[{"id":0,"value":"md`# Urban Commuter Boundaries\nMaps of urban areas, by census tract, with each tract shaded by the percentage of workers who commute into the metro area's largest city. The project uses Census LODES commuter data, which tracks home-to-work commuter flows. Urban areas with at least 250,000 people are included.\n\nLarger project and R data processing lives here:\nhttps://github.com/sdl60660/commuter-mapping\n\nLive site for more developed project is here: https://commuter-mapping.samlearner.com/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"viewof featuredCity = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"viewof showCityBoundaries = checkbox({label: ' Show City/Town Boundaries?', value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"chart = {\n renderCity({ MSA_ID: featuredCity});\n \n countySubdivisionGroup.raise();\n cityGroup.raise();\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"legendX = d3.scaleLinear()\n .range([0, rectWidth])\n .domain([0, 1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"xAxis = d3.axisBottom(legendX)\n .tickSize(rectHeight * 1.1)\n // .ticks(4)\n .tickFormat(x => d3.format(\".0%\")(x))\n .tickValues([0, 0.25, 0.5, 0.75, 1.0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"displayCity = MSAMeta.find(msa => msa.MSA_ID === featuredCity).CITY","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"rectHeight = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"rectWidth = 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"svg.call(zoom)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"zoom = d3.zoom()\n .scaleExtent([1, 8])\n .translateExtent([[0, 0], [width, height]])\n .on(\"zoom\", ({transform}) => zoomed(transform));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"zoomed = function(transform) {\n d3.selectAll(\".map-paths\").attr(\"transform\", transform);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"tractGroup = svg.append(\"g\")\n .attr(\"class\", \"map-paths tract-map\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":827,"value":"countySubdivisionGroup = svg.append(\"g\")\n .attr(\"class\", \"map-paths mcd-map\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"cityGroup = svg.append(\"g\")\n .attr(\"class\", \"map-paths city-boundary-map\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"stateGroup = svg.append(\"g\")\n .attr(\"class\", \"map-paths state-map\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"svg.call(toolTip)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"colorScales = setScales();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"setScales = () => {\n let colorScales =\n Category10.map((color) => {\n return d3.scaleLinear()\n .domain([0, 1])\n .range([\"white\", color])\n })\n \n return colorScales;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"mapColor = {\n const scaleIndex = Math.round((parseInt(featuredCity) / 72)) % 10\n return Category10[scaleIndex];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"renderCity = ({ MSA_ID }) => {\n const cityTracts = filterGeoJSON({ originalGeoJSON: tractGeoJSON, MSA_ID });\n const msaCities = filterGeoJSON({ originalGeoJSON: cityGeoJSON, MSA_ID });\n const msaMCDs = filterGeoJSON({ originalGeoJSON: MCDGeoJSON, MSA_ID });\n\n let chartProjection = d3.geoAlbersUsa()\n .fitExtent([[0, rectHeight+15], [width, height]], cityTracts);\n\n // console.log(msaCitiesFeatures);\n\n generateMap({ geoJSON: cityTracts, chartProjection, pathGroup: tractGroup, mapType: \"tract\" });\n generateMap({ geoJSON: msaCities, chartProjection, pathGroup: cityGroup, mapType: \"cities\" });\n generateMap({ geoJSON: msaMCDs, chartProjection, pathGroup: countySubdivisionGroup, mapType: \"county-subdivisions\" })\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"mutable projection = d3.geoAlbersUsa()\n .fitExtent([[0, rectHeight+15], [width, height]], tractGeoJSON);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"filterGeoJSON = ({ originalGeoJSON, MSA_ID }) => {\n const selectedFeatures = originalGeoJSON.features.filter(feature => feature.properties.MSA_ID === MSA_ID)\n return { type: \"FeatureCollection\", features: selectedFeatures };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"stateGeoJSON = topojson.feature(stateGeo, stateGeo.objects.states);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"tractGeoJSON = topojson.feature(tractGeo, tractGeo.objects[\"combined_tracts_with_commuter_data\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"cityGeoJSON = {\n let cityGeoJSON = topojson.feature(cityBoundaries, cityBoundaries.objects.places);\n // Specifically filter out the NYC place polygon, since the MCD data has more detailed data (boroughs).\n // This isn't the case anywhere else.\n cityGeoJSON.features = cityGeoJSON.features.filter(place => place.properties.GEOID !== \"3651000\");\n return cityGeoJSON;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":816,"value":"MCDGeoJSON = topojson.feature(MCDGeo, MCDGeo.objects.MCDs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"tractGeo = await d3.json(\"https://raw.githubusercontent.com/sdl60660/commuter-mapping/main/public/data/simplified_tract_data.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"cityBoundaries = await FileAttachment(\"places@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":818,"value":"MCDGeo = await FileAttachment(\"MCDs@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"stateGeo = await FileAttachment(\"us_states.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"MSAMeta = await FileAttachment(\"msa_largest_cities.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"defaultCity = \"35620\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"import { checkbox } from '@nitaku/checkbox'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"tile = require(\"d3-tile\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"d3Tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"Category10 = [\"#1f77b4\",\"#ff7f0e\",\"#2ca02c\",\"#d62728\",\"#9467bd\",\"#8c564b\",\"#e377c2\",\"#7f7f7f\",\"#bcbd22\",\"#17becf\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"