2b:null 2c:["$","title",null,{"children":"SF Bay Area Jobs: Quantiles | Zhenghao Lin | Observable"}] 31:T4e7,md`# SF Bay Area Jobs: Quantiles Visualizing the density of types of jobs in the 9 county SF Bay Area. Job categories are based on Robert Manduca's [job dot map](http://www.robertmanduca.com/projects/jobs.html). The Census LEHD dataset breaks down job counts by 2-digit NAICS code. This represents the primary industry of the employing company. I aggregated these categories as follows: - Manufacturing and Logistics: 11 (Agriculture and Forestry), 21 (Mining), 22 (Utilities), 23 (Construction), 31-33 (Manufacturing), 42 (Wholesale Trade), 48-49 (Transportation and Warehousing) - Professional Services: 51 (Information), 52 (Finance and Insurance), 53 (Real Estate), 54 (Professional, Scientific, and Technical Services), 55 (Management of Companies and Enterprises) - Healthcare, Education, and Government: 61 (Educational Services), 62 (Health Care), 81 (Other Services - largely Religious, Grantmaking, Civic, Professional, and Similar Organizations) - Retail, Hospitality, and Other Services: 44-45 (Retail Trade), 56 (Administrative and Support Services), 71 (Arts, Entertainment, and Recreation - largely Amusement, Gambling, and Recreation), 72 (Accomodation and Food Services) Use your mouse wheel / trackpad to zoom and pan on the map.` 32:T443,viewof svg = { const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .call(zoom); // background svg .append("rect") .attr("width", width) .attr("height", height) .attr("x", 0) .attr("y", 0) .attr("fill", "hsl(0, 0%, 96%)"); // choropleth const g = svg.append("g").classed("map-layers", true); g.selectAll("path") .data(geojson.features) .enter() .append("path") .attr("class", (d) => quantile(d.properties[category])) .attr("d", path) .append("title") .text((d) => `${format(d.properties[category])} / sq meter`); // legend const legend = svg .append("g") .classed("legend", true) .attr("transform", `translate(20, ${height - 60})`); legend .selectAll("rect") .data(quantile.range()) .enter() .append("rect") .attr("height", 8) .attr("width", x.bandwidth()) .attr("x", (d) => x(d)) .attr("class", (d) => d); legend.select(".domain").remove(); legend.selectAll(".tick > line").remove(); return svg.node(); }33:[{"id":"7c16d129cea2c51d02e6be6a273db391604805481f66f4cd059729974fb6bfd077fa116938f96b7215eef3a1592c0d7ccbac5a381cd436f31040487882ec008c","href":"https://static.observableusercontent.com/files/7c16d129cea2c51d02e6be6a273db391604805481f66f4cd059729974fb6bfd077fa116938f96b7215eef3a1592c0d7ccbac5a381cd436f31040487882ec008c","name":"fixedGeoJSON.json","type":"application/json","lastModified":1681240880312.871,"size":17765555}] 2f:{"id":"953f21b9aa8a95c4","slug":null,"title":"SF Bay Area Jobs: Quantiles","thumbnail":"720233c8de1e42b8f8295e0e48bb65c988bf3435bea11437ada952c02aeb9277","access_level":"public","create_time":"$D2023-04-11T19:21:11.744Z","update_time":"$D2023-04-11T19:24:42.824Z","view_time":null,"first_public_time":"$D2023-04-11T19:21:11.744Z","has_unpublished_edits":null,"fork":{"id":"9bacddc5ea77a305","slug":"sf-bay-area-jobs-quantiles","title":"SF Bay Area Jobs: Quantiles","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e7d220f596a8e193","login":"zhenghao-lin","name":"Zhenghao Lin","avatar_url":"https://avatars-next.observableusercontent.com/03a225dc3cc6dbe00ba43fafe9901db25cafa64a81b5555e001748a80c4b32d8","tier":"starter_2024"},"version":713,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4526580224c72b33","login":"zhenghao-lin","name":"Zhenghao Lin","avatar_url":"https://avatars-next.observableusercontent.com/03a225dc3cc6dbe00ba43fafe9901db25cafa64a81b5555e001748a80c4b32d8","tier":null}],"members":[{"type":"individual","id":"4526580224c72b33","login":"zhenghao-lin","name":"Zhenghao Lin","avatar_url":"https://avatars-next.observableusercontent.com/03a225dc3cc6dbe00ba43fafe9901db25cafa64a81b5555e001748a80c4b32d8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SF Bay Area Jobs: Quantiles","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`### Select a category and number of quantiles:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"viewof category = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"viewof numberOfQuantiles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"geojson = {\n let geojson = topojson.feature(tractsTopoJSON, tractsTopoJSON.objects.tracts_jobs_2002_wgs84)\n geojson.features = geojson.features.map(feature => {\n const total = Object.keys(feature.properties)\n .reduce((acc, cur) => cur !== \"area_sqm\" && cur !== \"total\" ? acc + feature.properties[cur] : acc, 0)\n feature.properties = {...feature.properties, total };\n return feature;\n })\n return geojson\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// california state plane 3 | https://github.com/veltman/d3-stateplane\nprojection = d3.geoConicConformal()\n .parallels([37 + 4 / 60, 38 + 26 / 60])\n .rotate([120 + 30 / 60], 0)\n .fitSize([width, height], geojson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"quantile = d3.scaleQuantile()\n .domain(values)\n .range(d3.range(numberOfQuantiles).map(i => `q${i}-9`))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"x = d3.scaleBand()\n .domain(quantile.range())\n .rangeRound([0, 300])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"format = d => +d3.format(\".5f\")(d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"tractsTopoJSON = d3.json(\"https://gist.githubusercontent.com/clhenrick/560b34f234cccba4ed884387c2c92cd5/raw/d21de2ffcc4d2345bbfae90dd7468b1b672b4b9c/tracts_jobs_2002_wgs84.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"values = geojson.features.map(d => format(d.properties[category]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"function zoom (s) {\n s.call(d3.zoom()\n .on(\"zoom\", () => s.select(\".map-layers\").attr(\"transform\", d3.event.transform))\n .scaleExtent([1, 18])\n .translateExtent([[0, 0], [width, height]]))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"height = width * 1.2941176471","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`### dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"d3 = require(\"d3@next\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"fixedgeojson = FileAttachment(\"fixedGeoJSON.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"