This program fetches data from the Data Canvas - Sense Your City API.
It shows how the API can be accessed using async.js for asynchronous control flow. Data is fetched for each city separately, then combined, then output as CSV.
The API has a limitation of returning at most 1000 rows.
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<!-- Runs the main program found in main.js. -->
<script data-main="main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<!-- Configure RequireJS paths for third party libraries. -->
<script>
requirejs.config({
paths: {
d3: "//d3js.org/d3.v3.min",
jquery: "//code.jquery.com/jquery-2.1.1.min",
lodash: "//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.min",
async: "//cdnjs.cloudflare.com/ajax/libs/async/0.9.0/async"
}
});
</script>
<!-- Include CSS that styles the visualization. -->
<link rel="stylesheet" href="styles.css">
<title>Fetching Data</title>
</head>
<body>
<!-- The visualization will be injected into this div. -->
<p>
day.csv - past day, every 5 minutes
<span class="loader" id="day-loading"><img src="ajax-loader.gif"></span> <br>
<textarea id="day" rows="15"></textarea>
</p>
<p>
week.csv - past week, every hour
<span class="loader" id="week-loading"><img src="ajax-loader.gif"></span> <br>
<textarea id="week" rows="15"></textarea>
</p>
<p>
month.csv - past month, every hour
<span class="loader" id="month-loading"><img src="ajax-loader.gif"></span> <br>
<textarea id="month" rows="15"></textarea>
</p>
<p>
all.csv - all available data from the API, every 5 minutes
<span class="loader" id="all-loading">
<img src="ajax-loader.gif">
<span id="all-counter"></span>
</span> <br>
<textarea id="all" rows="15"></textarea>
</p>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js