31:Ta17,map1 = { var style = { height: 600, margin: 20, barrio_stroke: "#000", barrio_stroke_width: 1, barrio_stroke_opacity: 1, zone_stroke: "#BBB", zone_stroke_width: 0.5, zone_stroke_opacity: 1 }; let projection = d3.geoMercator() .fitSize([width - style.margin * 2, style.height - style.margin * 2], barrio_geo); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, style.height]) .attr('width', width) .attr('height', style.height); const zone_map = svg.append('g') .attr("class", "zone-map") .attr("transform", `translate(${style.margin}, ${style.margin})`); const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "1rem") .style("background", "rgba(255,255,255,0.8)") .style("padding", "0.1rem 0.5rem") .style("color", "#000") .style("border-radius", "3px") .style("border", "1px solid #000"); let mouseover = function (d) { tooltip .style("visibility", "visible") .text("Zone " + d.properties.zone_id); d3.select(this) .style("fill", "#BBB"); } let mousemove = () => tooltip .style("top", (d3.event.pageY-10)+"px") .style("left",(d3.event.pageX+20)+"px"); let mouseout = function (d) { tooltip.style("visibility", "hidden"); d3.select(this).style("fill", "#FFF"); } zone_map.append("g") .selectAll("path") .data(zone_geo.features) .enter() .append("path") .attr("fill", "#FFF") .attr("stroke", style.zone_stroke) .attr("stroke-opacity", style.zone_stroke_opacity) .attr("stroke-width", style.zone_stroke_width) .attr("d", d3.geoPath().projection(projection)) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseout", mouseout); if(barrio_overlay === "Show Barrios") { let barrio_map = svg.append("g") .attr("class", "barrio-map") .attr("transform", `translate(${style.margin}, ${style.margin})`); barrio_map.append("g") .selectAll("path") .data(barrio_geo.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", style.barrio_stroke) .attr("stroke-opacity", style.barrio_stroke_opacity) .attr("stroke-width", style.barrio_stroke_width) .attr("d", d3.geoPath().projection(projection)); } return svg.node(); }32:T954,map2 = { var style = { height: 600, margin: 20, barrio_stroke: "#FFF", barrio_stroke_width: 1, barrio_stroke_opacity: 1, zone_stroke: "#FFF", zone_stroke_width: 0, zone_stroke_opacity: 0.5 }; let projection = d3.geoMercator() .fitSize([width - style.margin * 2, style.height - style.margin * 2], barrio_geo); let colorScale = d3.scaleOrdinal(d3.schemeSet2) .domain(rubro_map.unique); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, style.height]) .attr('width', width) .attr('height', style.height); const zone_map = svg.append('g') .attr("class", "zone-map") .attr("transform", `translate(${-width / 6}, ${style.margin})`); zone_map.append("g") .selectAll("path") .data(zone_geo.features) .enter() .append("path") .attr("fill", d => colorScale(rubro_map.by_zone[d.properties.zone_id])) .attr("stroke", style.zone_stroke) .attr("stroke-opacity", style.zone_stroke_opacity) .attr("stroke-width", style.zone_stroke_width) .attr("d", d3.geoPath().projection(projection)); if(barrio_overlay2 === "Show Barrios") { let barrio_map = svg.append("g") .attr("class", "barrio-map") .attr("transform", `translate(${-width / 6}, ${style.margin})`); barrio_map.append("g") .selectAll("path") .data(barrio_geo.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", style.barrio_stroke) .attr("stroke-opacity", style.barrio_stroke_opacity) .attr("stroke-width", style.barrio_stroke_width) .attr("d", d3.geoPath().projection(projection)); } const legend = svg.append("g") .attr("class", "chart-legend") .attr("transform", `translate(${width / 2 + 150}, ${style.height / 2 - 115})`); const legend_items = legend.selectAll("g") .data(rubro_map.unique) .enter() .append("g") .attr("class", "legend-item") legend_items.append("circle") .attr("cx", 0) .attr("cy", (d, i) => i * 25) .attr("r", 7) .attr("fill", d => colorScale(d)) legend_items.append("text") .attr("dy", "0.35em") .attr("font-size", "0.75em") .attr("x", 15) .attr("y", (d, i) => i * 25) .text(d => d); return svg.node(); }33:Te02,lineChart = function (data, style) { const dimension = { width: width+200, height: style.height, margin: style.margin } let xDomain = ["0", "1", "2", "3", "4", "5"]; let xScale = d3.scalePoint() .domain(xDomain) .range([dimension.margin, width - dimension.margin]); let yScale = d3.scalePow() .exponent(1) .domain([25, 100]).nice() .range([dimension.height - dimension.margin, dimension.margin]) let xAxis = d3.axisBottom() .scale(xScale) let yAxis = d3.axisLeft() .scale(yScale) let line = d3.line() .curve(d3.curveNatural) .x(d => xScale(d.x)) .y(d => yScale(d.y)); let mouseover = function(d) { d3.select("#tooltip") .text(d.rubro); d3.selectAll(".chart-lines path") .attr("stroke", "#CCC"); d3.select(this) .attr("stroke", "#000") .attr("stroke-width", 5); var points = d3.select(".chart-points") .selectAll("circle") .data(d.data) .enter(); points.append("line") .attr("x1", d => xScale(d.x)) .attr("x2", d => xScale(d.x)) .attr("y1", d => yScale(d.y)) .attr("y2", d => yScale(20)) .attr("stroke", "#DDD") .attr("stroke-dasharray", "5 5"); points.append("line") .attr("x1", d => xScale("0")) .attr("x2", d => xScale(d.x)) .attr("y1", d => yScale(d.y)) .attr("y2", d => yScale(d.y)) .attr("stroke", "#DDD") .attr("stroke-dasharray", "5 5"); points.append("circle") .attr("fill", "black") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 5); points.append("text") .attr("x", d => xScale(d.x) - 5) .attr("y", d => yScale(d.y) + 15) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-size", "0.75em") .text(d => d.y.toFixed(1)); } let mouseout = function(d) { d3.select("#tooltip").text(""); d3.selectAll(".chart-lines path") .attr("stroke", style.stroke) .attr("stroke-width", style.stroke_width); d3.select(".chart-points").selectAll("*").remove(); } const svg_plot = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]) svg_plot.append("text") .attr("id", "tooltip") .attr("text-anchor", "middle") .attr("font-size", "1rem") .attr("x", 3 * dimension.width / 4) .attr("y", dimension.height / 4) .attr("fill", style.fill); svg_plot.append('g') .attr('transform', `translate(0, ${dimension.height - dimension.margin})`) .call(xAxis); svg_plot.append('g') .attr('transform', `translate(${dimension.margin}, 0)`) .call(yAxis); const points = svg_plot.append("g") .attr("class", "chart-points"); const paths = svg_plot.append("g") .attr("class", "chart-lines") .selectAll("path") .data(data) .enter(); paths.append("path") .attr("fill", "none") .attr("d", d => line(d.data)) .attr("stroke", d=>colorScale(d.data[5].y)) .attr("stroke-width", style.stroke_width) .attr("fill-opacity", 0) .style("mix-blend-mode", "multiply") //.on("mouseenter", mouseover) //.on("mouseleave", mouseout) ; paths.append("text") .attr("text-anchor", "start") .attr("font-size", "11px") .attr("x", d=>xScale(d.data[5].x)+5) .attr("dy", 4) .attr("y", d=>{ return yScale(d.data[5].y)}) .attr("fill", d=>colorScale(d.data[5].y)) .text(d=>d.rubro+" (" + d3.format(".3s")(d.data[5].y)+"%)") ; return svg_plot.node(); }34:T5d5,{ var col_width = width / 3, row_height = col_width + 150; var openings = drawOpenClose(zone_turnover, col_width, "Openings", [1, 5], "openings"), closings = drawOpenClose(zone_turnover, col_width, "Closings", [1, 5], "closings"), net = drawOpenClose(zone_turnover, col_width, "Net", [-2, 5], "net"), unique = getUnique(zone_turnover); let colorScale = d3.scaleOrdinal(d3.schemeSet2) .domain(unique); const container = d3.select(DOM.svg(width, row_height)); let map = container.append("g") .selectAll("g") .data([openings, closings, net]) .enter(); [openings, closings, net].forEach(function(d, i) { container.append("g") .attr("transform", `translate(${i * col_width}, ${15})`) .node() .appendChild(d); }); const legend = container.append("g") .attr("class", "chart-legend") .attr("transform", `translate(${0}, ${row_height - 30})`); const legend_items = legend.selectAll("g") .data(unique) .enter() .append("g") .attr("class", "legend-item") legend_items.append("g") .append("circle") .attr("cx", (d, i) => (i+1) * width / 6) .attr("cy", 0) .attr("r", 7) .attr("fill", d => colorScale(d)) legend_items.append("text") .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.65em") .attr("x", (d, i) => (i+1) * width / 6) .attr("y", 15) .text(d => d); return container.node(); }35:Tb8b,drawMiniMap = function (data, max_width, color, title) { const geoJson = zone_geo; const style = { stroke: "#FFF", stroke_width: 0 }; const dimension = { width: max_width, height: max_width + 100, margin: max_width / 25 }; let projection = d3.geoMercator() .fitSize([dimension.width - dimension.margin * 2, dimension.height - dimension.margin * 2], geoJson); let opacityScale = d3.scaleLinear() .domain(data.domain) .range([0.15, 1]); const svg = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]) .attr("width", dimension.width) .attr("height", dimension.height); svg.node().appendChild(svgGradientDefs(["white", "black"], "mainGradient")); const zone_map = svg.append('g') .attr("class", "zone-map") .attr("transform", `translate(${dimension.margin}, ${dimension.margin})`); zone_map.append("g") .selectAll("path") .data(zone_geo.features) .enter() .append("path") .attr("fill", color) .attr("opacity", d => opacityScale(data.by_zone[d.properties.zone_id])) .attr("stroke", style.stroke) .attr("stroke-width", style.stroke_width) .attr("d", d3.geoPath(projection)); if(mini_overlay === "Show Barrios") { let barrio_map = svg.append("g") .attr("class", "barrio-map") .attr("transform", `translate(${dimension.margin}, ${dimension.margin})`); barrio_map.append("g") .selectAll("path") .data(barrio_geo.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-opacity", 0.75) .attr("stroke-width", 0.5) .attr("d", d3.geoPath().projection(projection)); } svg.append("g") .attr("class", "chart-title") .append("text") .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("transform", `translate(${dimension.width / 2}, ${dimension.margin})`) .attr("font-size", "1.05em") .text(title); const legend = svg.append("g") .attr("class", "chart-legend") .attr("transform", `translate(${dimension.width - 130}, ${dimension.height - 80})`); legend.append("rect") .attr("x", 0) .attr("y", 0) .attr("rx", 3) .attr("height", 10) .attr("width", 100) .attr("fill", "url(#mainGradient)"); legend.append("text") .attr("transform", `translate(15, 20)`) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.75em") .text(data.domain[1] > 999 ? data.domain[0].toFixed(0) : data.domain[0].toFixed(2)); legend.append("text") .attr("transform", `translate(95, 20)`) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.75em") .text(data.domain[1] > 999 ? data.domain[1].toFixed(0) : data.domain[1].toFixed(2)); return svg.node(); }36:T7ab,drawOpenClose = function (data, max_width, title, domain, prop) { const geoJson = zone_geo; const style = { stroke: "#FFF", stroke_width: 0 }; const dimension = { width: max_width, height: max_width + 100, margin: max_width / 25 }; let projection = d3.geoMercator() .fitSize([dimension.width - dimension.margin * 2, dimension.height - dimension.margin * 2], geoJson); let opacityScale = d3.scaleLinear() .domain(domain) .range([0.15, 1]); let colorScale = d3.scaleOrdinal(d3.schemeSet2) .domain(getUnique(data)); const svg = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]) .attr("width", dimension.width) .attr("height", dimension.height); const zone_map = svg.append('g') .attr("class", "zone-map") .attr("transform", `translate(${dimension.margin}, ${dimension.margin})`); zone_map.append("g") .selectAll("path") .data(zone_geo.features) .enter() .append("path") .attr("fill", function(d) { if (data[d.properties.zone_id] && data[d.properties.zone_id].hasOwnProperty(prop)) return colorScale(data[d.properties.zone_id][prop].rubro); else return "#F5F5F5"; }) .attr("opacity", function(d) { if (data[d.properties.zone_id] && data[d.properties.zone_id].hasOwnProperty(prop)) return opacityScale(data[d.properties.zone_id][prop].value); }) .attr("stroke", style.stroke) .attr("stroke-width", style.stroke_width) .attr("d", d3.geoPath(projection)); svg.append("g") .attr("class", "chart-title") .append("text") .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("transform", `translate(${dimension.width / 2}, ${dimension.margin})`) .attr("font-size", "1.05em") .text(title); return svg.node(); }37:Tb6b,drawGenderMap = function (data, max_width, title) { const geoJson = zone_geo; const style = { stroke: "#FFF", stroke_width: 0 }; const dimension = { width: max_width, height: max_width + 100, margin: max_width / 25 }; let cScale = d3.scaleLinear() .domain(data.domain).nice() .range([0, 1]); let projection = d3.geoMercator() .fitSize([dimension.width - dimension.margin * 2, dimension.height - dimension.margin * 2], geoJson); const svg = d3.create("svg") .attr("viewBox", [0, 0, dimension.width, dimension.height]) .attr("width", dimension.width) .attr("height", dimension.height); const zone_map = svg.append('g') .attr("class", "zone-map") .attr("transform", `translate(${dimension.margin}, ${dimension.margin})`); zone_map.append("g") .selectAll("path") .data(zone_geo.features) .enter() .append("path") .attr("fill", d => d3.interpolatePuOr(cScale(data.by_zone[d.properties.zone_id]))) .attr("stroke", style.stroke) .attr("stroke-width", style.stroke_width) .attr("d", d3.geoPath(projection)); if(gender_overlay === "Show Barrios") { let barrio_map = svg.append("g") .attr("class", "barrio-map") .attr("transform", `translate(${dimension.margin}, ${dimension.margin})`); barrio_map.append("g") .selectAll("path") .data(barrio_geo.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-opacity", 0.75) .attr("stroke-width", 1) .attr("d", d3.geoPath().projection(projection)); } svg.append("g") .attr("class", "chart-title") .append("text") .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("transform", `translate(${dimension.width / 2}, ${dimension.margin})`) .attr("font-size", "1.05em") .text(title); const scale = d3.interpolatePuOr; svg .node() .appendChild(svgGradientDefs([ scale(cScale.domain()[0]), scale(0.5), scale(cScale.domain()[1])], "legendGradient")); const legend = svg.append("g") .attr("class", "chart-legend") .attr("transform", `translate(${dimension.width - 180}, ${dimension.height - 100})`); legend.append("rect") .attr("x", 0) .attr("y", 0) .attr("rx", 3) .attr("height", 15) .attr("width", 150) .attr("fill", "url(#legendGradient)"); legend.append("text") .attr("transform", `translate(5, 25)`) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.75em") .text("+15% M"); legend.append("text") .attr("transform", `translate(145, 25)`) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.75em") .text("+15% F"); return svg.node(); }38:Tb5d,drawAgeMap = function (data, max_width, title) { const geoJson = zone_geo; var style = { height: 600, width: width, margin: 20, barrio_stroke: "#000", barrio_stroke_width: 1, barrio_stroke_opacity: 1, zone_stroke: "#BBB", zone_stroke_width: 0.5, zone_stroke_opacity: 1 }; let cScale = d3.scaleLinear() .domain(data.domain).nice() .range([0, 1]); let projection = d3.geoMercator() .fitSize([style.width - style.margin * 2, style.height - style.margin * 2], geoJson); const svg = d3.create("svg") .attr("viewBox", [0, 0, style.width, style.height]) .attr("width", style.width) .attr("height", style.height); const zone_map = svg.append('g') .attr("class", "zone-map") .attr("transform", `translate(${style.margin}, ${style.margin})`); zone_map.append("g") .selectAll("path") .data(zone_geo.features) .enter() .append("path") .attr("fill", d => d3.interpolateGreens(cScale(data.by_zone[d.properties.zone_id]))) .attr("stroke", style.stroke) .attr("stroke-width", style.stroke_width) .attr("d", d3.geoPath(projection)); if(age_overlay === "Show Barrios") { let barrio_map = svg.append("g") .attr("class", "barrio-map") .attr("transform", `translate(${style.margin}, ${style.margin})`); barrio_map.append("g") .selectAll("path") .data(barrio_geo.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-opacity", 0.75) .attr("stroke-width", 1) .attr("d", d3.geoPath().projection(projection)); } svg.append("g") .attr("class", "chart-title") .append("text") .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("transform", `translate(${style.width / 2}, ${style.margin / 2})`) .attr("font-size", "1.05em") .text(title); const scale = d3.interpolateGreens; svg.node().appendChild(svgGradientDefs([scale(0), scale(0.5), scale(1)], "ageGradient")); const legend = svg.append("g") .attr("class", "chart-legend") .attr("transform", `translate(${style.width / 2 + 60}, ${style.height - 100})`); legend.append("rect") .attr("x", 0) .attr("y", 0) .attr("rx", 3) .attr("height", 15) .attr("width", 150) .attr("fill", "url(#ageGradient)"); legend.append("text") .attr("transform", `translate(5, 25)`) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.75em") .text((cScale.domain()[0]*100).toFixed(0) + '%'); legend.append("text") .attr("transform", `translate(145, 25)`) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.75em") .text((cScale.domain()[1]*100).toFixed(0) + '%'); return svg.node(); }39:T5c7,sets = { var resident_pop = zoneSummary("POBLACION_VIVIENTE"), residences = zoneSummary("CANTIDAD_HOGARES"); var home_density = { by_zone: {}, domain: [] }, pop_density = { by_zone: {}, domain: [] }, arr1 = [], arr2 = []; Object.keys(resident_pop.by_zone).map(function(d) { var feature = zone_geo.features.filter(dd => dd.properties.zone_id === d)[0], hd = +(resident_pop.by_zone[d] / residences.by_zone[d]).toFixed(3), pd = +(resident_pop.by_zone[d] / geoJsonArea.polygonArea(feature.geometry.coordinates)).toFixed(3); home_density.by_zone[d] = hd; arr1.push(hd); pop_density.by_zone[d] = pd; arr2.push(pd); }); home_density.domain = d3.extent(arr1); pop_density.domain = d3.extent(arr2); return [ { title: "Working Population", data: zoneSummary("POBLACION_TRABAJADORA") }, { title: "Resident Population", data: resident_pop }, { title: "Number of Homes", data: residences }, { title: "Residents per Home", data: home_density }, { title: "Population Density (sq. KM)", data: pop_density }, { title: "Average Rent (Locale)", data: zoneSummary("PRECIO_PROMEDIO_ALQUILER_LOCAL") }, { title: "Average Rent (Locale) (sq. M)", data: zoneSummary("SUPERFICIE_M2_PROMEDIO_ALQUILER") }, { title: "Average Sale (Locale)", data: zoneSummary("PRECIO_PROMEDIO_VENTA_LOCAL") }, { title: "Average Sale (Locale) (sq. M)", data: zoneSummary("SUPERFICIE_M2_PROMEDIO_VENTA") } ] }3a:T431,zone_turnover = { var self = {}; [...d3.rollup(raw_data.openings, v => d3.max(v, d => +d["NIVEL"]), d => d.MOC_ZONAS_ID, d => d.RUBRO)] .map(function(d) { var top_rubro = [...d[1]].sort((a, b) => d3.descending(a[1], b[1]))[0]; if (top_rubro[1] > 1) self[d[0]] = { "openings": { rubro: top_rubro[0], value: top_rubro[1] } } }); [...d3.rollup(raw_data.closings, v => d3.max(v, d => +d["NIVEL"]), d => d.MOC_ZONAS_ID, d => d.RUBRO)] .map(function(d) { var top_rubro = [...d[1]].sort((a, b) => d3.descending(a[1], b[1]))[0]; if (top_rubro[1] > 1) if (self[d[0]]) self[d[0]].closings = { rubro: top_rubro[0], value: top_rubro[1] }; else self[d[0]] = { "closings" : { rubro: top_rubro[0], value: top_rubro[1] } }; }); Object.keys(self).map(function(d) { var temp = self[d]; if (temp.openings && temp.closings && (temp.openings.rubro === temp.closings.rubro)) self[d].net = { rubro: temp.openings.rubro, value: temp.openings.value - temp.closings.value}; }); return self; }3b:T47b,rubro_data = { var rubros = [...d3.group(raw_data.rubros, d => d["RUBRO"]).keys()], self = {}; var die_out = [ { duration: "1", data: rubroMean("SUP_MENOS_1") }, { duration: "2", data: rubroMean("SUP_ENTRE_1_Y_2") }, { duration: "3", data: rubroMean("SUP_ENTRE_2_Y_3") }, { duration: "4", data: rubroMean("SUP_ENTRE_3_Y_4") }, { duration: "5", data: rubroMean("SUP_ENTRE_4_Y_5") } ] rubros.forEach(function(rubro) { self[rubro] = {}; self[rubro].risk_level = rubroMean("NIVEL_RIESGO").get(rubro); self[rubro].growth = rubroMean("INDICE_CRECIMIENTO").get(rubro); self[rubro].stability = rubroMean("INDICE_ESTABILIDAD").get(rubro); self[rubro].openings = rubroMean("INDICE_APERTURA").get(rubro); self[rubro].closings = rubroMean("INDICE_CIERRE").get(rubro); self[rubro].average_billing = rubroMean("FACTURACION_PROM_ACTUAL").get(rubro); self[rubro].longevity = rubroMean("INDICE_SUPERVIVENCIA").get(rubro); self[rubro].die_out = {}; die_out.forEach(function(d) { self[rubro].die_out[d.duration] = d.data.get(rubro); }); }); return self; }3c:T583,geoJsonArea = { /* Was too lazy to figure out how to import geojson-area package, it wasn't working. So I took what I needed. Credit to the folks at mapbox. */ var g = {}; function rad(_) { return _ * Math.PI / 180; } function ringArea(coords) { var p1, p2, p3, lowerIndex, middleIndex, upperIndex, i, area = 0, coordsLength = coords.length; if (coordsLength > 2) { for (i = 0; i < coordsLength; i++) { if (i === coordsLength - 2) { lowerIndex = coordsLength - 2; middleIndex = coordsLength -1; upperIndex = 0; } else if (i === coordsLength - 1) { lowerIndex = coordsLength - 1; middleIndex = 0; upperIndex = 1; } else { lowerIndex = i; middleIndex = i+1; upperIndex = i+2; } p1 = coords[lowerIndex]; p2 = coords[middleIndex]; p3 = coords[upperIndex]; area += ( rad(p3[0]) - rad(p1[0]) ) * Math.sin( rad(p2[1])); } area = area * 6378137 * 6378137 / 2; } return area; } g.polygonArea = function(coords) { var area = 0; if (coords && coords.length > 0) { area += Math.abs(ringArea(coords[0])); for (var i = 1; i < coords.length; i++) { area -= Math.abs(ringArea(coords[i])); } } return area / 1e6; } return g; }3d:[{"id":"8f1c866b5f494e290e5a822ae21931d3833b7c151e5026b0cf3d5a377c9575e3d43781b1dade084d51525728b1bea76c2e5c204541660c2aa703b38d80de060b","href":"https://static.observableusercontent.com/files/8f1c866b5f494e290e5a822ae21931d3833b7c151e5026b0cf3d5a377c9575e3d43781b1dade084d51525728b1bea76c2e5c204541660c2aa703b38d80de060b","name":"zonas.geo.json","type":"application/json","lastModified":1601859863800.205,"size":764104},{"id":"60f986ff948f56b45e43f8b243ba0684d84e512b28519ba635461dda745c6af40c6b456da9fbe29587c83e2db20b00cfcfc88fa917a1ed3d1b6a9b6eb8875a75","href":"https://static.observableusercontent.com/files/60f986ff948f56b45e43f8b243ba0684d84e512b28519ba635461dda745c6af40c6b456da9fbe29587c83e2db20b00cfcfc88fa917a1ed3d1b6a9b6eb8875a75","name":"ba_barrios.geo.json","type":"application/json","lastModified":1601859863800.205,"size":656388},{"id":"322f522e12905b9eb2759c327b7a7a3bd29b364438c319dc5e997a193a896a8b365f0170b49791af02593d133ffb62a88fc2c4f39a06f6d489985a1b97e137df","href":"https://static.observableusercontent.com/files/322f522e12905b9eb2759c327b7a7a3bd29b364438c319dc5e997a193a896a8b365f0170b49791af02593d133ffb62a88fc2c4f39a06f6d489985a1b97e137df","name":"cierre.csv","type":"text/csv","lastModified":1601859863800.205,"size":99182},{"id":"1d6728e94e45691ed1649ef8364ae3a3ffbee209e2bfa88a28ef502a35cfb7210a129602b6b2bfe64fac7eda3c178f54db3cd00372299cf5c44f998ee6a5ed7f","href":"https://static.observableusercontent.com/files/1d6728e94e45691ed1649ef8364ae3a3ffbee209e2bfa88a28ef502a35cfb7210a129602b6b2bfe64fac7eda3c178f54db3cd00372299cf5c44f998ee6a5ed7f","name":"apertura.csv","type":"text/csv","lastModified":1601859863800.205,"size":166454},{"id":"2d9c2a7bc2eb969882973103af9c33d7950bad5eb52a9828b004261bc8a9681491126a229c8ed8db80b17ab26a3e5d71176bd632a97803a5d10c109a074cdb31","href":"https://static.observableusercontent.com/files/2d9c2a7bc2eb969882973103af9c33d7950bad5eb52a9828b004261bc8a9681491126a229c8ed8db80b17ab26a3e5d71176bd632a97803a5d10c109a074cdb31","name":"demografia.csv","type":"text/csv","lastModified":1601859863800.205,"size":70750},{"id":"71879a2cc8be44341c3e223a7f225779d69fff7b3957608f589cedf8ac078465a505f439b27915ef7628da3b935a1d52617cdebca7f6d57ba3e4c2528b5dfebc","href":"https://static.observableusercontent.com/files/71879a2cc8be44341c3e223a7f225779d69fff7b3957608f589cedf8ac078465a505f439b27915ef7628da3b935a1d52617cdebca7f6d57ba3e4c2528b5dfebc","name":"rubros.csv","type":"text/csv","lastModified":1601859863800.205,"size":327917},{"id":"d32568b1d3c68315522fd7fe72886f831aeec9269b01dcd00be6146ef5b1ea90f247f87d14afd59a8d661876a5b14959de1d908ef4111f9bae35310d41eb8364","href":"https://static.observableusercontent.com/files/d32568b1d3c68315522fd7fe72886f831aeec9269b01dcd00be6146ef5b1ea90f247f87d14afd59a8d661876a5b14959de1d908ef4111f9bae35310d41eb8364","name":"zonas.csv","type":"text/csv","lastModified":1601859863800.205,"size":31269},{"id":"1d6728e94e45691ed1649ef8364ae3a3ffbee209e2bfa88a28ef502a35cfb7210a129602b6b2bfe64fac7eda3c178f54db3cd00372299cf5c44f998ee6a5ed7f","href":"https://static.observableusercontent.com/files/1d6728e94e45691ed1649ef8364ae3a3ffbee209e2bfa88a28ef502a35cfb7210a129602b6b2bfe64fac7eda3c178f54db3cd00372299cf5c44f998ee6a5ed7f","name":"apertura@1.csv","type":"text/csv","lastModified":1601861667487.783,"size":166454},{"id":"322f522e12905b9eb2759c327b7a7a3bd29b364438c319dc5e997a193a896a8b365f0170b49791af02593d133ffb62a88fc2c4f39a06f6d489985a1b97e137df","href":"https://static.observableusercontent.com/files/322f522e12905b9eb2759c327b7a7a3bd29b364438c319dc5e997a193a896a8b365f0170b49791af02593d133ffb62a88fc2c4f39a06f6d489985a1b97e137df","name":"cierre@1.csv","type":"text/csv","lastModified":1601861657233.621,"size":99182}] 2f:{"title":"Industry, Pricing, Opportunity","cells":[{"id":0,"value":"md`# Industry, Pricing, _Opportunity_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`### Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`Being an expat implies a certain level of baseline ignorance. I'm tired of asking _Where do I need to go to do X or buy Y?_ Maybe we can figure this out.\n\nThe BA City Government separates the city into 161 distinct commercial zones and [provides some basic data](https://data.buenosaires.gob.ar/dataset/mapa-oportunidades-comerciales-moc) about demographics and businesses which operate within each zone. **Data as of July 2017**.\n\n_Note: There will be a lot of maps. **So many maps.** Because these zones are laid out by the city and not known to the layperson, to use them as columns on a bar chart, for example, would mean very little_\n\nSome of the following graphics are interactive. Mouse over them for details.\n\nFirst, let's get an idea of how the zones are laid out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof barrio_overlay = select([\"Show Barrios\", \"Hide Barrios\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`Okay, all in all pretty evenly sized and spaced, and they _mostly_ (but not _always_) respect neighborhood boundaries.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"md`--- \n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`### Basics: Population, Density, Housing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"viewof mini_overlay = select([\"Show Barrios\", \"Hide Barrios\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"{\n \n var i = 0,\n cols = 3,\n rows = Math.ceil(sets.length / cols),\n col_width = width / cols,\n row_height = col_width + 150;\n \n const container = d3.select(DOM.svg(width, rows * row_height));\n \n d3.range(0, rows).map(function(row) {\n d3.range(0, cols).map(function(col) {\n\n if (i < sets.length) {\n \n var set = sets[i],\n map = container\n .append(\"g\")\n .attr(\"transform\", `translate(${col * col_width}, ${row * row_height})`),\n viz = drawMiniMap(set.data, col_width, \"black\", set.title),\n node = map.node();\n\n node.appendChild(viz);\n\n } i++;\n \n });\n });\n \n return container.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"md`### Age and Gender`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"md`Who's where? \n\nThe city has a surplus of female residents (**${(resident_gender.get(\"M\") / (resident_gender.get(\"H\") + resident_gender.get(\"M\"))).toFixed(2)*100}%**), but men are the majority of the working population (**${(working_gender.get(\"H\") / (working_gender.get(\"H\") + working_gender.get(\"M\"))).toFixed(2)*100}%**).\n\n_Notes:_\n\n* _In this dataset, only male and female gender identities appear._\n* _I have deliberately excluded Zona 8 (Costanera Sur) as it is a very clear outlier._\n\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1767,"value":"viewof gender_overlay = select([\"Show Barrios\", \"Hide Barrios\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"{\n \n var col_width = width / 2,\n row_height = col_width + 150;\n \n const container = d3.select(DOM.svg(width, row_height));\n \n var resident = { data: resident_fem_surplus_pct, title: \"Resident Gender\" },\n worker = { data: working_fem_surplus_pct, title: \"Worker Gender\" };\n \n let map = container.append(\"g\").attr(\"fill\", \"white\")\n .selectAll(\"g\")\n .data([resident_fem_surplus_pct, working_fem_surplus_pct])\n .enter();\n \n [resident, worker].forEach(function(d, i) {\n container.append(\"g\")\n .attr(\"transform\", `translate(${i * col_width}, ${15})`)\n .node()\n .appendChild(drawGenderMap(d.data, col_width, d.title));\n });\n\n const legend = container.append(\"g\")\n .attr(\"class\", \"chart-legend\")\n .attr(\"transform\", `translate(${0}, ${row_height - 30})`);\n \n return container.node();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"viewof age_bracket = {\n const dd3 = select({\n title: \"Select an Age Bracket\",\n options: [\n { label: \"0-10\", value: \"[0-10)\" },\n { label: \"10-20\", value: \"[10-20)\" },\n { label: \"20-30\", value: \"[20-30)\" },\n { label: \"30-40\", value: \"[30-40)\" },\n { label: \"40-50\", value: \"[40-50)\" },\n { label: \"50-60\", value: \"[50-60)\" },\n { label: \"60+\", value: \"[60-INF)\" }\n ],\n value: \"[20-30)\"\n });\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"viewof age_overlay = select([\"Show Barrios\", \"Hide Barrios\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1846,"value":"md`Residents by age group as a percentage of the overall population of a given zone.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1813,"value":"drawAgeMap(by_age_group, width, \"Residents by Age Group: \" + age_bracket)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1884,"value":"md`There are a _lot_ of older people in this city. It probably behooves me to generate a histogram of the age groups, but I'm already very tired of manipulating this dataset. Keep your eye on the legend as you use the above graph, that's all.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"md`
\n### Vanity City: Fashion & Cosmetics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"md`Map below shows the predominant \"Industry\" in each Commercial Zone. I take this data with a grain of salt, because I think the city's attempt to boil down all (legal) commercial activity into 18 industries is reductive, to put it lightly. Of those 18, there are only 9 unique predominant industries.\n\nIt's unclear how this measure is derived ultimately (predominant and _least_ predominant industry are published outright), as perhaps 10 small clothing shops count for a lot more than a massive supermarket with 100x the revenue.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"viewof barrio_overlay2 = select([\"Show Barrios\", \"Hide Barrios\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"md`Nonetheless, some of this makes a lot of sense: \n\n* Go to Costanera for Street Food. \n* Puerto Madero is full of fancy restaurants. \n* We see concentrations of Salud in the neighborhoods where large hospitals are located (Hospital Aleman, Hospital Italiano).\n* There's a concentration of Kioscos and Loterias near what I assume to be the Villa 31.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"md`
\n### Safe Bets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"md`Percentage of locales by rubro still open after x amount of years. \n\nMouseover for details.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"{\n\n var data = Object.keys(rubro_data).map(function(d) {\n rubro_data[d].die_out[\"0\"] = 0;\n var t = { rubro: d, data: [] },\n die_out = rubro_data[d].die_out,\n stack = d3.stack().keys(Object.keys(die_out))([die_out]);\n Object.keys(die_out).filter(d => d !== \"5+\").forEach(function (k, i) {\n t.data.push({ x: k, y: 100 - stack[i][0][1] });\n }); return t;\n }); \n \n return lineChart(data, {\n height: 800,\n margin: 40,\n stroke: \"#000\",\n stroke_width: 2\n });\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1938,"value":"colorScale = d3.scaleOrdinal(d3.schemeDark2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1152,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1634,"value":"md`In some ways this makes sense: \n* Non-essential (highly elastic) goods and services have less longevity, inertia, staying-power.\n* Comida al Paso has a relatively short lifespan.\n\nIn other ways I'm left with some curiosities: \n\n* Carnes y Verduras are one category, whereas Supermercados y Almacenes is another, and Fiambrerias y Dieteticas entirely another. \n* Ferreterias y Construcción and Musica y Librerias have roughly the same staying power. So while the city is packed with clothing shops and pharmacies (cosmetics), we also seem to want to protect those providers of culture (music and books).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"md`
\n### Ups and Downs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"md`The opacity of the color grades the ranking (1-5) of the amount of openings or closings of businesses relative to the city-wide average, according to the city's publications. I calculated net for those zones where the predominant openings and closings were in the same rubro.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1874,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`### Chart Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1711,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"getUnique = function(data) {\n \n var all = [];\n Object.keys(data).forEach(function(d) {\n data[d].openings ? all.push(data[d].openings.rubro) : all.push(data[d].closings.rubro);\n }); \n \n return [...new Set(all)];\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`### Data & Manipulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1104,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"demographicSummary = function (column_name) {\n\n var temp = { by_zone: {}, domain: [] }, arr = [];\n \n Object.keys(zone_group).map(function(d) {\n var stat = d3.sum(zone_group[d].demographics, d => +d[column_name]);\n temp.by_zone[d] = stat; arr.push(stat);\n }) \n \n temp.domain = d3.extent(arr);\n return temp;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"zoneSummary = function(column_name) {\n var temp = { by_zone: {}, domain: []}, arr = [];\n raw_data.zones.forEach(function(d) {\n temp.by_zone[d[\"MOC_ZONAS_ID\"]] = isNaN(+d[column_name]) ? 0 : +d[column_name];\n arr.push(+d[column_name]);\n }); \n temp.domain = d3.extent(arr);\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"rubroMean = function(col) {\n return d3.rollup(raw_data.rubros, v => d3.mean(v, d => +d[col]), d => d.RUBRO);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"rubro_map = {\n var temp = { by_zone: {}, unique: [] }, arr = [];\n raw_data.zones.forEach(function(d) {\n temp.by_zone[d[\"MOC_ZONAS_ID\"]] = d[\"RUBRO_PREDOMINANTE\"];\n arr.push(d[\"RUBRO_PREDOMINANTE\"]);\n }); temp.unique = [...new Set(arr)]; \n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"raw_data = {\n var ssv = d3.dsvFormat(\";\");\n return {\n zones: ssv.parse(await FileAttachment(\"zonas.csv\").text()),\n rubros: ssv.parse(await FileAttachment(\"rubros.csv\").text()),\n demographics: ssv.parse(await FileAttachment(\"demografia.csv\").text()),\n openings: ssv.parse(await FileAttachment(\"apertura@1.csv\").text()),\n closings: ssv.parse(await FileAttachment(\"cierre@1.csv\").text())\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"zone_group = {\n \n let temp = {};\n \n raw_data.zones.forEach(function(d) {\n temp[d[\"MOC_ZONAS_ID\"]] = { \n zone: d,\n rubro: [],\n demographics: [],\n openings: [],\n closings: []\n };\n })\n \n raw_data.rubros.forEach(function(d) {\n temp[d[\"MOC_ZONAS_ID\"]].rubro.push(d);\n })\n \n raw_data.demographics.forEach(function(d) {\n temp[d[\"MOC_ZONAS_ID\"]].demographics.push(d);\n })\n \n raw_data.openings.forEach(function(d) {\n temp[d[\"MOC_ZONAS_ID\"]].openings.push(d);\n })\n \n raw_data.closings.forEach(function(d) {\n temp[d[\"MOC_ZONAS_ID\"]].closings.push(d);\n })\n \n return temp;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"barrio_geo = await FileAttachment(\"ba_barrios.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"zone_geo = await FileAttachment(\"zonas.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"by_age_group = {\n \n var temp = { by_zone: {}, domain: [] }, arr = [];\n [...resident_age_grp].map(function(d) {\n var zone_pop = sets[1].data.by_zone[d[0]],\n stat = d[1].get(age_bracket) / zone_pop;\n if (d[0] != \"8\") {\n temp.by_zone[d[0]] = stat;\n arr.push(stat);\n } \n });\n \n temp.domain = d3.extent(arr);\n temp.by_zone[\"8\"] = temp.domain[0] + ((temp.domain[1] - temp.domain[0]) / 2);\n \n return temp;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"resident_age_grp = d3.rollup(raw_data.demographics, \n v => d3.sum(v, d => +d[\"POBLACION_VIVIENTE\"]), \n d => d[\"MOC_ZONAS_ID\"], \n d => d[\"RANGO_ETARIO\"]);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1674,"value":"resident_gender = d3.rollup(raw_data.demographics, v => d3.sum(v, d => +d[\"POBLACION_VIVIENTE\"]), d => d[\"GENERO\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1678,"value":"working_gender = d3.rollup(raw_data.demographics, v => d3.sum(v, d => +d[\"POBLACION_TRABAJADORA\"]), d => d[\"GENERO\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"resident_fem_surplus_pct = {\n var temp = { by_zone: {}, domain: [] }, arr = [];\n var roll = [...d3.rollup(raw_data.demographics, \n v => d3.sum(v, d => +d[\"POBLACION_VIVIENTE\"]), \n d => d[\"MOC_ZONAS_ID\"], \n d => d[\"GENERO\"])];\n \n roll.forEach(function(d) {\n var resident_pop = d[1].get(\"H\") + d[1].get(\"M\");\n var prop_female = d[1].get(\"M\") / resident_pop;\n if (d[0] != \"8\") {\n temp.by_zone[d[0]] = prop_female;\n arr.push(prop_female);\n } temp.by_zone[\"8\"] = 0.5;\n }); \n \n temp.domain = [0.35, 0.65];\n \n return temp;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"working_fem_surplus_pct = {\n var temp = { by_zone: {}, domain: [] }, arr = [];\n var roll = [...d3.rollup(raw_data.demographics, \n v => d3.sum(v, d => +d[\"POBLACION_TRABAJADORA\"]), \n d => d[\"MOC_ZONAS_ID\"], \n d => d[\"GENERO\"])];\n \n roll.forEach(function(d) {\n var resident_pop = d[1].get(\"H\") + d[1].get(\"M\");\n var prop_female = d[1].get(\"M\") / resident_pop;\n if (d[0] != \"8\") {\n temp.by_zone[d[0]] = prop_female;\n arr.push(prop_female);\n } temp.by_zone[\"8\"] = 0.5;\n }); \n \n temp.domain = [0.35, 0.65];\n \n return temp;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1887,"value":"import {svgGradientDefs} from \"@luciyer/svg-gradients-chrome-safari\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}