⏳
1 mins
read time
Interactive visualizations are a great alternative to static figures for data analysis. The reader is able to define his own story by making its own explorations and get its own conclusions. In this post I show a simple way to get interactive visualization using javascript functions dc.js.
The code can be found at the following gist and the visualization is available at this link. The visualization have to main files:
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
The div elements that are inside the tiles are created using the graph.js
file. This file uses d3.queue to load the
json file ./df.json using
d3.json function
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.
This article shows how to use google analytics api to build a customized dashboard using javascript library dc.js and deploy them using Github Actions
This article shows how to collect data from article shows how to analyze logs using Kibana dashboards. Fluentbit is used for injecting logs to elasticsearch, then it is connected to kibana to get some insights.
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.
Good web reference is related with how fast your web page loads. Google works in a web format called AMP, which makes loading pages faster but also imposes some restrictions, like no external javascript. It's not simple to add API calls in AMP so this post shows how to implement a search fonctionality in a static page.