29:null 2a:["$","title",null,{"children":"Miami to Mumbai: 48 Little Cities | Luc Iyer | Observable"}] 2f:T494,homicide_timing = { const svg = d3.create("svg"); var components = 3, pad = 20, dimensions = rowLayout(components, pad); var generated_components = [ RadialChart(radial_data.by_month, { width: dimensions.inner_width / components, margin: dimensions.half_margin, labelFunction: getMonth, title: "Month" }), RadialChart(radial_data.by_weekday, { width: dimensions.inner_width / components, margin: dimensions.half_margin, labelFunction: getWeekday, title: "Weekday" }), RadialChart(radial_data.by_hour, { width: dimensions.inner_width / components, margin: dimensions.half_margin, labelFunction: d => d, title: "Hour" }) ]; svg.attr("viewBox", [0, 0, dimensions.outer_width, dimensions.outer_height]); const cmp = svg .selectAll("g") .data(generated_components) .enter(); cmp.append(d => d.node()); cmp .selectAll("g.radial-chart") .attr("class", (_, i) => `component_${i + 1}`) .attr("transform", (_, i) => `translate(${(i * dimensions.outer_width) / components}, 0)`); return svg.node(); }30:T6b8,md`The Buenos Aires city government publishes data regarding "delitos," crimes. One such crime is _homicidio doloso_, specifically homicide with criminal intent. First, I filtered the data for the four years 2016 - 2019 (nearly half a million rows) to remove any incidents which did not meet the following condition: ~~~js tipo_delito === "Homicidio" && subtipo_delito === "Doloso" ~~~ I was left with 509 observations, 496 of which have data about the neighborhood (henceforth interchangeably referred to as _barrio_) where the crime occured and even include specific latitude and longitude coordinates. Next, I pulled in population data for each barrio as of 2010. The population has certainly grown in the last decade, but I do not want to manipulate this data to try to project that growth and risk _understating_ the homicide rate for any given barrio, so I leave this as a caveat, knowing that in all likelihood I'm _overstating_ the homicide rate. This to me is the more honest, cautious error to make. Next, I used a GeoJSON file of the neighborhoods of the city which includes as one of its feature properties a measure of square meters. I simply divided this by \`1e6 (1,000,000)\` to determine the area by square kilometer. These results were very close to other statistics I was able to find online. To calculate homicide rate I averaged the number of homicides per barrio per year, summing the data for 2016 - 2019 for each barrio and dividing by 4 (years), then dividing that number by the population of the barrio divided by \`1e5 (100,000)\`. This ultimately renders the "average" homicide rate per 100,000 residents for the years 2016 - 2019. See [summarized_data](#summarized_data) for details.`31:T26f5,ColorBar = function (color_scale, benchmarks, data, key1, key2) { var ColorBar = {}, defaults = { container: { height: 700, width: width, margin: 40 }, labels: { benchmark_space: 20, barrio_space: 75, padding: 5 }, map: { height: 650, width: 650, margin: 10, stroke: "#FFF", stroke_width: 1, stroke_opacity: 0.5, point_radius: 2, point_fill: "#FFF", point_opacity: 0.25, point_stroke: "#FFF", point_stroke_opacity: 1 } }; let projection = d3.geoMercator() .fitSize([defaults.map.width, defaults.map.height], barrio_geo); let c = d => projection([d.long, d.lat]); let barrio_list = (function () { var t = []; data.per_barrio.forEach((v, k, _) => { if(key2) t.push({ barrio: k, value: v[key1][key2] }) else t.push({ barrio: k, value: v[key1] }) }); return t.sort((a , b) => d3.ascending(a.value, b.value)); })(); let barrio_domain = (function () { var extent = d3.extent(barrio_list, d => d.value); return { min: extent[0], max: extent[1] }; })(); let barScale = d3.scaleSqrt() .domain([d3.min([barrio_domain.min, d3.min(benchmarks[key1], d => d.value)]), d3.max([barrio_domain.max, d3.max(benchmarks[key1], d => d.value)])]) .range([defaults.container.margin, defaults.container.height - defaults.container.margin]); let bar_domain = { min: barScale.domain()[0], max: barScale.domain()[1] }; let steps = d3.range(0, 20), color_array = steps.map((_,i) => d3[color_scale](i / (steps.length - 1))); ColorBar.setProperties = function(section, params) { Object.keys(params).map(function(d) { if (d in defaults[section]) defaults[section][d] = params[d]; else throw new Error('One or more parameters not accepted.'); }); } ColorBar.debug = function () { return { defaults }; } ColorBar.draw = function () { const svg = d3.create("svg"), component_container = svg.append("g"), full_bar_container = component_container.append("g"), color_bar_container = component_container.append("g"), benchmark_point_container = component_container.append("g"), barrio_point_container = component_container.append("g"), tick_container = component_container.append("g"), barrio_map = svg.append("g"), defs = svg.node().appendChild(svgGradientDefs(color_array, key1)); svg.select("linearGradient").attr("gradientTransform", "rotate(90)") svg .attr("class", "svg-bar") .attr("viewBox", [0, 0, defaults.container.width, defaults.container.height]); component_container.attr("transform", "translate(70, 0)"); full_bar_container .append("rect") .attr("x", defaults.container.margin) .attr("y", barScale(bar_domain.min)) .attr("width", 10) .attr("height", barScale(bar_domain.max) - barScale(bar_domain.min)) .attr("rx", 5) .attr("fill", "#DDD") .attr("stroke", "#DDD") .attr("stroke-width", 5); color_bar_container .append("rect") .attr("x", defaults.container.margin) .attr("y", barScale(barrio_domain.min)) .attr("width", 10) .transition() .duration(500) .attr("height", barScale(barrio_domain.max) - barScale(barrio_domain.min)) .attr("rx", 5) .attr("fill", `url(#${key1})`) .attr("stroke", `url(#${key1})`) .attr("stroke-width", 5); const barrio_points = barrio_point_container .selectAll("g") .data(barrio_list) .enter() .append("g") .attr("class", "barrio-point") .attr("id", d => cleanString(d.barrio)); barrio_points .append("path") .attr('d', (d, i) => { var source_x = defaults.container.margin + 5, source_y = barScale(d.value); var min = barScale(barScale.domain()[0]), ht = barScale(barScale.domain()[1]) - min, space = ht / barrio_list.length, target_x = defaults.container.margin + defaults.labels.barrio_space - defaults.labels.padding, target_y = min + (i * space); return d3.linkHorizontal()({ source: [source_x, source_y], target: [target_x, target_y] }) }) .attr('stroke', 'black') .attr("stroke-width", 0.5) .attr('fill', 'none'); barrio_points .append("circle") .attr("cx", defaults.container.margin + 5) .attr("cy", d => barScale(d.value)) .attr("r", 3) .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", 1); barrio_points .append("text") .attr("class", "benchmark-label") .attr("x", defaults.container.margin + defaults.labels.barrio_space) .attr("y", (d, i) => { var min = barScale(barScale.domain()[0]), ht = barScale(barScale.domain()[1]) - min, space = ht / barrio_list.length; return min + (i * space); }) .attr("dy", "0.35em") .text(d => toTitleCase(d.barrio)); const benchmark_points = benchmark_point_container .selectAll("g") .data(benchmarks[key1]) .enter() .append("g") .attr("class", "benchmark-point"); benchmark_points .append("line") .attr("x1", defaults.container.margin + 5) .attr("y1", d => barScale(d.value)) .attr("x2", defaults.container.margin - defaults.labels.benchmark_space + defaults.labels.padding - 5) .attr("y2", d => barScale(d.value)) .attr("stroke", "black") .attr("stroke-width", 1); benchmark_points .append("circle") .attr("cx", defaults.container.margin + 5) .attr("cy", d => barScale(d.value)) .attr("r", 3) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 1); benchmark_points .append("text") .attr("class", "benchmark-label") .attr("x", defaults.container.margin - defaults.labels.benchmark_space - 5) .attr("y", (d, i) => barScale(d.value)) .attr("text-anchor", "end") .attr("dy", "0.25em") .text(d => d.city); const ticks = tick_container .selectAll("g") .attr("class", "tick") .data(barScale.ticks(5)) .enter(); ticks .append("rect") .attr("class", "tick-bg") .attr("x", defaults.container.margin - defaults.labels.benchmark_space - 3) .attr("y", d => barScale(d) - 8) .attr("width", 18) .attr("height", 16) .attr("rx", 5) .attr("fill", "white") .attr("opacity", 0.5) .attr("stroke", "#000") .attr("stroke-width", 1); ticks .append("text") .attr("class", "tick-text") .attr("x", defaults.container.margin - defaults.labels.benchmark_space + 6) .attr("y", d => barScale(d)) .attr("text-anchor", "middle") .attr("dy", "0.35em") .text(d => d > 1000 ? d / 1e3 : d); barrio_map .attr("class", "barrio-map-container") .attr("transform", `translate(300, 30)`); barrio_map .selectAll("path") .data(barrio_geo.features) .enter() .append("path") .on("mouseover", function (d) { var barrio_id = cleanString(d.properties.barrio), datum = data.per_barrio.get(d.properties.barrio), el = svg.select(`#${barrio_id}`); svg.selectAll(".barrio-point") .attr("opacity", 0.25); el.attr("opacity", 1); if (key2) el.select("text") .text(`${toTitleCase(d.properties.barrio)} (${niceValue(datum[key1][key2])})`); else el.select("text") .text(`${toTitleCase(d.properties.barrio)} (${niceValue(Math.round(datum[key1]))})`); }) .on("mouseout", function (d) { var barrio_id = cleanString(d.properties.barrio), el = svg.select(`#${barrio_id}`); el.select("text").text(toTitleCase(d.properties.barrio)); svg.selectAll(".barrio-point") .attr("opacity", 1); }) .transition() .duration(500) .attr("fill", (d) => { var scaled, v = barScale.range([0, 1]); if (key2) scaled = v(data.per_barrio.get(d.properties.barrio)[key1][key2]); else scaled = v(data.per_barrio.get(d.properties.barrio)[key1]); return d3[color_scale](scaled); }) .attr("stroke", defaults.map.stroke) .attr("stroke-opacity", defaults.map.stroke_opacity) .attr("stroke-width", defaults.map.stroke_width) .attr("d", d3.geoPath().projection(projection)) .attr("opacity", 1) const points = barrio_map.append("g") .attr("class", "point-container"); if (key2) points .selectAll("circle") .data(homicide) .enter() .append("circle") .attr("cx", d => c(d)[0]) .attr("cy", d => c(d)[1]) .transition() .delay((d, i) => i * 10) .attr("r", defaults.map.point_radius) .attr("fill", defaults.map.point_fill) .attr("fill-opacity", defaults.map.point_opacity) .attr("stroke", defaults.map.point_stroke) .attr("stroke-opacity", defaults.map.point_stroke_opacity); return svg.node(); } return ColorBar; }32:Tb2f,RadialChart = function(data, style) { var pi = Math.PI, rad = pi/180, deg = 180/pi, label_gap = pi/32; var center = { x: style.width / 2, y: style.width / 2 }, max_radius = (style.width - style.margin) / 2, inner_radius = max_radius / 2; let angleScale = d3.scaleBand() .domain(data.map(d => d.bin)) .range([label_gap, 2*pi - label_gap]); let radiusScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]).nice() .range([inner_radius, max_radius]); let arc = d3.arc() .innerRadius(inner_radius) .outerRadius(d => radiusScale(d.value)) .startAngle(d => angleScale(d.bin)) .endAngle(d => angleScale(d.bin) + angleScale.bandwidth()) .padAngle(0.03); const group = d3.create("svg:g") .attr("class", "radial-chart") var axes = group .append("g") .attr("class", "segment-container") .selectAll("circle") .data(radiusScale.ticks(3)) .enter(); axes .append("circle") .attr("r", d => radiusScale(d)) .attr("cx", center.x) .attr("cy", center.y) .attr("fill", "none") .attr("stroke", "#DDD"); axes .append("text") .attr("class", "radial-label") .attr("transform", d => `translate(${center.x}, ${(center.y - radiusScale(d))})`) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(d => d); group .append("g") .attr("class", "radial-label") .attr("transform", `translate(${center.x}, ${center.y})`) .selectAll("text") .data(data) .enter() .append("text") .attr("transform", d => { var angle = angleScale(d.bin) + angleScale.bandwidth() / 2, coord = { x: Math.sin(angle), y: Math.cos(angle) }; return `translate(${(inner_radius - 10) * coord.x}, ${(inner_radius - 10) * -coord.y}) rotate(${angle * deg - pi})`; }) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", "0.9em") .text(d => style.labelFunction(d.bin)); group .append("g") .attr("class", "segment-container") .attr("transform", `translate(${center.x}, ${center.y})`) .selectAll("path") .data(data) .enter() .append("path") .transition() .delay((_, i) => i * (1000 / data.length)) .attr("d", arc) .attr("fill", d3.interpolateReds(0.75)) .attr("opacity", 0.70) .attr("stroke-width", 2); group.append("g") .attr("class", "chart-title") .attr("transform", `translate(${center.x}, ${center.y})`) .append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", "0.8em") .text(style.title); return group; }33:T683,summarized_data = { // for each neighborhood, and for the city as a whole, return an object of this format: function makeObject (p, a) { return { population: p, area: a, population_density: p / a, homicides: { 2016 : 0, 2017: 0, 2018: 0, 2019: 0, total: 0 }, homicide_rates: { 2016 : 0, 2017: 0, 2018: 0, 2019: 0, average: 0 } }; } var n_years = 4, per_barrio = new Map(), city = makeObject(population.total, area.total), hb = homicide.filter(d => d.neighborhood !== ""), hby = d3.rollup(hb, v => v.length, d => d.neighborhood, d => d.year); population.per_barrio.forEach(function (value, key, _) { var barrio = makeObject(value, area.per_barrio.get(key)); if (hby.get(key) !== undefined) { var total = 0; hby.get(key).forEach(function (n_homicides, year, _) { city.homicides[year] += n_homicides; city.homicide_rates[year] += n_homicides / (city.population / 1e5); barrio.homicides[year] = n_homicides; barrio.homicide_rates[year] = n_homicides / (barrio.population / 1e5); total += n_homicides; }); city.homicides.total += total; city.homicide_rates.average += (total / n_years) / (city.population / 1e5); barrio.homicides.total = total; barrio.homicide_rates.average = (total / n_years) / (barrio.population / 1e5); } per_barrio.set(key, barrio); }); return { per_barrio, city }; }34:[{"id":"fdb7612977e0ed0b39f28e8b856f5a94717da0fd0999ba496d37f1e0a1e4a132880580b586ef9de62ba9332d94ce0cc4ab9b2d0695f32e66cbde77ee3d0586d7","href":"https://static.observableusercontent.com/files/fdb7612977e0ed0b39f28e8b856f5a94717da0fd0999ba496d37f1e0a1e4a132880580b586ef9de62ba9332d94ce0cc4ab9b2d0695f32e66cbde77ee3d0586d7","name":"barrio_pob_2010.csv","type":"text/csv","lastModified":1583731940795.38,"size":869},{"id":"60f986ff948f56b45e43f8b243ba0684d84e512b28519ba635461dda745c6af40c6b456da9fbe29587c83e2db20b00cfcfc88fa917a1ed3d1b6a9b6eb8875a75","href":"https://static.observableusercontent.com/files/60f986ff948f56b45e43f8b243ba0684d84e512b28519ba635461dda745c6af40c6b456da9fbe29587c83e2db20b00cfcfc88fa917a1ed3d1b6a9b6eb8875a75","name":"ba_barrios.geo.json","type":"application/json","lastModified":1583721976451.212,"size":656388},{"id":"719f84497ef176a319160b3972c8687b0f7c81da0291797ece2a892c305227856fb3ab5fb68f5e7d6db0c791fe7b06412c157d5326cf31b132ef5a6591a6a2d1","href":"https://static.observableusercontent.com/files/719f84497ef176a319160b3972c8687b0f7c81da0291797ece2a892c305227856fb3ab5fb68f5e7d6db0c791fe7b06412c157d5326cf31b132ef5a6591a6a2d1","name":"homicidio_doloso_2016-2019.csv","type":"text/csv","lastModified":1583771105342.313,"size":50398}] 2d:{"id":"47dff5d885aafd92","slug":"miami-to-mumbai-48-little-cities","title":"Miami to Mumbai: 48 Little Cities","thumbnail":"b4fc53e83b51455d04b5cc3be3abd1046bc1691b022c13cd5b7a179e5df19d74","access_level":"public","create_time":"$D2020-03-09T02:08:34.759Z","update_time":"$D2020-11-02T01:03:35.656Z","view_time":null,"first_public_time":"$D2020-03-12T05:01:21.693Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":"starter_2024"},"version":1389,"publish_version":1389,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null}],"members":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"491e67084cf0d3e8","slug":"buenos-aires","title":"Buenos Aires","owner":{"id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer"}},"type":"notebook","body":{"title":"Miami to Mumbai: 48 Little Cities","cells":[{"id":0,"value":"md`# Miami to Mumbai: 48 Little Cities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Introduction = md`\n
\n### Introduction\nAs is true all over the world, not every neighborhood is created equal. I thought it would be interesting to get a view of how the different _barrios_ of Argentina's capital compare to cities I'm familiar with in the USA and elsewhere in the world. \n\nSpecifically, I'm going to look at two measures: **Homicide Rate** (per 100,000 people), and **Population Density** (per square kilometer). [Methodology](#Methodology) for more details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"Visualizations = md`\n
\n### Visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`\n
\n**Homicide Rates by Barrio**, _annual homicides per 100,000 residents._\n\n###### Overlay of latitude and longitude points for each homicide, 2016 - 2019.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"homicide_rates = {\n \n var chart = new ColorBar('interpolateReds', benchmark_data, summarized_data, \"homicide_rates\", \"average\");\n return chart.draw();\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"md`Interesting that Puerto Madero (the wealthiest, most secure \"neighborhood\") would be relative to Chacarita, my old barrio with it's little villa. We can see pretty clearly the \"_medialuna sur_\" - Constitución, Barracas, Nueva Pompeya, Villa Soldati, and Bajo Flores.\n\nRetiro's very high rate is very clearly a function of its [_villa miseria_](https://en.wikipedia.org/wiki/Villa_miseria) (informal, unsafe encampment, slum), in Buenos Aires, the Villa 31. In fact, we can see clusterings of points (individual homicides) around villas - note clusters around Constitución and Villas 31, 21-24, 1-11-14.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"md`\n
\n**Homicides from 2016-2019**, _by Month, Weekday, and Hour._\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"md`As we can see from the above radial charts, weekends during late hours seem to correspond to the most \"homicidal\" times.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"md`\n
\n**Population Density by Barrio**, _residents per square kilometer, scale in thousands._\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"population_density = {\n var chart = new ColorBar('interpolateGreens', benchmark_data, summarized_data, \"population_density\");\n return chart.draw();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"md`Almagro and Balvanera are an interesting case of bordering, similarly sized, similarly populated, similarly dense barrios with vastly different homicide rates. Unfortunately, at this higher level of \"barrio\" we can't really get a good sense of whether there is a relationship between density and the homicide rate.\n\nI assumed that perhaps you'd see a relationship since we do see clusterings around the villas, which are densely populated. However, that density is then diluted by the surrounding areas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"Methodology = md`\n
\n### Methodology`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"References = md`Values for benchmark homicide rates and population densities came from the following Wikipedia pages.\n\n* [Crime Rates in US Cities](https://en.wikipedia.org/wiki/List_of_United_States_cities_by_crime_rate)\n* [Population Density of Cities Proper](https://en.wikipedia.org/wiki/List_of_cities_proper_by_population_density)\n* [Population Density of US Cities](https://en.wikipedia.org/wiki/List_of_United_States_cities_by_population_density)\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"rowLayout = function (n_components, m) {\n \n var t = {\n margin: m,\n half_margin: m / 2,\n outer_width: width,\n outer_height: width / 3\n }\n \n t.inner_width = t.outer_width - (2 * t.margin);\n t.inner_height = t.outer_height - (2 * t.margin);\n \n return t;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"function toTitleCase(str) {\n return str.replace(\n /\\w\\S*/g,\n function(txt) {\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"niceValue = function (x) {\n return (Math.round(100 * x + Number.EPSILON) / 100).toLocaleString(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"cleanString = function (str) {\n return str.replace(new RegExp(/\\s/, 'g'), \"_\").replace(\".\", \"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"getWeekday = (x) => {\n return [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"][x];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"getMonth = (x) => {\n return [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"][x];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"radial_data = {\n\n var rollups = [\n d3.rollup(homicide, v => v.length, d => new Date(d.fecha).getDay()),\n d3.rollup(homicide, v => v.length, d => new Date(d.fecha).getMonth()),\n d3.rollup(homicide, v => v.length, d => +d.franja_horaria)\n ];\n \n function toArray (rollup) {\n return [...rollup.entries()]\n .map((d) => ({ bin: d[0], value: d[1] }))\n .filter(d => !isNaN(d.bin))\n .sort((a, b) => d3.ascending(a.bin, b.bin));\n }\n \n return {\n by_weekday: toArray(rollups[0]),\n by_month: toArray(rollups[1]),\n by_hour: toArray(rollups[2]),\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"barrio_geo = await FileAttachment(\"ba_barrios.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"population = {\n \n var per_barrio = new Map(),\n total = 0;\n \n d3.csvParse(await FileAttachment(\"barrio_pob_2010.csv\").text(), function(row) {\n per_barrio.set(row.BARRIO,+row.POBLACION);\n total += +row.POBLACION;\n });\n \n return { per_barrio, total };\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"area = {\n \n var per_barrio = new Map(),\n total = 0;\n \n barrio_geo.features.forEach(function(feature) {\n var sqkm = +feature.properties.area / 1e6;\n per_barrio.set(feature.properties.barrio, sqkm);\n total += sqkm;\n });\n \n return { per_barrio, total };\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"homicide = d3.csvParse(await FileAttachment(\"homicidio_doloso_2016-2019.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"benchmark_data = ({\n homicide_rates : [\n { city: \"Chicago\", value: 24.13 },\n { city: \"Philadelphia\", value: 20.06 },\n { city: \"Oakland\", value: 16.24 },\n { city: \"Las Vegas\", value: 12.60 },\n { city: \"San Francisco\", value: 6.35 },\n { city: \"Buenos Aires\", value: +summarized_data.city.homicide_rates.average.toFixed(2) },\n { city: \"Portland\", value: 3.70 }, \n { city: \"Austin\", value: 2.57 }\n ],\n population_density : [\n { city: \"Mumbai\", value: 32847 },\n { city: \"Paris\", value: 21498 },\n { city: \"Seoul\", value: 15763 },\n { city: \"Buenos Aires\", value: +summarized_data.city.population_density.toFixed(0) },\n { city: \"New York\", value: 10431 },\n { city: \"San Francisco\", value: 6659 },\n { city: \"Miami\", value: 4829 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-array@2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"import {svgGradientDefs} from \"@luciyer/svg-gradients-chrome-safari\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"