This is an example taken from d3 which displays NO2 data from the North Kensington monitoring station. By highlighting areas on the lower graph, you can zoom in on the upper graph.
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
Age | Home | Work | Other Indoor | Transport | |
---|---|---|---|---|---|
0-10 | 89 | 7 | 2 | 2 | |
10-20 | 76 | 14 | 5 | 5 | |
20-30 | 74 | 12 | 8 | 6 | |
30-40 | 75 | 12 | 7 | 6 | |
40-50 | 77 | 11 | 7.5 | 4.5 | |
50-60 | 84 | 10 | 6 | 1 | |
60-70 | 90 | 4 | 5 | 1 | |
70-80 | 93 | 1 | 5 | 1 | |
80 | 93 | 1 | 4 | 2 |
This graph shows PM2.5 data collected by BBC reporters over the 28 and 29 of July 2014. The raw data was collected via a Microaeth A51, downloaded, reformatted, and then multiplied by 0.6.
This data shows the BBC PM2.5 data collected in July 2014. Missing data is represented with a straight line between the last and next points.
A demonstration of mapping air pollutio and GPS data simultaneously.
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> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<script type="text/javascript" src="http://calvinmetcalf.github.io/leaflet-ajax/dist/leaflet.ajax.js"></script> | |
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<style> | |
body { | |
padding: 0; | |
margin: 0; |
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
(function(aa){function T(b,a){var c=b.x-a.x,d=b.y-a.y;return c*c+d*d}function wa(b){var a=b.length;if(16>a)return!1;var c,d=Infinity,f=-Infinity,h=Infinity,g=-Infinity;for(c=0;c<a-1;c+=2)d=Math.min(d,b[c]),f=Math.max(f,b[c]),h=Math.min(h,b[c+1]),g=Math.max(g,b[c+1]);c=f-d;g-=h;f=c/g;if(0.85>f||1.15<f)return!1;d={x:d+c/2,y:h+g/2};c=(c+g)/4;h=c*c;for(c=0;c<a-1;c+=2)if(g=T({x:b[c],y:b[c+1]},d),0.8>g/h||1.2<g/h)return!1;return!0}function ka(b,a){var c={};b/=U;a/=U;var d=xa,f;f=0>=a?90:1<=a?-90:(2*ya(za(F* | |
(1-2*a)))-J)/F*180;c[d]=f;c[Aa]=360*(1===b?1:(b%1+1)%1)-180;return c}function da(b,a){var c=V(1,K(0,0.5-Ba(la(Ca+J*b/180))/F/2));return{x:(a/360+0.5)*U<<0,y:c*U<<0}}function W(b){for(var a=D+q,c=B+n,d=0,f=b.length-3;d<f;d+=2)if(b[d]>q&&b[d]<a&&b[d+1]>n&&b[d+1]<c)return!0;return!1}function Da(){M||(M=setInterval(function(){for(var b=C.items,a=!1,c=0,d=b.length;c<d;c++)1>b[c].scale&&(b[c].scale+=0.1,1<b[c].scale&&(b[c].scale=1),a=!0);x.render();a||(clearInterval(M),M=null)},33))}function ea(b){N=X+ | |
b.x;O=B+b.y;x.r |
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
(function(aa){function T(b,a){var c=b.x-a.x,d=b.y-a.y;return c*c+d*d}function wa(b){var a=b.length;if(16>a)return!1;var c,d=Infinity,f=-Infinity,h=Infinity,g=-Infinity;for(c=0;c<a-1;c+=2)d=Math.min(d,b[c]),f=Math.max(f,b[c]),h=Math.min(h,b[c+1]),g=Math.max(g,b[c+1]);c=f-d;g-=h;f=c/g;if(0.85>f||1.15<f)return!1;d={x:d+c/2,y:h+g/2};c=(c+g)/4;h=c*c;for(c=0;c<a-1;c+=2)if(g=T({x:b[c],y:b[c+1]},d),0.8>g/h||1.2<g/h)return!1;return!0}function ka(b,a){var c={};b/=U;a/=U;var d=xa,f;f=0>=a?90:1<=a?-90:(2*ya(za(F* | |
(1-2*a)))-J)/F*180;c[d]=f;c[Aa]=360*(1===b?1:(b%1+1)%1)-180;return c}function da(b,a){var c=V(1,K(0,0.5-Ba(la(Ca+J*b/180))/F/2));return{x:(a/360+0.5)*U<<0,y:c*U<<0}}function W(b){for(var a=D+q,c=B+n,d=0,f=b.length-3;d<f;d+=2)if(b[d]>q&&b[d]<a&&b[d+1]>n&&b[d+1]<c)return!0;return!1}function Da(){M||(M=setInterval(function(){for(var b=C.items,a=!1,c=0,d=b.length;c<d;c++)1>b[c].scale&&(b[c].scale+=0.1,1<b[c].scale&&(b[c].scale=1),a=!0);x.render();a||(clearInterval(M),M=null)},33))}function ea(b){N=X+ | |
b.x;O=B+b.y;x.r |
Test
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
<html> | |
<head> | |
<title>The d3 test</title> | |
<style> | |
.chart { | |
} | |
.main text { | |
font: 10px sans-serif; |
OlderNewer