This bar chart uses Chart.js to plot 2008 data land composition in Georgian Counties.
It uses the CartoDB SQL API to pull these data, used to make this map into a chart.
Source: Georgia Polygons + Georgian Census Demographics
Data Store: CartoDB
Color: ColorBrewer-Diverging
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Land Composition (GA)</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> | |
| <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
| <style> | |
| canvas { | |
| height: 500px; | |
| margin: 5px; | |
| width: 920px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <script> | |
| var sql = cartodb.SQL({ user: 'aureliamoser' }); | |
| sql.execute("SELECT *, ceil (100 * aland / ST_Area(the_geom::geography)) perc_land, ceil (100 * awater / ST_Area(the_geom::geography)) perc_water, ceil(100 * (awater + aland) / ST_Area(the_geom::geometry)) perc_total FROM aureliamoser.georgia_counties LIMIT 40") | |
| .done(function(data) { | |
| console.log(data); | |
| var total = []; | |
| var labels = []; | |
| for (i in data.rows) { | |
| total.push(data.rows[i].aland); | |
| labels.push(data.rows[i].a_name); | |
| } | |
| console.log(data); | |
| var lineChartData = { | |
| labels : labels, | |
| datasets : [ | |
| { | |
| barDatasetSpacing : 0, | |
| barValueSpacing : 0, | |
| fillColor : "#229A00", | |
| strokeColor : "#005824", | |
| pointColor : "#CCECE6", | |
| pointStrokeColor : "#fff", | |
| data : total | |
| } | |
| ] | |
| } | |
| let context = document.getElementById("canvas").getContext("2d"); | |
| var myBarChart = new Chart(context, { | |
| type: 'bar', | |
| data: lineChartData | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
