Skip to content

Instantly share code, notes, and snippets.

@keikhcheung
Last active November 30, 2017 11:01
Show Gist options
  • Save keikhcheung/bdf43a250283228992b95824fc865f32 to your computer and use it in GitHub Desktop.
Save keikhcheung/bdf43a250283228992b95824fc865f32 to your computer and use it in GitHub Desktop.
TP4-2-Mapping
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var width = 700,
height = 580;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
// On rajoute un groupe englobant toute la visualisation pour plus tard
var g = svg.append( "g" );
// definition de la projection
var projection = d3.geoAlbersUsa()
.translate([width/2, height/2])
.scale([500]);
// On definie une echelle de couleur
var color = d3.scaleQuantize()
.range(["rgb(237,248,233)",
"rgb(186,228,179)",
"rgb(116,196,118)",
"rgb(49,163,84)",
"rgb(0,109,44)"]);
// mapping des donnees spatiales a la projection
var path = d3.geoPath()
.projection(projection);
// Chargement des donnees
d3.csv("us-ag-productivity-2004.csv", function(data) {
console.log(data) // Check link element denomination: .state
//Set input domain for color scale
// Link data min and max values to colour scheme
color.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]);
// Inject data value in CSV table to D3 JavaScript object
d3.json("us-states.json", function(json) {
console.log(json) // Check link element denomination: .properties.name
//On fusionne les donnees avec le GeoJSON
for (var i = 0; i < data.length; i++) {
//Nom de l'etat
var dataState = data[i].state;
//Valeur associee a l'etat
var dataValue = parseFloat(data[i].value);
//Recherche de l'etat dans le GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
//On injecte la valeur de l'Etat dans le json
json.features[j].properties.value = dataValue;
//Pas besoin de chercher plus loin
break;
}
}
}
// Paint graph
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
//on prend la valeur recupere plus haut
var value = d.properties.value;
if (value) {
return color(value);
} else {
// si pas de valeur alors en gris
return "#ccc";
}
});
});
});
</script>
</body>
state value
Alabama 1.1791
Arkansas 1.3705
Arizona 1.3847
California 1.7979
Colorado 1.0325
Connecticut 1.3209
Delaware 1.4345
Florida 1.6304
Georgia 1.3891
Iowa 1.5297
Idaho 1.4285
Illinois 1.5297
Indiana 1.4220
Kansas 1.0124
Kentucky 0.9403
Louisiana 0.9904
Maine 1.3877
Maryland 1.2457
Massachusetts 1.1458
Michigan 1.1058
Minnesota 1.2359
Missouri 1.0212
Mississippi 1.1306
Montana 0.8145
North Carolina 1.3554
North Dakota 1.0278
Nebraska 1.1619
New Hampshire 1.0204
New Jersey 1.2831
New Mexico 0.8925
Nevada 0.9640
New York 1.1327
Ohio 1.2075
Oklahoma 0.7693
Oregon 1.3154
Pennsylvania 1.0601
Rhode Island 1.4192
South Carolina 1.1247
South Dakota 1.0760
Tennessee 0.7648
Texas 0.8873
Utah 0.9638
Virginia 0.9660
Vermont 1.0762
Washington 1.1457
Wisconsin 1.1130
West Virginia 0.5777
Wyoming 0.5712
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment