I used bulma.io css framework to set the differents charts in a responsive way. This framework provides a tiles disposition to create a grid of content.
The structure of the grid in terms of bulma instructions is the following:
tile is-ancestor | ├───tile is-vertical is-8 | | | ├───tile | | | | | ├───tile is-parent is-vertical | | | ├───tile is-child | | | └───tile is-child | | | | | └───tile is-parent | | └───tile is-child | | | └───tile is-parent | └───tile is-child | └────tile | ├───tile is-parent | └───tile is-child | └───tile is-parent └───tile is-child
div elements that are inside the tiles are created using the
file. This file uses d3.queue to load the
and wait until it finish to execute the function makeGraphs.
The function makeGraphs:
The barplots are made using standard dc.js api. They are connected through crossfilter.js so when each dimension each filter, the results can be see in the other dimensions. In addition, the Leaflet map is connected to the charts so when one chart is filtered, the results are shown in the heatmap.
The final interactive visualization is available in this block link
Services like Mopidy and Snapcast are ideal to create a multiroom streaming audio player using devices like the RaspberryPi or android telephones. This posts presents a web interface that uses the state of the art web technologies and integrates nicely with Mopidy and Snapcast.
and share it with your friends: