Network Data VisualizationBrainBrowser - Volume ViewerBrainBrowser - Volume Viewer ColoredBrainBrowser - Surface ViewerSimple stacked bar chartUS Map - State Grid - Metro transitions on canvasBumpy EarthHeatmap GridScatterPlotD3 V7 Org Chart - last updated at 2022 AugD3 v6 force graph with natural drag attractionCollapsible radial dendrogramSimple d3.v6 TimelinePolygon Over MapboxSingle row bar with labelsArea & Line chartData driven range sliderThree.js - wooden bar chartd3.v5 Org Chart - last updated at Jun 20223D Pie Chart 😈GDP SimulationInchlibData driven range sliders3D bar chart portclx. porting 3D Scatter Plot Using three.jsclx. Porting spherical coordinatesPorting 3d-force-graph rotation examplePorting d3-3d scatterplot exampleclx. Spinnable planetsPopulation density in Georgiaclx. deck.gl GeoJsonLayer ExampleRealty Property Transactions in Georgiaclx. Deckgl HexagonLayerEmigration - Georgia (Country)3d Area chart - three.jsD3 + Rough + Indie Flower
deck.gl Country Layers
container = html `<div style="height:600px"><div id="tooltip"></div></div>`
lightSettings = {
return {
lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
ambientRatio: 0.7,
diffuseRatio: 0.6,
specularRatio: 0.2,
lightsStrength: [0.8, 0.0, 0.8, 0.0],
numberOfLights: 1
};
}
{
const geojsonLayer = new deck.GeoJsonLayer({
data,
opacity: 1,
filled: true,
extruded: true,
lightSettings,
elevationScale:5000,
getElevation: f => f.properties.name.length*10,
getFillColor: f => colorScale(f.properties.name.length),
getLineColor: f => [255, 255, 255],
pickable: true,
onHover
});
deckgl.setProps({layers: [geojsonLayer]});
return geojsonLayer;
}
tooltip = container.querySelector('#tooltip')
data = d3.json('https://raw.githubusercontent.com/bumbeishvili/d3js-boilerplates/gh-pages/Maps/World/world_countries.json')
scale = d3.scaleLinear().domain([7,20]).range([0,5])
Math.round(scale(0))
colorArr = ['#EBF8FC','#BCD2E8','#99BBDD','#8C92CA','#9248AB','#8E007F']
.map(d=>d3.hcl(d))
.map(d=>d.rgb())
.map(d=>[Math.round(d.r),Math.round(d.g),Math.round(d.b)])
colorScale = {
const COLOR_SCALE = colorArr;
return x => {
const i = Math.round(scale(x));
if (x < 0) {
return COLOR_SCALE[i] || COLOR_SCALE[0];
}
return COLOR_SCALE[i] || COLOR_SCALE[COLOR_SCALE.length - 1];
};
}
deckgl = {
return new deck.DeckGL({
container,
map: mapboxgl,
// This token is for demo purpose only and rotated regularly. Get your own token at https://www.mapbox.com
mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
mapStyle: 'mapbox://styles/mapbox/dark-v9',
latitude: 49.254,
longitude: 20.13,
zoom: 1,
maxZoom: 16,
pitch: 45
});
}
onHover = {
return function(info) {
const {x, y, object} = info;
if (object) {
tooltip.style.top = `${y}px`;
tooltip.style.left = `${x}px`;
tooltip.innerHTML = `
<div><b>${object.properties.name}</b></div>
`;
} else {
tooltip.innerHTML = '';
}
};
}
mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')
d3 = require("https://d3js.org/d3.v5.min.js")
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.
