Published
Edited
Oct 23, 2018
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svgMarkets = {
const svg = DOM.svg(w, h)
const colors = d3.scaleSequential(d3.interpolateRainbow).domain([0,10])

let viz = d3.select(svg).selectAll('path')
.data(hex.grid.layout)
.enter()
for (let j=0; j < 7; j++) {
viz.append('circle')
.attr('r', (1+(j*2))) // it's a circle! actually lotsa concentric circles.
// .attr('d', hex.hexagon())
.attr('transform', d => `translate(${d.x} ${d.y})`)
.style('fill-opacity', 0)
// .style('stroke-opacity', ((5-j)/5))
.style('stroke-width', 1)
// .style('stroke', (d,i) => colors(j));
.style('stroke', d => !d.pointDensity ? '#fff' : marketColours(d.pointDensity));
}
return svg;
}
Insert cell
Insert cell
Insert cell
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