Created
March 31, 2013 13:31
-
-
Save pierrelorioux/5280594 to your computer and use it in GitHub Desktop.
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> | |
<!-- saved from url=(0043)http://codefusionlab.com/slider_steps2.html --> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<meta name="author" content="Pierre Lorioux"> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=9"> | |
<!-- slider links --> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> | |
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script> | |
<!-- map links --> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" /> <![endif]--> | |
<script type="text/javascript" src="http://leafletjs.com/dist/leaflet.js"></script> | |
<script type="text/javascript" src="https://cartodb.s3.amazonaws.com/embed/wax.g.js"></script> | |
<link rel="stylesheet" href="bootstrap\css\bootstrap.css" /> | |
<script src="d3.js"></script> | |
<script> | |
$(document).ready(function() { | |
var map = L.map('map'); | |
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { | |
maxZoom: 13 | |
}).addTo(map); | |
map.setView([23.241346, 26.3671], 3); | |
//first Pie | |
var url2 = "http://wathab.cartodb.com/api/v2/sql?q=SELECT cartodb_id, ST_AsText(the_geom)as coords , annee FROM wathab &api_key=1dd48db954aeb9339adb14e6deffd3e176b1d5e3" ; | |
$.ajax({ | |
url: url2, | |
type: 'GET', | |
dataType: 'JSON', | |
success:function(result){ | |
$.each(result.rows,function(i, val) { | |
var coordstext = val.coords ; | |
var splitlatlon = coordstext.split(' '); | |
var tolat = splitlatlon[0]; | |
var tolon = splitlatlon[1]; | |
var lat = tolat.substr(6,12); | |
var lon = tolon.substr(0,6); | |
var mark = new L.Marker(new L.LatLng(lon, lat)); | |
}); | |
var len = result.rows.length; | |
console.log(len-1); | |
//for (i = 0; i < len; i++) { | |
// console.log(result.rows[i].annee); | |
//} | |
for (i = 0; i < len; i++) { | |
console.log(result.rows[len-i].annee); | |
} | |
var coordstext = result.rows[0].coords; | |
var splitlatlon = coordstext.split(' '); | |
var tolat = splitlatlon[0]; | |
var tolon = splitlatlon[1]; | |
var lat = tolat.substr(6,12); | |
var w = 600; | |
var h = 250; | |
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, | |
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; | |
var xScale = d3.scale.ordinal() | |
.domain(d3.range(dataset.length)) | |
.rangeRoundBands([0, w], 0.05); | |
var yScale = d3.scale.linear() | |
.domain([0, d3.max(dataset)]) | |
.range([0, h]); | |
//Create SVG element | |
var svg = d3.select(".span4") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
//Create bars | |
svg.selectAll("rect") | |
.data(dataset) | |
.enter() | |
.append("rect") | |
.attr("x", function(d, i) { | |
return xScale(i); | |
}) | |
.attr("y", function(d) { | |
return h - yScale(d); | |
}) | |
.attr("width", xScale.rangeBand()) | |
.attr("height", function(d) { | |
return yScale(d); | |
}) | |
.attr("fill", function(d) { | |
return "rgb(0, 0, " + (d * 10) + ")"; | |
}); | |
//Create labels | |
svg.selectAll("text") | |
.data(dataset) | |
.enter() | |
.append("text") | |
.text(function(d) { | |
return d; | |
}) | |
.attr("text-anchor", "middle") | |
.attr("x", function(d, i) { | |
return xScale(i) + xScale.rangeBand() / 2; | |
}) | |
.attr("y", function(d) { | |
return h - yScale(d) + 14; | |
}) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px") | |
.attr("fill", "white"); | |
} | |
}); | |
function getmarkers() { | |
var url2 = "http://wathab.cartodb.com/api/v2/sql?q=SELECT cartodb_id, ST_AsText(the_geom)as coords , annee FROM wathab &api_key=1dd48db954aeb9339adb14e6deffd3e176b1d5e3" ; | |
$.ajax({ | |
url: url2, | |
type: 'GET', | |
dataType: 'JSON', | |
success:function(result){ | |
$.each(result.rows,function(i, val) { | |
var coordstext = val.coords ; | |
var splitlatlon = coordstext.split(' '); | |
var tolat = splitlatlon[0]; | |
var tolon = splitlatlon[1]; | |
var lat = tolat.substr(6,12); | |
var lon = tolon.substr(0,6); | |
var mark = new L.Marker(new L.LatLng(lon, lat)); | |
mark.addTo(map); | |
var quatre= "3"; | |
//Width and height | |
var w = 300; | |
var h = 300; | |
var dataset = [ lat, lon]; | |
var outerRadius = w / 2; | |
var innerRadius = 0; | |
var arc = d3.svg.arc() | |
.innerRadius(innerRadius) | |
.outerRadius(outerRadius); | |
var pie = d3.layout.pie(); | |
//Easy colors accessible via a 10-step ordinal scale | |
var color = d3.scale.category10(); | |
//Create SVG element | |
var svg = d3.select(".span4") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
//Set up groups | |
var arcs = svg.selectAll("g.arc") | |
.data(pie(dataset)) | |
.enter() | |
.append("g") | |
.attr("class", "arc") | |
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); | |
//Draw arc paths | |
arcs.append("path") | |
.attr("fill", function(d, i) { | |
return color(i); | |
}) | |
.attr("d", arc); | |
//Labels | |
arcs.append("text") | |
.attr("transform", function(d) { | |
return "translate(" + arc.centroid(d) + ")"; | |
}) | |
.attr("text-anchor", "middle") | |
.text(function(d) { | |
return d.value; | |
}); | |
}); | |
} | |
}); | |
}; | |
getmarkers(); | |
}); | |
</script> | |
<style> | |
#map { height: 515px; width:600px;z-index: 0 ;left:20px;}; | |
</style> | |
</head> | |
<body style="background: #EEEEEE; color: #333333; font-size: 11px;"> | |
<div class="row"> | |
<div class="span9">... | |
<div id="map"></div></div> | |
<div class="span4">...</div> | |
</div> | |
<div class = "container"> | |
<table class="table table-bordered table-hover " style="top:500px"><thead> | |
<tr> | |
<br> | |
<br> | |
</th><th> | |
First Name | |
</th><th> | |
Last Name | |
</th><th> | |
Username | |
</th></thead><tbody> | |
<tr> | |
<td> | |
1 | |
</td><td> | |
Mark | |
</td><td> | |
Otto | |
</td><td> | |
@mdo | |
</td></tr><tr><td> | |
2 | |
</td><td> | |
Jacob | |
</td><td> | |
Thornton | |
</td><td> | |
@fat | |
</td></tr><tr><td> | |
3 | |
</td><td colspan="2"> | |
Larry the Bird | |
</td><td> | |
</td></tr></tbody></table> | |
</div> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment