45:["$","title",null,{"children":"Philly Rail Park -- 10 Minute Walk | Armin Akhavan | Observable"}] 4d:T4f7,pie = { const radius = 200; const svg = d3.select('#chart'); const center = { x: 300, y: 300 }; // based on viewBox: 0 0 600 600 const top = { x: center.x, y: center.y - radius, }; let accumulatedValue = 0, greaterThanHalf, p1 = top, p2, d; svg.selectAll('path').remove(); // clear the svg element svg .selectAll("path") .data(data) .enter() .append("path") .attr("class", "arc") .attr("fill", (slice) => slice.color) // .on('mouseover', function(slice) { d3.select(this).attr('fill', slice.hoverColor) }) // .on('mouseout', function(slice) { d3.select(this).attr('fill', slice.color) }) .attr("d", (slice) => { accumulatedValue += slice.value; greaterThanHalf = slice.value > 180 ? 1 : 0; p2 = pointAlongCircumference(radius, center, 270 - accumulatedValue); d = ` M ${center.x} ${center.y} L ${p1.x} ${p1.y} A ${radius} ${radius} 0 ${greaterThanHalf} 0 ${p2.x} ${p2.y} L ${center.x} ${center.y} `; p1 = p2; return d; }); if (donut) { svg.append('circle') .attr('class', 'donut') .attr('cx', center.x) .attr('cy', center.y) .attr('r', 100) } }4e:Tfc2,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/horizontal-bar-chart function BarChart( data, { x = (d) => d, // given d in data, returns the (quantitative) x-value y = (d, i) => i, // given d in data, returns the (ordinal) y-value title, // given d in data, returns the title text marginTop = 30, // the top margin, in pixels marginRight = 40, // the right margin, in pixels marginBottom = 10, // the bottom margin, in pixels marginLeft = 30, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] xFormat, // a format specifier string for the x-axis xLabel, // a label for the x-axis yPadding = 0.1, // amount of y-range to reserve to separate bars yDomain, // an array of (ordinal) y-values yRange, // [top, bottom] color = "currentColor", // bar fill color titleColor = "black", // title fill color when atop bar titleAltColor = "currentColor" // title fill color when atop background } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // Compute default domains, and unique the y-domain. if (xDomain === undefined) xDomain = [0, d3.max(X)]; if (yDomain === undefined) yDomain = Y; yDomain = new d3.InternSet(yDomain); // Omit any data not present in the y-domain. const I = d3.range(X.length).filter((i) => yDomain.has(Y[i])); // Compute the default height. if (height === undefined) height = Math.ceil((yDomain.size + yPadding) * 25) + marginTop + marginBottom; if (yRange === undefined) yRange = [marginTop, height - marginBottom]; // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = d3.scaleBand(yDomain, yRange).padding(yPadding); const xAxis = d3.axisTop(xScale).ticks(width / 80, xFormat); const yAxis = d3.axisLeft(yScale).tickSizeOuter(0); // Compute titles. if (title === undefined) { const formatValue = xScale.tickFormat(100, xFormat); title = (i) => `${formatValue(X[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg .append("g") .attr("transform", `translate(0,${marginTop})`) .call(xAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("y2", height - marginTop - marginBottom) .attr("stroke-opacity", 0.0) ) .call((g) => g .append("text") .attr("x", width - marginRight) .attr("y", -22) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel) ); svg .append("g") .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", xScale(0)) .attr("y", (i) => yScale(Y[i])) .attr("width", (i) => xScale(X[i]) - xScale(0)) .attr("height", yScale.bandwidth()); svg .append("g") .attr("fill", titleColor) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(I) .join("text") .attr("x", (i) => xScale(X[i])) .attr("y", (i) => yScale(Y[i]) + yScale.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", +4) .text(title) .call((text) => text .filter((i) => xScale(X[i]) - xScale(0) < 20) // short bars .attr("dx", +4) .attr("fill", titleAltColor) .attr("text-anchor", "start") ); svg.append("g").attr("transform", `translate(${marginLeft},0)`).call(yAxis); return svg.node(); }4f:[{"id":"4083ca3e92d9ea670f4dd919fd0d3d78a2aa08edb3cf6e1ec1c80942eba8fe9b0129dddf947bb441453b5f76d8ad8ca38796748e6c241b40520e3166e7c75986","href":"https://static.observableusercontent.com/files/4083ca3e92d9ea670f4dd919fd0d3d78a2aa08edb3cf6e1ec1c80942eba8fe9b0129dddf947bb441453b5f76d8ad8ca38796748e6c241b40520e3166e7c75986","name":"live10_v3.geojson","type":"application/geo+json","lastModified":1660151019123.852,"size":460972},{"id":"a135b54bcb0fe131b29ab92d51f1a09279b852c4e136a07b85b6a8484fa6cc10e721d4d8da7d19941fda4131f0045f0264a46b58bdabb6dba1227abe3c8ca2a7","href":"https://static.observableusercontent.com/files/a135b54bcb0fe131b29ab92d51f1a09279b852c4e136a07b85b6a8484fa6cc10e721d4d8da7d19941fda4131f0045f0264a46b58bdabb6dba1227abe3c8ca2a7","name":"neighborhood_block_overlap_v3.geojson","type":"application/geo+json","lastModified":1660151036079.047,"size":874749},{"id":"181ec606fd0231687f68306bac226b2dbfbcc9ad72b301ccfd9690d5ba4ada06ca17cfbcfe86d891ab172d7c15d9d97503fe2b935a5af9f37f07dece1f9eddbf","href":"https://static.observableusercontent.com/files/181ec606fd0231687f68306bac226b2dbfbcc9ad72b301ccfd9690d5ba4ada06ca17cfbcfe86d891ab172d7c15d9d97503fe2b935a5af9f37f07dece1f9eddbf","name":"work10_v3.geojson","type":"application/geo+json","lastModified":1660151045681.401,"size":509631}] 49:{"id":"c710287f834b7da5","slug":"philly-rail-park-10-minute-walk","title":"Philly Rail Park -- 10 Minute Walk","thumbnail":"ebffb40201c94eb08112fdb06066edd350d5411b3c8aa5e2dc1c241b743f4cd2","access_level":"public","create_time":"$D2022-08-10T13:14:43.300Z","update_time":"$D2022-08-10T22:52:53.400Z","view_time":null,"first_public_time":"$D2022-08-10T15:02:31.768Z","has_unpublished_edits":null,"fork":{"id":"a97beea0beff95a7","slug":"basic-pie","title":"Philly Rail Park -- 10 Minute Walk","owner":{"id":"92e740786daf87d8","login":"arminakvn","name":"Armin Akhavan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"92e740786daf87d8","login":"arminakvn","name":"Armin Akhavan","avatar_url":"https://avatars-next.observableusercontent.com/cbd8e47f76e54ac717c9df251e0a675c321dfb4126db5704e7475155390eb3b7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":551,"publish_version":551,"role":null,"authored":false,"authors":[{"type":"individual","id":"86206b14aff34f9b","login":"arminakvn","name":"Armin Akhavan","avatar_url":"https://avatars-next.observableusercontent.com/cbd8e47f76e54ac717c9df251e0a675c321dfb4126db5704e7475155390eb3b7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"86206b14aff34f9b","login":"arminakvn","name":"Armin Akhavan","avatar_url":"https://avatars-next.observableusercontent.com/cbd8e47f76e54ac717c9df251e0a675c321dfb4126db5704e7475155390eb3b7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Philly Rail Park -- 10 Minute Walk","cells":[{"id":0,"value":"md`# Philly Rail Park -- 10 Minute Walk`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof hood = Inputs.select([\"All\", ...uniqhoods], {\n label: \"Neighborhood\",\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"### Race","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":490,"value":"key = Swatches(\n d3.scaleOrdinal(\n [\n ...Object.keys(races).map((race) => {\n const tota = ret\n .filter((r) => {\n return r.label === race;\n })[0]\n .value.toFixed(0)\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n const prop =\n (100 *\n ret.filter((r) => {\n return r.label === race;\n })[0].value) /\n total;\n return `${prop\n .toFixed(0)\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}% ${race}`;\n })\n ],\n Object.keys(races).map((race) => {\n return races[race].Color;\n })\n ),\n { columns: \"140px\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`

Total Residents: ${tot_live\n .toFixed(0)\n .replace(\n /\\B(?=(\\d{3})+(?!\\d))/g,\n \",\"\n )}

Total Workers: ${tot_work\n .toFixed(0)\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}

Total Residents (*including population below 16 and over 60): ${total\n .toFixed(0)\n .replace(\n /\\B(?=(\\d{3})+(?!\\d))/g,\n \",\"\n )}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"viewof donut = Inputs.toggle({ label: \"Donut\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"uniqhoods = [...new Set(hoods)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"hoods = neighborhood_block_overlap.features.map((feature) => {\n return feature.properties.NAME;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"total = d3.sum(ret.map((item) => item.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"data = formatData(ret)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"pointAlongCircumference = (radius, origin, d) => {\n const radians = d * Math.PI / 180;\n return {\n x: origin.x + radius * Math.cos(radians),\n y: origin.y + radius * Math.sin(radians),\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"ret = format_data(neighborhood_block_overlap.features, races)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"format_data(neighborhood_block_overlap.features, races)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"function format_data(features, races) {\n const total = Object.keys(races).map((r) => {\n return races[r].Fields.reduce((d, field) => {\n features.map((f) => {\n if (f.properties.NAME === hood || hood === \"All\")\n d = d + +f.properties[field] * +f.properties.prop_overlap;\n });\n return d;\n }, 0);\n });\n return Object.keys(races).map((r, i) => {\n return {\n value: total[i],\n label: r,\n color: races[r].Color,\n hoverColor: races[r].Color\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"races = ({\n White: { Fields: [\"R_White\"], Color: \"#534a98\" },\n Black: { Fields: [\"R_Black\"], Color: \"#dec175\" },\n Other: { Fields: [\"R_AIAN\", \"R_NHOPI\", \"R_Oth2\"], Color: \"#92cdc2\" },\n Asian: { Fields: [\"R_Asian\"], Color: \"#ca77b3\" },\n \"Hispanic/Latino\": { Fields: [\"R_Hisp\"], Color: \"#eca57b\" }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"formatData = data => {\n const total = d3.sum(data.map(item => item.value));\n return data.map(item => ({\n ...item,\n value: item.value / total * 360,\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"lve = format_live(live10.features, jobs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"lve_prp = lve.map((feature) => {\n return { name: feature.name, value: feature.value / tot_live };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"wrk_prp = wrk.map((feature) => {\n return { name: feature.name, value: feature.value / tot_work };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"tot_work = wrk.reduce((d, feature) => {\n d = d + feature.value;\n return d;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"tot_live = lve.reduce((d, feature) => {\n d = d + feature.value;\n return d;\n}, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"wrk = format_work(work10.features, jobs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"function format_live(features, jobs) {\n const ret = Object.keys(jobs).map((job) => {\n const total = features.reduce((d, feature) => {\n if (feature.properties.NAME === hood || hood === \"All\")\n d =\n d +\n +feature.properties[jobs[job].fields[0]] *\n +feature.properties.prop_overlap;\n return d;\n }, 0);\n return { name: job, value: total };\n });\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"function format_work(features, jobs) {\n const ret = Object.keys(jobs).map((job) => {\n const total = features.reduce((d, feature) => {\n if (feature.properties.NAME === hood || hood === \"All\")\n d =\n d +\n +feature.properties[jobs[job].fields[0]] *\n +feature.properties.prop_overlap;\n return d;\n }, 0);\n return { name: job, value: total };\n });\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"work10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"jobs = ({\n \"Manufacturing + Construction\": { fields: [\"ManCon\"], color: \"#66edff\" },\n \"Trade, Transportation + Utilities\": { fields: [\"TTU\"], color: \"#66edff\" },\n Info: { fields: [\"Info\"], color: \"#66edff\" },\n \"Financial Activities\": { fields: [\"Fin\"], color: \"#66edff\" },\n \"Professional + Business Services\": { fields: [\"ProBus\"], color: \"#66edff\" },\n \"Education + Health Services\": { fields: [\"EduHea\"], color: \"#66edff\" },\n \"Leisure + Hospitality\": { fields: [\"LeiHosp\"], color: \"#66edff\" },\n \"Other Services\": { fields: [\"OthServ\"], color: \"#66edff\" }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"work10 = FileAttachment(\"work10_v3.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"live10 = FileAttachment(\"live10_v3.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"neighborhood_block_overlap = FileAttachment(\n \"neighborhood_block_overlap_v3.geojson\"\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null