31:T62f,function drawHexgrid(data) { // draw heaxgrid map const margin = {top: 0, right: 0, bottom: 0, left: 0}; const svg = d3.select('svg') .attr('transform', `translate(${margin.left} ${margin.top})`); svg.append('g') .selectAll('.hex') .data(grid.layout) .enter() .append('path') .attr('class', 'hex') .attr('d', hexagons.hexagon()) .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('fill', d => !d.pointDensity ? '#fff' : colorScale(d.pointDensity)) .style('stroke', '#ccc') .style('stroke-opacity', 0.5); const dataList = document.querySelector('.data-list'); d3.selectAll('.hex').on('click', (mapPoints) => { const dataPoints = getDataPoints(mapPoints); dataList.innerHTML = dataPoints.reduce( (html, d) => html + `

${d.block}
(${d.location})
${d.type}: ${d.info}
${d.date.toLocaleString()}`, '' ); //console.log('hexagon:click:data:', dataPoints); }) // add tooltips const tip = d3.select('.tooltip'); d3.selectAll('.hex').on('mouseover', (d) => { tip.style('opacity', 1) .style('top', `${d3.event.pageY - 310}px`) .style('left', `${d3.event.pageX + 10}px`); tip.html(`${d.datapoints} reported crimes`); /* full data point stats `cover: ${formatNum(d.cover)}
points: ${d.datapoints}
points wt: ${formatNum(d.datapointsWt)}
density: ${formatNum(d.pointDensity)}`);*/ }) .on('mouseout', tip.style('opacity', 0)); // todo: fix this bar display //drawLegendBar(svg); return svg; }32:T6ab,function drawLegendBar(svg) { // gen. legend data const legendScale = 8 / hexagons.radius; const equalRange = n => d3.range(n).map(d => d / (n - 1)); const densityDist = grid.layout .map(d => d.pointDensity) .sort(d3.ascending) .filter(d => d); const splitRange = equalRange(11); const indeces = splitRange.map(d => Math.floor(d * (densityDist.length - 1))); const densityPick = indeces.map(d => densityDist[d]); const legendData = densityPick.map(d => ({ density: d, colour: colorScale(d) })); // create legend bar const legendBar = svg.append('g') .attr('class', 'legend') .attr('transform', `translate(0, ${mapHeight})`); legendBar.append('text') .text(`Point density (scale exponent: ${exponent})`) .attr('fill', '#555') .attr('font-family', 'sans-serif') .attr('font-size', '0.55rem') .attr('font-weight', 'bold') .attr('dy', 19) .attr('dx', -4); const legend = legendBar.selectAll('.legendKey') .data(legendData) .enter() .append('g') .attr('class', 'legendKey') .attr('transform', (d, i) => `translate(${i * Math.sqrt(3) * hexgrid.hexRadius() * legendScale}, 0)`); legend.append('g') .attr('transform', `scale(${legendScale})`) .append('path') .attr('d', hexagons.hexagon()) .style('fill', d => d.colour) .style('stroke-width', 0.5) .style('stroke', '#fff'); legend.append('text').text( (d, i, n) => (i == 0 || i == n.length - 1 ? formatNum(d.density) : '') ) .attr('fill', '#555') .attr('font-family', 'sans-serif') .attr('font-size', '0.7rem') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dy', -10); }33:T44e,function filterData(dataTable, crimeType, startDate, endDate) { let lat, lng, block, type, info, date, results = []; const dataFilter = arrow.predicate.custom(i => { const date = toDate(dataTable.getColumn('Date').get(i)); const primaryType = dataTable.getColumn('PrimaryType').get(i); return date >= startDate && date <= endDate && (crimeType === '' || primaryType === crimeType); }, b => 1); dataTable.filter(dataFilter) .scan((index) => { results.push({ 'lat': lat(index), 'lng': lng(index), index, //'info': `${block(index)}
${type(index)}
${info(index)}
${toDate(date(index)).toLocaleString()}` }); }, (batch) => { lat = arrow.predicate.col('Latitude').bind(batch); lng = arrow.predicate.col('Longitude').bind(batch); block = arrow.predicate.col('Block').bind(batch); type = arrow.predicate.col('PrimaryType').bind(batch); info = arrow.predicate.col('Description').bind(batch); date = arrow.predicate.col('Date').bind(batch); } ); return results; }34:[] 2f:{"title":"Chicago Crimes Hexgrid Map","cells":[{"id":0,"value":"md `# Chicago Crimes Hexgrid Map\n\n2D remake of [3D deck-gl-heatmap](https://beta.observablehq.com/@randomfractals/deck-gl-heatmap)\nwith [d3-hexgrid](https://github.com/larsvers/d3-hexgrid)\n\n*tip: toggle crimeType, startDay/endDay, and mouseover hexagons for the reported crime counts per block. \nClick on the hexagon for the reported crimes info on that block.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"viewof crimeType = select(['', 'HOMICIDE', 'KIDNAPPING', 'NARCOTICS', 'PROSTITUTION', 'ARSON', \n 'THEFT', 'BATTERY', 'CRIMINAL DAMAGE', 'ASSAULT', 'SEX OFFENSE',\n 'OTHER OFFENSE', 'DECEPTIVE PRACTICE',\n 'BURGLARY', 'MOTOR VEHICLE THEFT', 'ROBBERY',\n 'CRIMINAL TRESPASS', 'WEAPONS VIOLATION',\n 'OFFENSE INVOLVING CHILDREN',\n 'PUBLIC PEACE VIOLATION',\n 'CRIM SEXUAL ASSAULT',\n 'INTERFERENCE WITH PUBLIC OFFICER',\n 'LIQUOR LAW VIOLATION', 'STALKING', 'GAMBLING'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof startDay = slider({min: 0, max: days, step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof endDay = slider({min: 0, max: days, step: 1, value: days})","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"map = html `

\n \n

\n ${crimeType}\n total: ${data.length.toLocaleString()}\n
\n ${formatTime(dayToDate(startDay))} through ${formatTime(dayToDate(endDay))}, 2018\n
\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md `#### Hexgrid Map Toggles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewof blockRadius = slider({min: 1, max: 8, step: 1, value: 4})","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof exponent = slider({min: 1, max: 12, step: 1, value:6})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"mapWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"mapHeight = Math.round(mapWidth * .6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"colorScale = d3.scaleSequential(t => {\n return d3.interpolateInferno(Math.pow(t, exponent))\n}).domain([...grid.extentPointDensity].reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"geo = await d3.json('https://raw.githubusercontent.com/smartchicago/chicago-atlas/master/db/import/chicago.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"projection = d3.geoMercator().fitSize([mapWidth, mapHeight], geo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"hexgrid = d3.hexgrid()\n .extent([mapWidth, mapHeight])\n .geography(geo)\n .projection(projection)\n .pathGenerator(path)\n .hexRadius(blockRadius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"hexagons = hexgrid(data, ['index'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"grid = hexagons.grid","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"svg = drawHexgrid(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"formatNum = d3.format('.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"formatTime = d3.timeFormat('%b %e')","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"tooltipStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"dataPanelStyle = html `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md `#### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/chicago-crimes-2018.arrow'","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"dataTable = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"startDate = new Date('1/1/2018')","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"endDate = new Date('8/8/2018')","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"days = Math.ceil((endDate - startDate) / millisPerDay)","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"millisPerDay = 24 * 60 * 60 * 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"function dayToDate(day) {\n return new Date(startDate.getTime() + day*millisPerDay) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"fields = dataTable.schema.fields.map(f => f.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"data = filterData(dataTable, crimeType, \n new Date(startDate.getTime() + startDay*millisPerDay),\n new Date(startDate.getTime() + endDay*millisPerDay))","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"function getDataPoints(mapPoints) {\n const dataPoints = [];\n mapPoints.map(point => {\n const dataRow = dataTable.get(point.index);\n const dataPoint = {\n // from fields\n block: dataRow.get(2),\n location: dataRow.get(3).toLowerCase(),\n type: dataRow.get(4),\n info: dataRow.get(5).toLowerCase(),\n arrested: dataRow.get(6),\n domestic: dataRow.get(7),\n date: toDate(dataRow.get(9))\n }\n dataPoints.push(dataPoint);\n });\n return dataPoints;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"md `#### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3-fetch', 'd3-geo', 'd3-geo-projection', 'd3-hexgrid', \n 'd3-scale', 'd3-scale-chromatic', 'd3-format', 'd3-time-format', 'd3-array', 'd3-selection')","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"arrow = require('apache-arrow@0.3.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"import {loadData, toDate} from '@randomfractals/apache-arrow'","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}