Pack and unpack tabular dataLocation InputForeignObject exporting issueConvert observable code to normal JavascriptPersistent Select InputInputs in gridGroupBy we deserve 🦇Matrix InputFetcher usageComments on notebooksData driven range slidersObservableHQ built in datasetsUtils UsageStylesFetcherUtilsInstant Data Visualizer
Continent Selector
import {continentSelector} from "@bumbeishvili/utils"
viewof continent = continentSelector()
continent
viewof continent1 = createContinentSelector({
width:600,
ignore:['Antarctica','Oceania'],
strokeOpacity:1,
fillOpacity:0.5,
landColor:'gray'
})
continent1
createContinentSelector = function(params) {
const svgWidth = params&¶ms.width||300;
const ignore = params&¶ms.ignore||[];
const landColor = params&¶ms.landColor||'#00E0FF'
let strokeOpacity = params&¶ms.strokeOpacity||1;
let fillOpacity = params&¶ms.fillOpacity||0.5
if(params){
if(!isNaN(params.strokeOpacity)){
strokeOpacity = params.strokeOpacity
}
}
const height = Math.round((210 / 400) * svgWidth);
const svg = d3.select(DOM.svg(svgWidth, height))
.on('click.reset',function(d,i,e,arr){
console.log(d3.event.srcElement.tagName)
if(d3.event.srcElement.tagName =='svg'){
svg.selectAll('.land')
.each(v => v.clicked = false)
.attr('fill', landColor)
.attr('fill-opacity',fillOpacity)
.classed('selected', false)
output('World')
}
})
function output(value) {
const node = svg.node();
node.value = value;
node.dispatchEvent(new CustomEvent('input'))
}
const projection = d3.geoNaturalEarth1()
.fitSize([svgWidth, height], {
type: "Sphere"
});
const graticule = d3.geoGraticule10();
const path = d3.geoPath()
.projection(projection)
svg
.selectAll('.graticule')
.data([graticule])
.join('path')
.attr('class', 'graticule')
.attr('d', path)
.attr('stroke-width', 0.5*svgWidth/1000)
.attr('fill', 'none')
.attr('stroke', landColor)
.attr('pointer-events','none')
svg
.selectAll('.land')
.data(land.features)
.join('path')
.attr('class', 'land')
.attr('d', path)
.attr('fill', landColor)
.attr('stroke', '#CCCCCC')
.attr('stroke-width', 0.5)
.attr('stroke-opacity',strokeOpacity)
.attr('fill-opacity',fillOpacity)
.on('mouseenter.continent', function(d) {
if(ignore.includes(d.properties.CONTINENT)) return;
d3.select(this).classed('hover', true).transition().attr('stroke-opacity',1).attr('stroke', '#FF0000').attr('stroke-width', 2)
})
.on('mouseleave.continent', function(d) {
if(ignore.includes(d.properties.CONTINENT)) return;
d3.select(this)
.classed('hover', false)
.transition()
.attr('stroke','#CCCCCC')
.attr('stroke-opacity',strokeOpacity)
.attr('stroke-width', 0.5)
})
.on('click.continent', function(d) {
if(ignore.includes(d.properties.CONTINENT)) return;
svg.selectAll('.land')
.filter(v => v != d).each(v => v.clicked = false)
.attr('fill', landColor)
.attr('fill-opacity',fillOpacity)
.classed('selected', false)
d.clicked = !d.clicked;
if (d.clicked) {
output(d.properties.CONTINENT)
d3.select(this).attr('fill','#FF0000').attr('fill-opacity',1).classed('selected', true)
} else {
d3.select(this).attr('fill', landColor).attr('fill-opacity',fillOpacity).classed('selected', true)
output('World')
}
})
.filter(d=>!ignore.includes(d.properties.CONTINENT))
.attr('cursor','pointer')
const returnValue = Object.assign(svg.node(), {
value: "World"
})
return returnValue;
}
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.
