This bar chart uses ChartJS to plot Barcelona building footprint areas by Ille 9 name.
It uses the CartoDB SQL API to pull these data, used to make this map into a chart.
Source: CartoBCN
Data Store: CartoDB
Last active
August 29, 2015 14:20
-
-
Save auremoser/079b89bf52d8d66ab0aa to your computer and use it in GitHub Desktop.
BCN Building Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>BCN Habitants x Parcela (SQ/M) </title> | |
| <script src="http://www.chartjs.org/assets/Chart.js"></script> | |
| <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script> | |
| <style> | |
| canvas { | |
| height: 500px; | |
| margin: 5px; | |
| width: 900px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <script> | |
| var sql = cartodb.SQL({ user: 'aureliamoser' }); | |
| // you could use person_area in your "total" but the results would be too divergent for a pretty chart | |
| sql.execute("SELECT *, CASE WHEN habitants > 0 THEN ceil(ST_Area(the_geom::geography)/habitants) ELSE null END person_area FROM parcelas_islas_barcelona LIMIT 25") | |
| .done(function(data) { | |
| console.log(data); | |
| var total = []; | |
| var labels = []; | |
| for (i in data.rows) { | |
| // change these variables to change graph rendering | |
| total.push(data.rows[i].nhabitatge); | |
| labels.push(data.rows[i].bcn_ille_9); | |
| } | |
| console.log(data); | |
| var lineChartData = { | |
| labels : labels, | |
| datasets : [ | |
| { | |
| barDatasetSpacing : 0, | |
| barValueSpacing : 0, | |
| fillColor : "#F03B20", | |
| strokeColor : "#FD8D3C", | |
| tooltipFillColor: "rgba(0,0,0,0.8)", | |
| pointColor : "#FECC5C", | |
| pointStrokeColor : "#fff", | |
| data : total | |
| } | |
| ] | |
| } | |
| var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment