I map 🗺️ & graph 📈 data 🈸
viewof mapApp = render(({ useSetter }) => {
const [value, setValue] = useState("");
useSetter(value);
return jsx`<${App} />`;
})
function App() {
const [isMapLoaded, setIsMapLoaded] = React.useState(false);
const [map, setMap] = React.useState(null);
return (jsx`
<div className="App">
<${UnfoldedMap} setMap={setMap} setIsMapLoaded={setIsMapLoaded} />
</div>
`);
}
function UnfoldedMap({setMap, setIsMapLoaded}) {
const mapRef = React.useRef(null);
React.useEffect(() => {
const map = mapSDK.createMap({
mapUrl: 'https://studio.unfolded.ai/public/80c800cc-5805-4416-94a5-bd8105cab7f7',
appendToDocument: false,
embed: true,
width: width,
height: 600,
onLoad: () => {
setMap(map);
setIsMapLoaded(true);
}
});
mapRef.current.appendChild(map.iframe);
}, [setMap, setIsMapLoaded]);
return (jsx`
<div className="unfolded">
<div ref=${mapRef} />
</div>
`);
}
mapSDK = import('https://unpkg.com/@unfolded/map-sdk@0.1.1/dist/index.js?module')
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.
