The avatar for @emuanalytics
Emu Analytics
Public
Flo.w Examples
Edited
Dec 5, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sampleBoroughData = context.flowClient.datasets.query('borough_data', {
limit: 10
})
Insert cell
Insert cell
Insert cell
datasetAttributes('pop_density', context)
Insert cell
html`
<!-- Flo.w map -->
<flow-map id="map1" map-style="fjord" center="-0.2,51.5,10" style="height: 350px;">

<!-- Air quality point data -->
<flow-map-data-source name="pop_polys" src="pop_density">
</flow-map-data-source>

<!-- Fill layer -->
<flow-map-layer name="population" type="fill" source="pop_polys">
fill-color: from-palette('RdYlGn', @pop_den, 0, 1000, 3000, 5000, 50000, true);
fill-outline-color: white;
</flow-map-layer>

<!-- Labels layer -->
<flow-map-layer name="labels" type="symbol" source="pop_polys" min-zoom=12>
text-field: @lsoa11nm;
text-color: white;
text-size: 10;
</flow-map-layer>

</flow-map>
`
Insert cell
Insert cell
Insert cell
datasetAttributes("greenspace", context)
Insert cell
html`
<!-- Flo.w map -->
<flow-map id="map1" map-style="fjord" center="-0.2,51.5,10" style="height: 350px;">

<!-- Air quality point data -->
<flow-map-data-source name="greenspace_polys" src="greenspace">
</flow-map-data-source>

<!-- Fill layer -->
<flow-map-layer name="greenspace" type="fill" source="greenspace_polys">
fill-color: from-palette('RdYlGn', @greenspace_index, 0, 0.006981, 0.027576, 0.066794, 0.70094);
fill-outline-color: white;
</flow-map-layer>

<!-- Labels layer -->
<flow-map-layer name="labels" type="symbol" source="greenspace_polys" min-zoom=12>
text-field: @name;
text-color: white;
text-size: 10;
</flow-map-layer>

</flow-map>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
datasetAttributes('train_positions_live', context)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more