60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<head>
|
|
<style> body { margin: 0; } </style>
|
|
|
|
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
|
|
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
|
|
<script src="//unpkg.com/babel-standalone"></script>
|
|
|
|
<script src="//unpkg.com/react-globe.gl"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="globeViz"></div>
|
|
|
|
<script type="text/jsx">
|
|
// Gen random data
|
|
var data = {};
|
|
axios.get("http://localhost:3100/alerts").then(res => {
|
|
data = res.data;
|
|
console.log(data)
|
|
ReactDOM.render(
|
|
<Globe
|
|
globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
|
|
backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
|
|
// edges
|
|
arcsData={data.arc}
|
|
arcColor={(d) => [d.color[0], d.color[1]]}
|
|
arcDashLength={(d) => d.stroke - 0.1 + 0.3}
|
|
// arcDashLength={(d) => d.stroke - 0.1}
|
|
arcDashGap={(d) => 0.1 + (1 - (d.stroke - 0.1))}
|
|
arcDashAnimateTime={(d) => (1.1 - d.stroke) * 5000 + 2000}
|
|
arcStroke={"stroke"}
|
|
//arcCircularResolution={64}
|
|
// arcLabel={() => "test"}
|
|
// labels
|
|
labelsData={data.loc}
|
|
labelLat={(d) => d.lat}
|
|
labelLng={(d) => d.lng}
|
|
labelText={(d) => d.name}
|
|
labelSize={(d) => 0.5 + d.size}
|
|
labelDotRadius={(d) => 0.5 + d.size}
|
|
labelColor={(d) => d.color}
|
|
labelResolution={2}
|
|
// bars
|
|
hexBinPointsData={data.loc}
|
|
hexBinPointWeight="size"
|
|
//hexAltitude={(d) => d.sumWeight / 4}
|
|
hexBinResolution={4}
|
|
hexTopColor={(d) => d.color}
|
|
hexSideColor={(d) => d.color}
|
|
hexBinMerge={true}
|
|
enablePointerInteraction={false}
|
|
/>,
|
|
document.getElementById('globeViz')
|
|
);
|
|
}).catch(err => alert(err))
|
|
|
|
|
|
</script>
|
|
</body> |