3f:null 40:["$","title",null,{"children":"Census Visualization | Mo El Geneidy | Observable"}] 46:T6cb,chart = { const width = 960; const height = 680; const path = d3.geoPath(); const colorScale = d3.interpolateInferno; const populationScale = opts.includes("Logarithmic") ? d3 .scaleLog() .domain([min, max]) .range([0, 1]) : d3 .scaleLinear() .domain([min, max]) .range([0, 1]); const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); svg .append("text") .attr("x", width / 2) .attr("y", 24) .attr("text-anchor", "middle") .style("font-size", "16px") .text(label); svg .append("g") .attr("transform", `translate(0,80)`) .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .enter() .append("path") .attr("fill", d => { return census[d.id] ? opts.includes("Normalize") ? colorScale( populationScale( census[d.id][censusField] / census[d.id]["S0101_C01_001E"] ) ) : colorScale(populationScale(census[d.id][censusField])) : "#666"; }) .attr("stroke-width", 1.0) .attr("stroke", d => { return census[d.id] ? opts.includes("Normalize") ? colorScale( populationScale( census[d.id][censusField] / census[d.id]["S0101_C01_001E"] ) ) : colorScale(populationScale(census[d.id][censusField])) : "#666"; }) .attr("stroke-linejoin", "round") .attr("d", path); svg .append("g") .attr("transform", `translate(20,60)`) .call(colorAxisTop(colorScale, populationScale).range([0, width - 20])); return svg.node(); }47:T72d,function colorAxisTop(colorScale, scale) { var rampSteps = 64, rampSize = 24, x = scale, x0 = 0, x1 = 1, xAxis = d3.axisTop(x); function colorAxis(selection) { var domain = scale.domain(), context = DOM.context2d(rampSteps, 1, 1); // Render the axis. x.domain([domain[0], domain[domain.length - 1]]).range([x0, x1]); selection.call(xAxis); // Render the color ramp. x.range([0, 1]); for (var i = 0; i < rampSteps; ++i) { context.fillStyle = colorScale(i / (rampSteps - 1)); context.fillRect(i, 0, 1, 1); } var image = selection.selectAll("image").data([null]); image = image .enter() .insert("image", "*") .attr("preserveAspectRatio", "none") .merge(image); image .attr("x", x0) .attr("width", x1 - x0 + 1) .attr("height", rampSize) .attr("xlink:href", context.canvas.toDataURL()); } colorAxis.range = function(_) { return arguments.length ? ((x0 = +_[0]), (x1 = +_[1]), colorAxis) : [x0, x1]; }; colorAxis.scale = function(_) { return arguments.length ? ((scale = _), colorAxis) : scale; }; colorAxis.rampSteps = function(_) { return arguments.length ? ((rampSteps = +_), colorAxis) : rampSteps; }; colorAxis.rampSize = function(_) { return arguments.length ? ((rampSize = +_), colorAxis) : rampSize; }; function extendAxis(method) { colorAxis[method] = function() { var result = xAxis[method].apply(xAxis, arguments); return result === xAxis ? colorAxis : result; }; } extendAxis("ticks"); extendAxis("tickArguments"); extendAxis("tickValues"); extendAxis("tickFormat"); extendAxis("tickSize"); extendAxis("tickSizeInner"); extendAxis("tickSizeOuter"); extendAxis("tickPadding"); return colorAxis; }48:[] 44:{"id":"9b0068c8239c551b","slug":"census-visualization","title":"Census Visualization","thumbnail":"9688d3f8b074944e9e37ae6570c8ebb0de48d3f2a880dde691105e21b21e5f00","access_level":"public","create_time":"$D2022-08-04T20:55:00.186Z","update_time":"$D2022-08-04T20:55:00.186Z","view_time":null,"first_public_time":"$D2022-08-04T20:55:10.402Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"21ad40b63dc7cde3","login":"bc","name":"Mo El Geneidy","avatar_url":"https://avatars-next.observableusercontent.com/664f3ea176a14258bfe84880ac2139da73df4a6a08f27bf280ec1bdcb7d610d5","tier":"starter_2024","bio":"","following":false},"version":87,"publish_version":87,"role":null,"authored":false,"authors":[{"type":"individual","id":"644fcf47c6af2067","login":"bc","name":"Mo El Geneidy","avatar_url":"https://avatars-next.observableusercontent.com/664f3ea176a14258bfe84880ac2139da73df4a6a08f27bf280ec1bdcb7d610d5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"644fcf47c6af2067","login":"bc","name":"Mo El Geneidy","avatar_url":"https://avatars-next.observableusercontent.com/664f3ea176a14258bfe84880ac2139da73df4a6a08f27bf280ec1bdcb7d610d5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1649ed72a97a62fe","slug":"util","title":"util","owner":{"id":"21ad40b63dc7cde3","login":"bc","name":"Mo El Geneidy"}},"type":"notebook","body":{"titling":"auto","title":"Census Visualization","cells":[{"id":0,"value":"md`# Census Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof selected_concept = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof censusField = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof opts = checkbox([\"Logarithmic\", \"Normalize by population\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`#### Census`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"census_csvson = await fetch(\n `https://api.census.gov/data/2015/acs/acs5/subject?get=${censusField},S0101_C01_001E,NAME&for=county:*&key=b4bdbdc366c4338c894043782976020dcb1f0e94 \n`\n).then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"census_list = census_csvson.slice(1, census_csvson.length).map(c => {\n let d = {};\n for (let i = 0; i < c.length; i++) {\n d[census_csvson[0][i]] = c[i];\n }\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"census = census_list.reduce((accumulator, next) => {\n accumulator[next.state + next.county] = next;\n return accumulator;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"censusFields = await fetch(\n \"https://api.census.gov/data/2015/acs/acs5/subject/variables.xml\"\n)\n .then(r => r.text())\n .then(str => new window.DOMParser().parseFromString(str, \"text/xml\"))\n .then(data => {\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"variables = Array.from(censusFields.querySelector(\"vars\").childNodes)\n .filter(d => d.localName === \"var\")\n .map(v => {\n return {\n id: v.attributes[\"xml:id\"] ? v.attributes[\"xml:id\"].textContent : \"\",\n label: v.attributes[\"label\"] ? v.attributes[\"label\"].textContent : \"\",\n concept: v.attributes[\"concept\"]\n ? v.attributes[\"concept\"].textContent\n : \"\"\n };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"concepts = variables.map(v => v.concept)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"unique_concepts = variables\n .map(v => v.concept)\n .filter((c, i) => concepts.indexOf(c) === i)\n .sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"available_variables = variables.filter(\n v => v.concept.split(\" \")[0] === selected_concept\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`### Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"label = {\n const censusVariable = censusFields.querySelector(`[*|id=${censusField}]`);\n return (\n censusVariable.getAttribute(\"concept\") +\n \" (\" +\n censusVariable.getAttribute(\"label\") +\n \")\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"min = d3.min(census_list, d =>\n Math.max(\n max / 1e3,\n parseFloat(\n opts.includes(\"Normalize\")\n ? d[censusField] / d[\"S0101_C01_001E\"]\n : d[censusField]\n )\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"max = d3.max(census_list, d =>\n parseFloat(\n opts.includes(\"Normalize\")\n ? d[censusField] / d[\"S0101_C01_001E\"]\n : d[censusField]\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"