36:["$","title",null,{"children":"Title | zeaf | Observable"}] 3e:T77d,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; var mymap = L.map(container).setView([41.835832, -87.623177], 10); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiemVhZiIsImEiOiJjanZxdTNzOTIwbnFqNDlvejV5Z2theDh1In0.i5rEU42TIXyyy4frojTIIg', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoiemVhZiIsImEiOiJjanZxdTNzOTIwbnFqNDlvejV5Z2theDh1In0.i5rEU42TIXyyy4frojTIIg' }).addTo(mymap); function style(feature) { let color = "#000" if (factors[feature.properties.community] !== "") var iter = parseInt(feature.properties.area_numbe)-1; if (selFactor === "PER CAPITA INCOME ") color = colorPick2(factors[iter][selFactor], fmax, fmin); else color = colorPick(factors[iter][selFactor], fmax, fmin); return { fillColor: color, color: color, weight: 1, fillOpacity: 0.75 }; } function onEachFeature(feature, layer) { if (factors[feature.properties.community] !== "") { var iter = parseInt(feature.properties.area_numbe)-1; let value = factors[iter][selFactor]; // define the popup content let content = `

Area Name: ${factors[iter]["COMMUNITY AREA NAME"]}

${selFactor} ${value}

` // bind the popup to the layer layer.bindPopup(content); layer.on('mouseover', function (e) { this.openPopup(); }); layer.on('mouseout', function (e) { this.closePopup(); }); } } let areas = L.geoJson(areasData ,{style: style, onEachFeature: onEachFeature}).addTo(mymap); }3f:Tb53,// JavaScript source code weaponMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.6}px` }); yield container; var mymap = L.map(container).setView([41.835832, -87.623177], 10); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiemVhZiIsImEiOiJjanZxdTNzOTIwbnFqNDlvejV5Z2theDh1In0.i5rEU42TIXyyy4frojTIIg', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoiemVhZiIsImEiOiJjanZxdTNzOTIwbnFqNDlvejV5Z2theDh1In0.i5rEU42TIXyyy4frojTIIg' }).addTo(mymap); var data = districtData.sort((a, b) => (a.area > b.area) ? 1 : ((b.area > a.area) ? -1 : 0)); function style(feature) { let color = "#000" if(ch3){ var iter = parseInt(feature.properties.area_numbe-1); color = colorPick(weaponData[iter].number,1100,100); } else{ var iter = parseInt(feature.properties.area_numbe) - 1; console.log(data[iter]) color = colorPick(data[iter].number,35000,1000); } return { fillColor: color, color: color, weight: 1, fillOpacity: 0.75 }; } function onEachFeature(feature, layer) { if (feature.properties.community !== "") { if(ch3){ var iter = parseInt(feature.properties.area_numbe) - 1; let value = weaponData[iter].number; // define the popup content let content = `

Area Name: ${factors[iter]["COMMUNITY AREA NAME"]}

Number of weapon violations ${value}

` layer.bindPopup(content); } else { var iter = parseInt(feature.properties.area_numbe) - 1; let value = data[iter].number; // define the popup content let content = `

Area Name: ${factors[iter]["COMMUNITY AREA NAME"]}

Number of crimes ${value}

` layer.bindPopup(content); } // bind the popup to the layer layer.on('mouseover', function (e) { this.openPopup(); }); layer.on('mouseout', function (e) { this.closePopup(); }); } } let areas = L.geoJson(areasData, { style: style, onEachFeature: onEachFeature }).addTo(mymap); } 40:T7b2,chart = { var margin = {top: 0, right: 30, bottom: 30, left: 30}, width = 700 - margin.left - margin.right, height = 700 - margin.top - margin.bottom; var svg = d3.select("#bars") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + 65 + "," +25+ ")"); var crimes = extractCrimes(coefficients, "CRIME"); var xb = d3.scaleBand() .domain(crimes) .range([margin.left, width - margin.right]) .padding(0.1) var yb = d3.scaleLinear() .domain([0, 270000]) .range([550, margin.top]) var xAxis = g => g .attr("transform", `translate(0,${height - 120})`) .call(d3.axisBottom(xb).tickSizeOuter(0)) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(90)") .style("text-anchor", "start"); var y = d3.scaleLinear() .domain([0, d3.max(crimesData, d => d.number)]) .range([400,0]) /* svg.append("g") .call(d3.axisLeft(y));*/ var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yb)) .call(g => g.select(".domain").remove()) var tip = d3tip() .attr('class', 'd3-tip-bar') .style("visibility","visible") .offset([-20, 0]) .html(function(d) { return "Number: " + parseInt(d.number); }); tip(svg.append("g")); console.log(xb("THEFT")) svg.append("g") .attr("fill", "darkcyan") .selectAll("rect") .data(crimesData) .join("rect") .attr("x", d => xb(d.crime)) .attr("y", d => yb(d.number)) .attr("height", d => yb(0) - parseInt(yb(d.number))) .attr("width", xb.bandwidth()) .on('mouseover', tip.show) .on('mouseout', tip.hide); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); }41:T7da,districtChart = { var margin = {top: 0, right: 0, bottom: 30, left: 0}, width = 1350 - margin.left - margin.right, height = 700 - margin.top - margin.bottom; var svg = d3.select("#districts") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + 40 + "," +25+ ")"); var areas = extractCrimes(factors, "COMMUNITY AREA NAME"); var xb = d3.scaleBand() .domain(areas) .range([margin.left, width - margin.right]) .padding(0.1) var yb = d3.scaleLinear() .domain([0, 67000]) .range([550, margin.top]) var xAxis = g => g .attr("transform", `translate(0,${height - 120})`) .call(d3.axisBottom(xb).tickSizeOuter(0)) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(90)") .style("text-anchor", "start"); var y = d3.scaleLinear() .domain([0, d3.max(districtData, d => d.number)]) .range([400,0]) /* svg.append("g") .call(d3.axisLeft(y));*/ var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yb)) .call(g => g.select(".domain").remove()) var tip = d3tip() .attr('class', 'd3-tip-bar') .style("visibility","visible") .offset([-20, 0]) .html(function(d) { return "Number: " + parseInt(d.number); }); tip(svg.append("g")); console.log(xb("THEFT")) svg.append("g") .attr("fill", "darkcyan") .selectAll("rect") .data(districtData) .join("rect") .attr("x", d => xb(areas[parseInt(d.area)-1])) .attr("y", d => yb(d.number)) .attr("height", d => yb(0) - parseInt(yb(d.number))) .attr("width", xb.bandwidth()) .on('mouseover', tip.show) .on('mouseout', tip.hide); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); }42:T7e3,// set the dimensions and margins of the graph { var margin = {top: 0, right: 30, bottom: 30, left: 30}, width = 600 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + 128 + "," + 130 + ")"); // Labels of row and columns var dim_1 = extractCrimes(coefficients, "CRIME"); var dim_2 = chartX; // Build X scales and axis: var x = d3.scaleBand() .range([ 0, 408 ]) .domain(dim_2) .padding(0.04); //svg.append("g") // .attr("transform", "translate(0," + "-height"+")") // .call(d3.axisBottom(x)) svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + "-height"+")") .call(d3.axisTop(x)) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "rotate(-90)") .style("text-anchor", "start"); var tip = d3tip() .attr('class', 'd3-tip') .style("visibility","visible") .offset([-20, 0]) .html(function(d) { return "Value: " + parseFloat(d.value).toFixed(3); }); tip(svg.append("g")); // Build X scales and axis: var y = d3.scaleBand() .range([ 600, 0 ]) .domain(dim_1) .padding(0.04); svg.append("g") .call(d3.axisLeft(y)); svg.selectAll() .data(coefficientsChartData) .enter() .append("rect") .attr("x", function(d) { return x(d.x) }) .attr("y", function(d) { return y(d.y) }) .attr("rx", 3) .attr("ry", 3) .attr("width", x.bandwidth() ) .attr("height", y.bandwidth() ) .attr("class","box") .style("fill", function(d) { return colorPickHeat(d.value)} ) .on('mouseover', tip.show) .on('mouseout', tip.hide); }43:[] 3a:{"id":"09754666f7f92c8a","slug":"untitled/2","title":"Title","thumbnail":"3b914649c1f5cd2381ae16cfb4a36ec0757a75899268862e026208d85156e0f1","access_level":"public","create_time":"$D2019-05-16T16:05:54.098Z","update_time":"$D2019-05-17T20:47:30.167Z","view_time":null,"first_public_time":"$D2019-05-17T12:37:33.782Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"edc2d39aee1856e6","login":"zeaf","name":"","avatar_url":"https://avatars-next.observableusercontent.com/95c899da8d024b9494390551fa2ebe17765a749373e60cfb403eb2ece41e865b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":935,"publish_version":935,"role":null,"authored":false,"authors":[{"type":"individual","id":"599c8d2032dce589","login":"zeaf","name":"","avatar_url":"https://avatars-next.observableusercontent.com/95c899da8d024b9494390551fa2ebe17765a749373e60cfb403eb2ece41e865b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"599c8d2032dce589","login":"zeaf","name":"","avatar_url":"https://avatars-next.observableusercontent.com/95c899da8d024b9494390551fa2ebe17765a749373e60cfb403eb2ece41e865b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Title","cells":[{"id":924,"value":"md`# Title\nasdgasdgagsaHELLO`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof selFactor = select({\n title: \"Socioeconomic factor\",\n options: factors.columns.slice(2,9),\n value: factors.columns[2]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"viewof ch3 = checkbox({\n options: [{ value: true, label: \"Show weapon violations only\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"chartX = [\"% CROWDED\", \"% BELOW POVERTY\", \"16+ UNEMPLOYED\", \"25+ NO DIPLOMA\", \"UNDER 18 OR OVER 64\", \"PER CAPITA INCOME \", \"HARDSHIP INDEX\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"coefficientsChartData = {\n var extractedCoeffs = []\n var temp = []\n coefficients.columns.slice(1,8).forEach(function(column) {for (var i = 0; i<13;++i) extractedCoeffs.push({x:chartX[coefficients.columns.indexOf(column)-1], y:coefficients[i][\"CRIME\"], value: coefficients[i][column]})})\n return extractedCoeffs;\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"function extractCrimes(arr, column) {\n\tfunction reduction(previousValue, currentValue) {\n\t\tpreviousValue.push(currentValue[column]);\n\t\treturn previousValue;\n\t}\n\n\treturn arr.reduce(reduction, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"function extractColumn(arr, column) {\n\tfunction reduction(previousValue, currentValue) {\n\t\tpreviousValue.push(parseFloat(currentValue[column]));\n\t\treturn previousValue;\n\t}\n\n\treturn arr.reduce(reduction, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"d3i = require(\"d3-interpolate\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"fmax = extractColumn(factors,selFactor).reduce(function(a, b) {\n return Math.max(a, b)})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"fmin = extractColumn(factors,selFactor).reduce(function(a, b) {\n return Math.min(a, b)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"function colorPick(value, max, min){\n return colorAux(normalize(value, max, min))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"function colorPick2(value){\n return colorAux2(normalize(value, fmax, fmin))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"function colorPickHeat(value){\n return colorHeatAux(normalize(value, 1, -1))}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"colorHeatAux = d3i.interpolateRgb(\"seagreen\",\"firebrick\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"colorAux = d3i.interpolateRgb(\"forestgreen\", \"darkred\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"colorAux2 = d3i.interpolateRgb(\"darkred\", \"forestgreen\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"function normalize(val, max, min) { return (val - min) / (max - min); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"areasData = await d3.json(\"https://data.cityofchicago.org/api/geospatial/cauq-8yn6?method=export&format=GeoJSON\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"factors = Object.assign(await d3.csv(\"https://gist.githubusercontent.com/kikilolohu/025969837b8a5d41312336fe95966648/raw/7bf2f564f16fac3e70afdcd2666dcf05f6efa471/socioeconomic.csv\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"coefficients = Object.assign(await d3.csv(\"https://gist.githubusercontent.com/zeaf/f4bbe9361371f8b735adea43166fafab/raw/112dbc8bf06ec52728b0cbab085b0914c964189b/coeffs2.csv\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"crimesData = Object.assign(await d3.csv(\"https://gist.githubusercontent.com/zeaf/49b9a5f4a5e5ec5a26551ea59a2738eb/raw/9cb338429fe8b68507c9667fd88c6b9e96b405b5/crimes.csv\"), ({crime:crime, number:number}) => ({crime:crime, number:+number}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"districtData = Object.assign(await d3.csv(\"https://gist.githubusercontent.com/zeaf/0cabbfd83dd06bb09070c6392e4218a3/raw/42196bb307a313258efbb952f64a8b820a2d5869/district.csv\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"weaponData = Object.assign(await d3.csv(\"https://gist.githubusercontent.com/zeaf/692809158fbbfe1f1591948921afc3d0/raw/6f61e0037c85351de77503155c842759ecffcc2b/weapon.csv\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"d3tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"L = require(\"leaflet\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"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"},{"id":271,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W43","stdlib":"1"}} 35:null