Skip to content

Instantly share code, notes, and snippets.

@pierrelorioux
Created March 31, 2013 13:31
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 pierrelorioux/5280594 to your computer and use it in GitHub Desktop.
Save pierrelorioux/5280594 to your computer and use it in GitHub Desktop.
<!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>
@twitter
</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