Published
Edited
Aug 26, 2019
{
const svg = d3.select(DOM.svg(width, height))
// svg.style('background-color',"#111")
var defs = svg.append('defs');
let goo
var filter = defs.append('filter').attr("id", (goo = DOM.uid("gooey")).id);
filter.append('feGaussianBlur')
.attr('in','SourceGraphic')
.attr('stdDeviation','3')
.attr('result','blur');
filter.append('feColorMatrix')
.attr('in','blur')
.attr('mode','matrix')
.attr('values',
'1 0 0 0 0 \
0 1 0 0 0 \
0 0 1 0 0 \
0 0 0 16 -3'
)
.attr('result','gooey');
filter.append('feComposite')
// .attr('in','SourceGraphic')
// .attr('in2','gooey')
// .attr('operator','atop');
svg.append('path')
.datum(world)
.attr('d', geoPath)
.attr('stroke', '#111')
.attr('stroke-width',0.25)
.attr('fill', '#000');
svg.append('g').attr('id', 'circles')
.attr('filter', () => {return gooey ? goo : ''})
.selectAll('.dot')
.data(places.features)
.enter().append('path')
.attr('d',geoPath)
.attr('transform', d => {
var centroid = geoPath.centroid(d),
x = centroid[0],
y = centroid[1];
return "translate(" + x + "," + y + ")"
+ `scale(${(6 - d.properties.scalerank)*bubblesize/10})`
+ "translate(" + -x + "," + -y + ")";
})
.attr('fill', (d,i) => {
return scale(d.properties.scalerank)
})
return svg.node();
}
md`### imports`
places = d3.json("https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places_simple.geojson")
scale = d3.scaleSequential(d3.interpolateRdYlBu).domain([1,5])
height = 600
width = 900
pointDistance = 12
cols = 130
pointGrid = {
let rows = Math.ceil(height / pointDistance);
return d3.range(rows * cols).map(function(el, i) {
return {
x: Math.floor(i % cols) * pointDistance,
y: Math.floor(i / cols) * pointDistance,
datapoint: Math.random()
};
});
}
import {randomColor} from "@fil/random-colors"
import {checkbox, slider} from "@jashkenas/inputs"
// projection = d3.geoEckert4().fitExtent([[0, height*0.05], [width, height*0.95]], world)
import {projectionInput} with {d3} from "@fil/d3-projections"
geoPath = d3.geoPath().projection(projection)
usTopo = d3.json('https://raw.githubusercontent.com/larsvers/learning-d3-mapping-11-1/master/data/us.json')
usGeo = {
const us = (await topojson.feature(usTopo, usTopo.objects.us));
us.features[0].geometry.coordinates = [us.features[0].geometry.coordinates[7]]
return us
}
world = d3.json('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_sovereignty.geojson')
d3 = require("d3", "d3-geo@1", "d3-geo-projection@2", "d3-geo-polygon@1")
topojson = require("topojson-client@3")
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.
