31:T1528,viewof svgbubbles = { let localNodes = nodes.map(d => Object.create(d)); let localLinks = links.map(d => Object.create(d)); localNodes.forEach(d => { d.x = Math.random() * width; d.y = Math.random() * height; }); localNodes.forEach(d => { d.tooltip = d3tip() // .style('border', 'solid 3px black') .style('background-color', 'white') .style('padding', '0.5em') .style('box-shadow', '0 3px 4px rgba(0, 0, 0, 0.2)') .style('border-radius', '10px') .style('float', 'left') .style('font-size', '12px') .style('font-family', 'sans-serif') .html( d => `

${!d.isPrecinct ? d.name : d.id}: ${d.total}
${!d.isPrecinct ? d.id : ""}

` ); }); const simulation = d3 .forceSimulation(localNodes) .force( "link", d3 .forceLink(localLinks) .id(d => d.id) .distance(25) .strength(.3) ) .force( "charge", d3.forceManyBody().strength(d => { let r = 2; if (d.isPrecinct) r = -precinctRadiusScale(d.total); else r = -officerRadiusScale(d.total); return r * 5; // return -d.total * 0.5 }) // .strength(-1) ) // .force("charge", d3.forceManyBody().strength(-30)) .force( "x", d3.forceX(d => { return d.centroid ? d.centroid[0] : width / 2; }) // .strength(20) ) .force( "y", d3.forceY(d => { // return height / 2 - d.total * 0.2; return d.centroid ? d.centroid[1] : height / 2; }) ); simulation.tick(20); let svg = d3 .create("svg") .attr("width", width) .attr("height", height); const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(localLinks) .join("line") .attr("stroke", d => { return officerColorScale(d.source.total); }) .attr("stroke-width", d => { return officerStrokeScale(d.source.total); }); // Apply tooltip to our SVG // svg.call(tooltip); const node = svg .append("g") .attr("fill", "#fff") .attr("stroke", "#000") .attr("stroke-width", 1.5) .selectAll("g.node") .data(localNodes) .join( enter => { let n = enter.append("g").classed("g", true); n.filter(d => d.isPrecinct) .append("g") .classed("precinct", true) .html( ` ` ); n.filter(d => !d.isPrecinct) .append("circle") .classed("officer", true); return n; }, update => update.attr("fill", "gray") ); node .call(drag(simulation)) .each(d => { // d3.select(this).call(d.tooltip); svg.call(d.tooltip); }) .on("mouseover", (d, i) => { d.tooltip.show(d, d3.event.target); }) .on("mouseout", (d, i) => { if (!d.pin) d.tooltip.hide(d, d3.event.target); }) .on("click", (d, i) => { d.pin = !d.pin; }); node .select("circle") .attr("fill", d => { // if (interestingOfficers.includes(d.id)) return 'red'; if (d.isPrecinct) return '#999'; else return d.children ? null : officerColorScale(d.total); }) .attr("stroke", d => (d.children ? null : "#fff")) // EJ is proud of his scale // .attr("r", d => { // if (d.isPrecinct) return Math.sqrt(d.total) / 2.3; // else return Math.sqrt(d.total) * 1.6; // }) .attr("r", d => { if (d.isPrecinct) return precinctRadiusScale(d.total); else return officerRadiusScale(d.total); }); node .select("g.precinct") .attr("transform", d => { // let dx = precinctRadiusScale(d.total) / 2 return `translate(${-15},${-15})scale(0.75)`; }) // .attr("stroke", d => (d.children ? null : "#fff")) .attr("dx", d => { return -precinctRadiusScale(d.total) / 2; }) .attr("dy", d => { return -precinctRadiusScale(d.total) / 2; }) .attr("width", d => { return precinctRadiusScale(d.total); }) .attr("height", d => { return precinctRadiusScale(d.total); }); node.sort((a, b) => { if (b.isPrecinct) return 1; if (!b.isPrecinct) return -1; }); // node.append("title").text(d => `${d.name} ${d.id}`); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => { return `translate(${d.x},${d.y})`; }); // .select("circle") // .attr("cx", d => d.x) // .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); let retnode = svg.node(); retnode.value = localNodes; return retnode; }32:T507,simpleSVGMap = { // we create an SVG with the width and height specified const svg = d3 .create("svg") .attr("width", width) .attr("height", height); svg .append("g") .selectAll("path") .data(precinctGeometry) .join("path") // This line renders our population data // .attr("fill", d => populationColor(populationByCounty.get(d.id))) .attr("fill", d => { if (overlappingPrecincts.get(d.id)) { return "seagreen"; } else { return "lightgray"; } }) .attr("d", d3.geoPath(projection)); svg .append("g") .selectAll("circle.centroid") .data(pGeomCentroids) .join("circle") .classed("centroid", true) // This line renders our population data // .attr("fill", d => populationColor(populationByCounty.get(d.id))) .attr("fill", d => { if (overlappingPrecincts.get(d.precinct)) { return "black"; } else { return "gray"; } }) .attr("r", 5) .attr( "transform", d => `translate(${projection(d.centroid.geometry.coordinates)})` ) .attr("d", d3.geoPath(projection)); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }33:T6b4,viewof canvasBubbles = { let height = 800; let localNodes = nodes.map(d => Object.create(d)); let localLinks = links.map(d => Object.create(d)); localNodes.forEach(d => { d.x = Math.random() * width; d.y = Math.random() * height; }); const simulation = d3 .forceSimulation(localNodes) .force( "link", d3 .forceLink(localLinks) .id(d => d.id) .distance(45) .strength(.72) ) .force("charge", d3.forceManyBody().strength(-30)) .force("x", d3.forceX(width / 2)) .force("y", d3.forceY(height / 2)); let ctx = DOM.context2d(width, height); simulation.tick(20); simulation.on("tick", () => { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); localLinks.forEach(d => { ctx.beginPath(); ctx.moveTo(d.source.x, d.source.y); ctx.lineTo(d.target.x, d.target.y); ctx.globalAlpha = 0.6; ctx.strokeStyle = "#999"; // ctx.lineWidth = Math.sqrt(d.value); ctx.lineWidth = 1; ctx.stroke(); ctx.globalAlpha = 1; }); localNodes.forEach((d, i) => { ctx.beginPath(); // let r = Math.sqrt(d.total) / 2; let r = d.isPrecinct ? precinctRadiusScale(d.total) : officerRadiusScale(d.total); ctx.arc(d.x, d.y, r, 0, 2 * Math.PI); ctx.strokeStyle = "#fff"; ctx.lineWidth = 1.5; ctx.globalAlpha = 0.85; ctx.stroke(); ctx.fillStyle = d.id === d.precinct ? '#CCC' : 'blue'; ctx.fill(); }); ctx.canvas.value = localNodes; ctx.canvas.dispatchEvent(new CustomEvent("input")); }); invalidation.then(() => simulation.stop()); ctx.canvas.value = localNodes; return ctx.canvas; }34:[{"id":"febb3eac0f2fec5c3cef93a1e77e559590ea994a2fb1a608d989fcffc0f7d51803b318735c0862810f102b1e5266d0a9fb183aaf02dd329a95531cc5b8ddd1b1","href":"https://static.observableusercontent.com/files/febb3eac0f2fec5c3cef93a1e77e559590ea994a2fb1a608d989fcffc0f7d51803b318735c0862810f102b1e5266d0a9fb183aaf02dd329a95531cc5b8ddd1b1","name":"allegations-by-yearmonth.csv","type":"text/csv","lastModified":1595802261012.336,"size":25546},{"id":"8ee3d6d6ac9526ccafa1bde59b8f7ab96fc18e3c1df697e796c3967261d28dbb6d8606d432ba36e691c1ceef81a930c696717da9adec01c759b141de27086683","href":"https://static.observableusercontent.com/files/8ee3d6d6ac9526ccafa1bde59b8f7ab96fc18e3c1df697e796c3967261d28dbb6d8606d432ba36e691c1ceef81a930c696717da9adec01c759b141de27086683","name":"allegations-per-officer.csv","type":"text/csv","lastModified":1595802260641.217,"size":24388},{"id":"e6dda96557230c4e709a30338acbfb70daa592de4cda1db144d315ab7336dbd1d17a9ab94bcd792f02ced4561caa968ebc4fc3eac9c22c05788fed1a0bd35cbb","href":"https://static.observableusercontent.com/files/e6dda96557230c4e709a30338acbfb70daa592de4cda1db144d315ab7336dbd1d17a9ab94bcd792f02ced4561caa968ebc4fc3eac9c22c05788fed1a0bd35cbb","name":"allegations-per-officer-precinct@1.csv","type":"text/csv","lastModified":1595803220564.818,"size":122935},{"id":"fedb5a45337dae959aa38b82b9231aa1b1d9dc195d3443b0b60f45d7cfa5aa8139ca225d1b864f917d691a4134d2dd58b0ff6a487bd7cf625f9596015b2080eb","href":"https://static.observableusercontent.com/files/fedb5a45337dae959aa38b82b9231aa1b1d9dc195d3443b0b60f45d7cfa5aa8139ca225d1b864f917d691a4134d2dd58b0ff6a487bd7cf625f9596015b2080eb","name":"allegations-per-officer-perprecinct.csv","type":"text/csv","lastModified":1595804244544.217,"size":204181}] 2f:{"title":"Coding With Fire: NYPD CCRB","cells":[{"id":0,"value":"md`# Coding With Fire: NYPD CCRB\n\nExploring the [ProPublica Civilian Complaints Against New York City Police Officers](https://www.propublica.org/datastore/dataset/civilian-complaints-against-new-york-city-police-officers) dataset.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"`\nselect allegation, count(*) as count, year_received || \"-\" || month_received as date from allegations_20200726939 GROUP BY year_received || month_received, allegation ORDER by count DESC\n\nselect unique_mos_id, first_name, last_name, command_at_incident, count(*) as count from allegations_20200726939 GROUP BY unique_mos_id, command_at_incident ORDER BY count DESC\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Allegations By Month\nLook at all types of allegations by month\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"allegationsByMonth = d3.csvParse(\n await FileAttachment(\"allegations-by-yearmonth.csv\").text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Allegations By Officer\nLook at all types of allegations by month\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"allegationsByOfficer = d3.csvParse(\n await FileAttachment(\"allegations-per-officer.csv\").text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`#### The 50 officers with the most civilian complaints`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"key = swatches({ color, marginLeft: margin.left, columns: \"180px\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"color = d3\n .scaleOrdinal()\n .domain(\n allegationsByOfficer\n .slice(0, 50)\n .map(d => d.first_name + \" \" + d.last_name + \": \" + d.count)\n )\n .range(allegationsByOfficer.slice(0, 50).map(o => officerColorScale(o.count)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`## Allegations Per Officer Per Precinct\n\nSQL Query we used: \n \n

select unique_mos_id, first_name, last_name, command_at_incident, count(*) as count from allegations_20200726939 GROUP BY unique_mos_id, command_at_incident ORDER BY count DESC

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"allegationsByOfficerPrecinct = d3.csvParse(\n await FileAttachment(\"allegations-per-officer-perprecinct.csv\").text()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"withPrecinct = allegationsByOfficerPrecinct\n .filter(d => !!d.command_at_incident)\n .sort((a, b) => b.count - a.count)\n// .slice(0, 2000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"withoutPrecinct = allegationsByOfficerPrecinct.filter(\n d => !d.command_at_incident\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"topOfficers = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"officers = d3\n .nest()\n .key(d => d.unique_mos_id)\n .rollup(leaves => leaves)\n .entries(withPrecinct)\n .map(d => {\n return {\n id: d.key,\n officer: d.key,\n name: d.value[0].first_name + \" \" + d.value[0].last_name,\n precincts: d.value,\n total: d3.sum(d.value, v => v.count),\n isPrecinct: false\n };\n })\n .sort((a, b) => b.total - a.total)\n .slice(0, topOfficers)\n// .sort((a, b) => b.precincts.length - a.precincts.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"precincts = d3\n .nest()\n .key(d => d.command_at_incident)\n .rollup(leaves => leaves)\n .entries(withPrecinct)\n .map(d => {\n let centroid = centroidLookup.get(weirdToNormal(d.key));\n return {\n id: d.key,\n precinct: d.key,\n precinctNum: 0,\n centroid: centroid\n ? projection(centroid.geometry.coordinates)\n : [width / 2, height / 2],\n // we filter out the officers that we didn't include based on their total case count\n officers: d.value.filter(\n o => officers.filter(oo => oo.id == o.unique_mos_id).length\n ),\n total: d3.sum(d.value, v => v.count),\n isPrecinct: true\n };\n })\n .sort((a, b) => b.total - a.total)\n // we remove any precincts that don't have officers (because they've been filtered out)\n .filter(p => p.officers.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"nodes = officers.concat(precincts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"// parseJson(\n// nodes.map(d => {\n// return {\n// id: d.id,\n// name: d.name,\n// total: d.total,\n// isPrecinct: d.isPrecinct\n// };\n// })\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"links = {\n let links = [];\n precincts.forEach(precinct => {\n precinct.officers.forEach(officer => {\n if (officers.filter(d => d.id == officer.unique_mos_id).length) {\n links.push({\n source: officer.unique_mos_id,\n target: precinct.id\n });\n }\n });\n });\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"// parseJson(links)","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"interestingOfficers = [\n '18731'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"officerColorScale = d3.scaleSequential([0, 60], d3.interpolateBlues)\n// .scaleLinear()\n// .domain([0, 60])\n// .range(['#2c7fb8', '#2c7fb8'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"officerStrokeScale = d3\n .scaleLinear()\n .domain([0, 60])\n .range([0.25, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"height = 750","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"overlappingPrecincts = new Map(\n precincts\n .filter(d => !!centroidLookup.get(weirdToNormal(d.id)))\n .map(d => [weirdToNormal(d.id), d.id])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"// svgbubbles","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"officerRadiusScale = d3\n .scaleLog()\n .domain(d3.extent(nodes.filter(d => !d.isPrecinct), d => d.total))\n .range([2, 12])","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"precinctRadiusScale = d3\n .scaleLinear()\n .domain(d3.extent(nodes.filter(d => d.isPrecinct), d => d.total))\n .range([2, 20])","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"canvasBubbles","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"// parseJson(canvasBubbles)","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"function parseJson(data) {\n let parser = new json2csv.Parser();\n let csv = parser.parse(data);\n return csv;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"drag = simulation => {\n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n\n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`## Precinct Geometries\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"pGeom = d3.json(\"https://data.cityofnewyork.us/resource/kmub-vria.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"precinctGeometry = pGeom.map(d => {\n return {\n type: \"Feature\",\n id: d.precinct,\n precinct: d.precinct,\n geometry: d.the_geom\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"projection = d3.geoAlbersUsa().fitSize([width, height], {\n type: \"FeatureCollection\",\n features: precinctGeometry\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"ejProjection = d3\n .geoTransverseMercator()\n .rotate([76 + 35 / 60, -40])\n .fitExtent([[10, 10], [960 - 20, 500 - 20]], {\n type: \"FeatureCollection\",\n features: precinctGeometry\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"pGeomCentroids = pGeom.map((g, i) => {\n return {\n precinct: g.precinct,\n geom: g.the_geom,\n centroid: turf.centroid(g.the_geom)\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"projection([-74.01550862599652, 40.70170515792238])","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"centroidLookup = new Map(pGeomCentroids.map(d => [d.precinct, d.centroid]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"pGeom.map(d => d.precinct)","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"weirdToNormal = function(pct) {\n return String(Number(pct.split(\" \")[0]));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"weirdToNormal(\"075 PCT\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"margin = ({ top: 0, right: 20, bottom: 30, left: 20 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`# References\n\n* https://observablehq.com/@d3/streamgraph\n* https://observablehq.com/@leoyuholo/comp-4462-data-visualization-tutorial-9-visualization-and\n* https://observablehq.com/@zakjan/force-directed-graph-canvas\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"require('d3-jetpack')","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"d3tip = require('d3-tip')","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"json2csv = require(\"json2csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"precinctIcon = html`\n\n\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}