This presentation will show how it is possible to create a combined dashboard with geographical and non-geographical components by combining CartoDB's wizards, for the geographical part, and the SQL API and D3.js to add charts based on a particular region, but non-geographical in nature. CartoDB allows users to quickly produce and share powerful visualizations of geographical data by overlaying vector data sources on a choice of free, 3rd-party, XYZ tiles, using a number of wizards such as chloropleth, bubble, category and torque. Often, however, a user needs to visualize data that comes from a particular geographic region, but with a visualization that is non-geograhical in nature and would be hard to show on a map,but could be better understood with a bar, pie, line or some other chart. An example might be, the percentage of energy coming from different sources (solar, wind, coal, gas, nuclear) for a region or the changes in this composition over time. For this reason, we turn to D3.js. D3.js has become one of the leading tools for visualizations, as it is data-driven, and manipulates the DOM directly, and outputs SVG, which makes for very fast, scalable and beautiful visualizations. It also has support for numerous geographic projections, and supports some useful algorithms, for example Voronoi polygonization. While D3.js accepts input data in a variety of formats, one of the most flexible and common is JSON. Fortunately, this is also the default and preferred format returned by the CartoDB SQL API, which serves as the glue between the data held in CartoDB and the D3.js dashboard. It will be shown how with a CartoDB.js (Leaflet) click handler, and the SQL API, it is easy to return JSON for a particular area that can be dropped directly into a D3.js chart. It will also be shown how the D3.js nesting functions work that allows data to be aggregated (similar to a SQL group by) but in a way that is more amenable to use in D3.js and simpler than using row_to_json/array_to_json directly in the SQL API Postgres query. As CartoDB is cloud based, and both CartoDB and D3.js are based on Javascript, it is possible to create powerful dashboards without any server infrastructure at all, so should appeal to data scientists and others wishing to rapidly share visualizations, without the overhead of maintaining servers.
Dynamic dashboards with D3.js and CartoDB — John Powell
Loading comments...