Examples of the filters and histogram api working
This commit is contained in:
parent
fd5bc0f732
commit
71fc89a8d8
88
examples/bi.html
Normal file
88
examples/bi.html
Normal file
@ -0,0 +1,88 @@
|
||||
|
||||
<html>
|
||||
<link rel="stylesheet" href="vendor/leaflet.css" />
|
||||
<style>
|
||||
#map, html, body {
|
||||
width: 100%; height: 100%; padding: 0; margin: 0;
|
||||
}
|
||||
#title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
color: white;
|
||||
font-size: 27px;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id='graphs'></div>
|
||||
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
|
||||
<script src="../dist/torque.full.uncompressed.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
// define the torque layer style using cartocss
|
||||
// this creates a kind of density map
|
||||
//color scale from http://colorbrewer2.org/
|
||||
var CARTOCSS = [
|
||||
'Map {',
|
||||
'-torque-time-attribute: "tpep_dropoff_datetime";',
|
||||
'-torque-aggregation-function: "avg(temp::float)";',
|
||||
'-torque-frame-count: 1;',
|
||||
'-torque-animation-duration: 15;',
|
||||
'-torque-resolution: 1',
|
||||
'}',
|
||||
'#layer {',
|
||||
' marker-width: 1;',
|
||||
' marker-fill-opacity: 1.0;',
|
||||
' marker-fill: #fff5eb; ',
|
||||
' marker-type: ellipse;',
|
||||
' [value > 1] { marker-fill: #fee6ce; }',
|
||||
' [value > 2] { marker-fill: #fdd0a2; }',
|
||||
' [value > 4] { marker-fill: #fdae6b; }',
|
||||
' [value > 10] { marker-fill: #fd8d3c; }',
|
||||
' [value > 15] { marker-fill: #f16913; }',
|
||||
' [value > 20] { marker-fill: #d94801; }',
|
||||
' [value > 25] { marker-fill: #8c2d04; }',
|
||||
'}'
|
||||
].join('\n');
|
||||
|
||||
|
||||
var map = new L.Map('map', {
|
||||
zoomControl: true,
|
||||
center: [40.76045572900912, -73.97601127624512],
|
||||
zoom: 13
|
||||
});
|
||||
|
||||
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
|
||||
attribution: 'CartoDB'
|
||||
}).addTo(map);
|
||||
|
||||
var torqueLayer = new L.TorqueLayer({
|
||||
user : 'stuartlynn',
|
||||
table : 'sampled_taxi_data',
|
||||
cartocss: CARTOCSS,
|
||||
provider: "filterable_sql_api"
|
||||
});
|
||||
torqueLayer.addTo(map);
|
||||
|
||||
var graphs=[]
|
||||
// var ndx = crossfilter({});
|
||||
//
|
||||
// torqueLayer.onNewData(function(){
|
||||
// data = torqueLayer.getValues()
|
||||
// ndx = crossfilter(data)
|
||||
// })
|
||||
|
||||
function addGraph(variable, type){
|
||||
var dataDim = ndx.dimension(function(d){return d[variable]})
|
||||
var graphID = "variable_graph"
|
||||
$("graphs").append("<div id='"+graphID+"'></div>")
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user