Skip to content

Instantly share code, notes, and snippets.

@auremoser
Created July 6, 2015 16:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save auremoser/6c51769ef05b812690fc to your computer and use it in GitHub Desktop.
Save auremoser/6c51769ef05b812690fc to your computer and use it in GitHub Desktop.
IL: Air Pollution Chart

This bar chart uses ChartJS to plot air pollution data by municipality in parts of Israel.

It uses the CartoDB SQL API to pull these data, used to make this map into a chart.

SQL to pull the data munged with some inconsitencies to push out a quick chart as a demo.

SELECT * FROM pollutant_emissions_merge WHERE mun_eng <> 'No Jurisdiction' ORDER BY industry LIMIT 50

Source: Air Pollution Map

Data Store: CartoDB

Color: ColorBrewer-Diverging

<!DOCTYPE html>
<html>
<head>
<title>Industrial Pollution IL </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>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
canvas {
height: 500px;
margin: 10px;
padding: 5px;
width: 900px;
font-size: 13px;
}
#info {
position: absolute;
left: 50px;
top: 10px;
}
.info {
background: rgba(255,255,255,0.9);
border: 1px solid #999;
border-radius: 5px;
font-family: 'Consolas', sans-serif;
font-size: 13px;
/*margin: 15px;
pad*/ding: 5px;
text-align: center;
width: 200px;
z-index: 100;
}
.info-title {
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.info-sql {
font-size: 11px;
text-align: left;
padding: 5px;
margin: 0px;
}
.info-sql h4{
color: #41B6C4;
margin: 0px;
padding: 0px;
}
footer {
background: rgba(255,255,255,0.9);
color: #A1DAB4;
font-family: 'Consolas', sans-serif;
font-weight: bold;
font-size: 24px;
margin: 0px;
position: fixed;
padding: 20px;
top: 60%;
width: 100%;
}
footer h5 {
color: #41B6C4;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="info" class="info">
<div class='info-title'> SQL API Query</div>
<ul class="info-sql">
<h4>SELECT</h4> * <h4>FROM</h4> pollutant_emissions_merge <h4>WHERE</h4> mun_eng <> 'No Jurisdiction' <strong>ORDER BY</strong> industry <strong>LIMIT</strong> 50
</ul>
</div>
</div>
<footer>IL Air Pollution: <strong> a small SQL API demo</strong></footer>
<script>
var sql = cartodb.SQL({ user: 'aureliamoser' });
sql.execute("SELECT * FROM pollutant_emissions_merge WHERE mun_eng <> 'No Jurisdiction' ORDER BY industry LIMIT 50")
.done(function(data) {
console.log(data);
var total = [];
var labels = [];
for (i in data.rows) {
total.push(data.rows[i].industry);
labels.push(data.rows[i].mun_eng);
}
console.log(data);
var lineChartData = {
labels : labels,
datasets : [
{
barDatasetSpacing : 0,
barValueSpacing : 0,
fillColor : "#A1DAB4",
strokeColor : "#A1DAB4",
tooltipFillColor: "#41B6C4",
pointColor : "#005824",
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