Published
Edited
May 8, 2019
//color function brings in d3 color scale and slices it to fit legend values outlined in sidepanel function
color = function(values) {
let n = values.length;
let colors = d3.schemeYlOrRd[n + 1].slice(1, n + 2); // trim the first color (too light)
let myScale = d3.scaleLinear().domain(values).range(d3.range(8));
let myColor = d3.scaleQuantize().domain([0, n - 1]).range(colors);
return function(d) { return myColor( myScale(d) ) };
}
//sidepanel function has my 2 legend values, creates the labels for them using the color function and sidepanel template created earlier.
sidepanel = {
let values = datasource.choice == 0 ? [0,1000,1500,2000,2500,5000,15000,20000] : [0,35000,45000,55000,65000,80000,100000,110000];
let colorScale = color(values);
let n = values.length;
let rows = values.map((d, i) => ({
color: colorScale(d),
label: d + (i == n - 1 ? "+" : '–' + values[i+1])
}));
let template = d3.select('#sidepanel table')
let legend = template.selectAll('tr')
.data(rows)
legend.exit().remove();
legend.enter()
.append(function() { return row.cloneNode(true) })
.merge(legend)
.each(function(d) {
d3.select(this).select('.swatch').style('background', d.color)
d3.select(this).select('.legend-label').html(d.label)
});
return colorScale;
}
//openlayers variable created to display map in correct projection and add popup functionality
map = {
width;
target.dispatchEvent(new CustomEvent("input"));
let tileLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
const map = new ol.Map({
layers: [ tileLayer ], // Uncomment this line to add the OpenStreetMap layer in the background. This tile is blocking my legend from coming through.
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat ([-77.6450, 38.9300]),
zoom: 8
}),
controls: ol.control.defaults().extend([ new ol.control.ScaleLine() ]),
})
const select = new ol.interaction.Select();
// The documentation for d3.format is here: https://github.com/d3/d3-format
const fmt = d3.format("($,.0f");
select.on("select", event => {
let content = document.getElementById('popup-content')
let coordinate = event.mapBrowserEvent.coordinate;
content.innerHTML = select.getFeatures().getArray()[0].getProperties().county + " County"
+ "<p>Median income in 2016 was " + fmt(select.getFeatures().getArray()[0].getProperties().income2016)
+ "<p>Median income in 2007 was " + fmt(select.getFeatures().getArray()[0].getProperties().income2007)
+ "<p>The difference in Median income is " + fmt(select.getFeatures().getArray()[0].getProperties().incomechange);
popup.setPosition(event.mapBrowserEvent.coordinate);
})
map.addOverlay(popup);
map.addInteraction(select);
invalidation.then(() => map.dispose()); // Specific to OpenLayers
sidepanel()
return map;
}
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.
