The avatar for @jefersonalves
Jeferson Alves
Software Engineer
Published
Edited
Jan 21, 2020
Fork of Chicago crime map with [d3-hexgrid](https://github.com/larsvers/d3-hexgrid)
Insert cell
Insert cell
Insert cell
data= d3.csv('https://gist.githubusercontent.com/Jefersonalves/23cd85cd7d70d57e24fcafcb43a4f12e/raw/e822d60e440f789b8d74a5652ce2f8f5f468dd54/acre_localizacoes.csv')
Insert cell
//data = await d3.csv('https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/Crimes_-_2018.csv')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hexgrid = d3.hexgrid()
.extent([w, h])
.geography(geo)
.projection(projection)
.pathGenerator(path)
.hexRadius(r)
Insert cell
hex = hexgrid(data)
Insert cell
Insert cell
hex.grid
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
map = {

const svg = DOM.svg(w, h)
d3.select(svg)
.selectAll('.hex')
.data(hex.grid.layout)
.enter()
.append('path')
.attr('class', 'hex')
.attr('d', hex.hexagon())
.attr('transform', d => `translate(${d.x}, ${d.y})`)
.style('fill', d => !d.pointDensity ? '#fff' : colourScale(d.pointDensity))
.style('stroke', '#ccc')
return svg;

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more