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 slidersdeck.gl Country Layers3D 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 HexagonLayer3d Area chart - three.jsD3 + Rough + Indie Flower
Emigration - Georgia (Country)
deckgl = {
return new deck.DeckGL({
container,
map: mapboxgl,
mapStyle: 'https://free.tilehosting.com/styles/darkmatter/style.json?key=U0iNgiZKlYdwvgs9UPm1',
longitude: 20.66,
latitude: 45.5231,
zoom: 3,
pitch: 40,
});
}
dataColumns = dataStr.split('\n')
.filter(d=>d)
.map(d=>d.split(' '))
.filter((d,i)=>i<10)
emigrData = dataColumns.map((d,i)=>{
return Object.assign({
name:coords[i][2],
nameGe:d[0],
male:Number(d[2].replace(',','')),
female:Number(d[3].replace(',',''))
},{
coordinates:coords[i]
})
})
maxMale = Math.max.apply(Array,emigrData.map(d=>d.male))
maxFemale = Math.max.apply(Array,emigrData.map(d=>d.female))
restructuredData = emigrData.map(d=>{
return {
from:{"name":"Georgia",coordinates:[ 43.3569,42.3154]} ,
to:d
};
})
data = restructuredData.map(r=>{
var males = Array.from({length:r.to.male}).map(d=>Object.assign({disp:r.to.male,color:'#80C9FF'},r)) ;
var females = Array.from({length:r.to.female}).map(d=>Object.assign({disp:r.to.female,color:'#FFA7D4'},r));
return males.concat(females)
})
.reduce((a,b)=>a.concat(b))
.map(d=>{
var shuffled = shuffleIt(d.from.coordinates.slice(),1)
var shuffledTo = shuffleIt(d.to.coordinates.slice(),diff(d.disp))
return Object.assign({},
d,
{from:Object.assign({},d.from,{coordinates:shuffled})},
{to:Object.assign({},d.to,{coordinates:shuffledTo})}
)
})
shuffleIt([132.0218982355762, 27.101322670112367],1)
getColor({color:'red'})
function shuffleIt(coords,n){
return [coords[0]+Math.random()*n-n/2,coords[1]+Math.random()*n-n/2]
}
diff = function(n){
return n/maxMale * dispersion
}
function getColor(d){
var color = d3.rgb(d.color);
return [color.r,color.g,color.b]}
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.
