2f:T6b6,function dayDist (data) { const width = 250; const height = 200; const projection = d3 .geoEquirectangular() .fitExtent([[0, 0], [width , height]], data) const path = d3.geoPath() .projection(d3.geoEquirectangular() .fitSize([width, height], data)) const div = html`

` const svg = d3.select(div).selectAll("svg") .data(days) .enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); svg.append("text") .attr("dx", width-20) .attr("dy", 10) .style("text-anchor", "end") .style("font", "14px 'IBM PLex Sans', sans-serif") .text(d => d) svg.selectAll(".divisions") .data(data.features) .enter().append("path") .style("stroke", "#999") .style("stroke-width", 0.5) .attr("d", path) .style("fill", "#f4f4f4"); var line = d3.line() .x(function(d) { return projection([d.lng,d.lat])[0]; }) .y(function(d) { return projection([d.lng,d.lat])[1]; }) .curve(curve); svg.append("g").attr("class", "paths") .each(function (node, i) { let chart = d3.select(this); let subN = network.sort(function(a, b){return b-a}).filter(row=> row[node]>0); // for (let v in vals) { // let value = vals[v]; chart.append("g") .attr("id", "test") .selectAll("paths") .data(subN) .enter() .append("path") .attr("d", (d) => { let bend = 15; let source = [d.orig_lng, d.orig_lat]; let target = [d.dest_lng, d.dest_lat]; let toDraw = {type: "LineString", coordinates: [source, target]}; let fullPath = path(toDraw); console.log(fullPath); return fullPath; }) .attr("stroke", d=>linkColor(d[node])) .attr("stroke-linecap", "round") // .append("circle") .attr('stroke-width', d => linkScale(d[node])) // .attr("transform", d=>{ // return`translate(${projection([d.properties.lng, d.properties.lat])})`; }) // .attr("r", d => radScale(d.properties[node])) // .attr('fill', 'none') .attr("stroke-opacity", d => linkOp(d[node])) // .attr('stroke', circleScale(value)); // } }); return div }33:Tbbe,function networkTime (network){ const width = 250; const height = 250; const projection = d3 .geoEquirectangular() .fitExtent([[0, 0], [width , height]], data) const path = d3.geoPath() .projection(d3.geoEquirectangular() .fitSize([width, height], data)) // let domain = []; // for (let i in network) { // for (let j in times) { // domain.push(network[i][j]); // } // } // domain = d3.extent(domain); // for (let i in network) { // for (let j in times) { // domain.push(network[i][j]); // } // } // // domain = d3.extent(domain); // domain = [0, 7490] let linkScale = d3.scaleLinear().domain(travelExtents).range([0.1, 10]) // domain.reverse() let linkColor = d3.scaleDiverging(travelExtents, d3.interpolateInferno); let linkOp = d3.scaleLinear(travelExtents, [0.2, 1]) const div = html`

` const svg = d3.select(div).selectAll("svg") .data(times) .enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); svg.append("text") .attr("dx", width-20) .attr("dy", 10) .style("text-anchor", "end") .style("font", "14px 'IBM PLex Sans', sans-serif") .text(d => d) svg.selectAll(".divisions") .data(data.features) .enter().append("path") .style("stroke", "#999") .style("stroke-width", 0.5) .attr("d", path) .style("fill", "#f4f4f4"); var line = d3.line() .x(function(d) { return projection([d.lng,d.lat])[0]; }) .y(function(d) { return projection([d.lng,d.lat])[1]; }) .curve(curve); svg.append("g").attr("class", "paths") .each(function (node, i) { let chart = d3.select(this); let subN = network.sort(function(a, b){return b-a}).filter(row=> row[node]>0); // for (let v in vals) { // let value = vals[v]; chart.append("g") .attr("id", "test") .selectAll("paths") .data(subN) .enter() .append("path") .attr("d", (d) => { let bend = 15; let source = [d.orig_lng, d.orig_lat]; let target = [d.dest_lng, d.dest_lat]; let toDraw = {type: "LineString", coordinates: [source, target]}; let fullPath = path(toDraw); console.log(fullPath); return fullPath; }) .attr("stroke", d=>linkColor(d[node])) .attr("stroke-linecap", "round") // .append("circle") .attr('stroke-width', d => linkScale(d[node])) // .attr("transform", d=>{ // return`translate(${projection([d.properties.lng, d.properties.lat])})`; }) // .attr("r", d => radScale(d.properties[node])) // .attr('fill', 'none') .attr("stroke-opacity", d => linkOp(d[node])) // .attr('stroke', circleScale(value)); // } }); return div }34:Tb0c,function networkHr(network){ const width = 200; const height = 150; const projection = d3 .geoEquirectangular() .fitExtent([[0, 0], [width , height]], data) const path = d3.geoPath() .projection(d3.geoEquirectangular() .fitSize([width, height], data)) // let domain = []; // for (let i in network) { // for (let j in hrs) { // domain.push(network[i][j]); // } // } // domain = d3.extent(domain); // let linkScale = d3.scaleLinear().domain(domain).range([0.5, 5]) // // domain.reverse() // let linkColor = d3.scaleDiverging(domain, d3.interpolateInferno); // let linkOp = d3.scaleLinear(domain, [0.1, 0.8]) let linkScale = d3.scaleLinear().domain(travelExtents).range([0.1, 10]) // domain.reverse() let linkColor = d3.scaleDiverging(travelExtents, d3.interpolateInferno); let linkOp = d3.scaleLinear(travelExtents, [0.2, 1]) const div = html`

` const svg = d3.select(div).selectAll("svg") .data(hrs) .enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); svg.append("text") .attr("dx", width-20) .attr("dy", 10) .style("text-anchor", "end") .style("font", "14px 'IBM PLex Sans', sans-serif") .text(d => (d+1)) svg.selectAll(".divisions") .data(data.features) .enter().append("path") .style("stroke", "#999") .style("stroke-width", 0.5) .attr("d", path) .style("fill", "#f4f4f4"); svg.append("g").attr("class", "paths") .each(function (node, i) { let chart = d3.select(this); let subN = network.sort(function(a, b){return b-a}).filter(row=> row[node]>0); // for (let v in vals) { // let value = vals[v]; chart.append("g") .attr("id", "test") .selectAll("paths") .data(subN) .enter() .append("path") .attr("d", (d) => { let bend = 15; let source = [d.orig_lng, d.orig_lat]; let target = [d.dest_lng, d.dest_lat]; let toDraw = {type: "LineString", coordinates: [source, target]}; let fullPath = path(toDraw); console.log(fullPath); return fullPath; }) .attr("stroke", d=>linkColor(d[node])) .attr("stroke-linecap", "round") // .append("circle") .attr('stroke-width', d => linkScale(d[node])) // .attr("transform", d=>{ // return`translate(${projection([d.properties.lng, d.properties.lat])})`; }) // .attr("r", d => radScale(d.properties[node])) // .attr('fill', 'none') .attr("stroke-opacity", d => linkOp(d[node])) // } }); return div }35:T73f,{ let width=1000; let height= 1000; const projection = d3 .geoEquirectangular() .fitExtent([[0, 0], [width , height]], distanceData19) const path = d3.geoPath() .projection(d3.geoEquirectangular() .fitSize([width, height], distanceData19)) const svg = d3.select(DOM.svg( width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); g.selectAll(".divisions") .data(distanceData19.features) .enter().append("path") .style("stroke", "#999") .style("stroke-width", 0.5) .attr("d", path) .style("fill", "#f4f4f4"); // fill: #f4f4f4; // stroke: #999; // stroke-width: 0.5; // svg.append("g") // .selectAll("circle") // .data(data) // .join("circle") // .attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`) // .attr("r", 0.5) // .attr('fill', "green") // .append("title") // .text(d => d.name); // g.selectAll(".circles") // .data(distanceData19.features) // .enter().append("circle") // .attr("transform", d=>{ console.log(projection([d.lng, d.lat])); return`translate(${projection([d.lng, d.lat])})`; }) // .attr("r", 0.5) // .attr('fill', "green") // .append("title") g.append("g").attr("class", "paths") .each(function (node, i) { let chart = d3.select(this); console.log(chart); chart.append("g") .attr("id", "test") .selectAll("circles") .data(distanceData19.features) .enter() .append("circle") .attr("transform", d=>{ console.log(projection([d.lng, d.lat])); return`translate(${projection([d.lng, d.lat])})`; }) .attr("r", 0.5) .attr('fill', "green") }); return svg.node() }36:[{"id":"fda9217caaadd92c61d4f35837696e7c7dd1efe3467a1f72ba9e7c4e21ded3913c445a321471af15321266a115f78ec03dc57286fc1940c90dca4af47a5dfd0c","href":"https://static.observableusercontent.com/files/fda9217caaadd92c61d4f35837696e7c7dd1efe3467a1f72ba9e7c4e21ded3913c445a321471af15321266a115f78ec03dc57286fc1940c90dca4af47a5dfd0c","name":"network_volume_pln_area_2019.csv","type":"text/csv","lastModified":1664481472585.516,"size":660257},{"id":"2d0cf9e24e27970d33a11e4a72323f9e401b9404579f7c6e9d4e974479f03b1962355f0a7612a6138078a3806e0d790786e284df0206ea4c907d6bc6bb018e3e","href":"https://static.observableusercontent.com/files/2d0cf9e24e27970d33a11e4a72323f9e401b9404579f7c6e9d4e974479f03b1962355f0a7612a6138078a3806e0d790786e284df0206ea4c907d6bc6bb018e3e","name":"network_volume_pln_area_2021.csv","type":"text/csv","lastModified":1664476801192.392,"size":259919},{"id":"c6ae7fd277681972fe1c737beb8204e16919bf9b4b2e58035405ff16852ab3867e70d008411b811b10727aec21166805f14c83b68d1266a5fc7343e3aa21ca23","href":"https://static.observableusercontent.com/files/c6ae7fd277681972fe1c737beb8204e16919bf9b4b2e58035405ff16852ab3867e70d008411b811b10727aec21166805f14c83b68d1266a5fc7343e3aa21ca23","name":"distance_range_pln_area_2021@2.geojson","type":"application/geo+json","lastModified":1664503216532.941,"size":1653289},{"id":"9f8718e9114aa766ba809aba174e7ce0361595d8c3e13a37aca0107828075415070814df9b77bac92ace760cab2616265b1bcb29351e48db9fab988feb94b16c","href":"https://static.observableusercontent.com/files/9f8718e9114aa766ba809aba174e7ce0361595d8c3e13a37aca0107828075415070814df9b77bac92ace760cab2616265b1bcb29351e48db9fab988feb94b16c","name":"distance_range_pln_area_2019@2.geojson","type":"application/geo+json","lastModified":1664501915571.657,"size":1650391}] 2d:{"title":"Small multiples for time","cells":[{"id":0,"value":"md`# Small multiples for time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"md `Testng small multiples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"viewof year = Inputs.radio([2019, 2021], {label: \"Show which year\", value: 2019})","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"viewof radiusRange = rangeSlider({\n min: 0.1,\n max: 50,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0.1, 12],\n // Custom slider CSS, replaces all styles.\n // theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n title: 'Piechart radius',\n description: 'Control minimum and maximum radius',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"viewof linkRange = rangeSlider({\n min: 0,\n max: 10,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0.05, 10],\n // Custom slider CSS, replaces all styles.\n // theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n title: 'Link width range',\n description: 'Control minimum and maximum radius',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"viewof daytime = Inputs.checkbox(vals, {label: \"Time of day\", value:['mean']})","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"[].concat( distanceData19.features, distanceData21.features);","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"data = {\n return year === 2019 ? distanceData19 : distanceData21;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"networkMain = {\n return [].concat.apply([], [network21, network19]);\n // return year === 2019 ? network19 : distanceData21;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"dayExtents = {\n // More readable form\n let data = [].concat( distanceData19.features, distanceData21.features);\n console.log('!@#$', data);\n let fullExtents = [];\n for (let d in days) {\n\n let day = days[d];\n\n for (let v in daytime) {\n let val = daytime[v];\n // console.log(day, val);\n console.log(day + \"_\" + val);\n data.map(row => {\n \n fullExtents.push(row.properties[day + \"_\" + val])\n });\n }\n }\n return d3.extent(fullExtents);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"allValues = [].concat(days, times, hrs);","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"travelExtents = {\n let fullExtents = [];\n\n networkMain.map(row => \n {\n for (let i in allValues) {\n fullExtents.push(row[allValues[i]]);\n }\n });\n return d3.extent(fullExtents);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"linkScale = d3.scaleLinear().domain(travelExtents).range(linkRange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"linkColor = d3.scaleDiverging(travelExtents, d3.interpolateRainbow);","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"linkColor(400)","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"radScale = d3.scaleLinear().domain(dayExtents).range(radiusRange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"dayDist(distanceData19)","pinned":true,"hidden":false,"mode":"ojs"},{"id":909,"value":"dayDist(distanceData21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"timeDistance(distanceData19)","pinned":true,"hidden":false,"mode":"ojs"},{"id":915,"value":"timeDistance(distanceData21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"hrDistance(distanceData19)","pinned":true,"hidden":false,"mode":"ojs"},{"id":950,"value":"hrDistance(distanceData21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"# Flows","pinned":false,"hidden":false,"mode":"md"},{"id":925,"value":"wkday(network19)","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"wkday(network21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"curve = function(context) {\n var custom = d3.curveLinear(context);\n custom._context = context;\n custom.point = function(x,y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; \n this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);\n this.x0 = x; this.y0 = y; \n break;\n case 1: this._point = 2;\n default: \n var x1 = this.x0 * 0.5 + x * 0.5;\n var y1 = this.y0 * 0.5 + y * 0.5;\n var m = 1/(y1 - y)/(x1 - x);\n var r = -100; // offset of mid point.\n var k = r / Math.sqrt(1 + (m*m) );\n if (m == Infinity) {\n y1 += r;\n }\n else {\n y1 += k;\n x1 += m*k;\n } \n this._context.quadraticCurveTo(x1,y1,x,y); \n this.x0 = x; this.y0 = y; \n break;\n }\n }\n return custom;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"## Times of day","pinned":false,"hidden":false,"mode":"md"},{"id":931,"value":"networkTime(network19)","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"networkTime(network21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"## Hour of day","pinned":false,"hidden":false,"mode":"md"},{"id":935,"value":"networkHr(network19)","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"networkHr(network21)","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"# Map unit test","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"circleScale = d3.scaleOrdinal().domain(vals).range(circleColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"circleColors = [\"#219ebc\",\"#d62828\",\"#f77f00\",\"#fcbf49\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"vals = ['std', 'max', 'mean', 'min']","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']\n// times = ['morning', 'afternoon', 'evening', 'night']\n// hrs = [i for i in range(23)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"times = ['morning', 'afternoon', 'evening', 'night']","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"hrs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"margin = ({top: 0, bottom: 10, left: 10, right: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"colors = ['#feedde','#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#8c2d04']","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"distanceData19 = FileAttachment(\"distance_range_pln_area_2019@2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"distanceData21 = FileAttachment(\"distance_range_pln_area_2021@2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"network21 = FileAttachment(\"network_volume_pln_area_2021.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"network19 = FileAttachment(\"network_volume_pln_area_2019.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"arrestData = d3.csv(\"https://gist.githubusercontent.com/stiles/73eacb22206d327b7db5de0c108b0b72/raw/d5240ef5463541d9948c9c3a333ea0916791e46e/charges_homeless_districts_slim.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"lapdBoundaries = d3.json(\"https://gist.githubusercontent.com/stiles/3723a4586ef7e01e2b4d5359e2d0f5d0/raw/be1b8e603a3c033cb20da5c0f54abb193e7947cd/lapd_reporting_districts.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"lapdDistricts = topojson.feature(lapdBoundaries, lapdBoundaries.objects.lapd_reporting_districts)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"nestedArrestMap = d3.nest()\n .key(d => d.year)\n .key(d => d.id)\n .map(arrestData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"nestedArrestYears = d3.nest()\n .key(d => d.year).sortKeys(d3.ascending)\n .key(d => d.id)\n .entries(arrestData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"viewof breaks = slider({\n description: 'Number of breaks to render in the map',\n min: 2,\n max: 9,\n value: 5,\n step: 1,\n title: \"Breaks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"groups = ckmeans(values, breaks).map(d => d3.min(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"values = arrestData.map(d => +d.count)","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Modules & Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import {d3} from '@pstuffa/helpers'","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"path = d3.geoPath()\n .projection(d3.geoMercator()\n .fitSize([width, height], distanceData19))","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"colorScale = d3.scaleThreshold(groups, colors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"ckmeans = require('simple-statistics').then(({ ckmeans }) => ckmeans)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}