Skip to content

Instantly share code, notes, and snippets.

@ByronHan333

ByronHan333/.block

Created April 23, 2018 06:50
Show Gist options
  • Save ByronHan333/0532d07bc3c02bee3852faadeb851c56 to your computer and use it in GitHub Desktop.
Save ByronHan333/0532d07bc3c02bee3852faadeb851c56 to your computer and use it in GitHub Desktop.
Download ZIP
total go to france
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 1000;
var h = 1000;
//Define map projection
var projection = d3.geoAlbersUsa()
.translate([w/2, h/2])
.scale([1000]);
//Define path generator
var path = d3.geoPath()
.projection(projection);
//Define quantize scale to sort data values into buckets of color
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)"]);
//Colors derived from ColorBrewer, by Cynthia Brewer, and included in
//https://github.com/d3/d3-scale-chromatic
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in agriculture data
d3.csv("nasfa.csv", function(data) {
//Set input domain for color scale
color.domain([
d3.min(data, function(d) { return Math.log(d.percent_abroad_france); }),
d3.max(data, function(d) { return Math.log(d.percent_abroad_france); })
]);
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//Merge the ag. data and GeoJSON
//Loop through once for each ag. data value
for (var i = 0; i < data.length; i++) {
//Grab state name
var dataState = data[i].state;
//Grab data value, and convert from string to float
var dataValue = Math.log(parseFloat(data[i].percent_abroad_france));
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
//Copy the data value into the JSON
json.features[j].properties.value = dataValue;
//Stop looking through the JSON
break;
}
}
}
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
//Get data value
var value = d.properties.value;
if (value) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "#ccc";
}
});
svg.append("text")
.attr("class", "caption")
.attr("x", 400)
.attr("y", 260)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Percentage of student to France(denominator total enrolled in the state)");
});
});
</script>
</body>
</html>
Raw
nasfa.csv
state students_abroad total_students percent_abroad students_abroad_france percent_abroad_france percentage_given_abroad
Alabama 3,562 302,959 1.18% 31 0.000102324 0.008702976
Alaska 82 31,331 0.26% 5 0.000159586 0.06097561
Arizona 4,657 649,732 0.72% 63 9.70E-05 0.013528022
Arkansas 1,717 168,402 1.02% 7 4.16E-05 0.004076878
California 32,125 2,688,355 1.19% 789 0.000293488 0.024560311
Colorado 5,524 348,098 1.59% 108 0.000310257 0.01955105
Connecticut 4,618 199,666 2.31% 121 0.000606012 0.026201819
Delaware 1,572 60,392 2.60% 10 0.000165585 0.006361323
District of Columbia 5,545 93,995 5.90% 142 0.001510719 0.025608656
Florida 11,543 1,083,262 1.07% 159 0.000146779 0.013774582
Georgia 11,429 531,299 2.15% 287 0.000540185 0.025111558
Hawaii 583 69,331 0.84% 11 0.000158659 0.018867925
Idaho 784 121,108 0.65% 14 0.000115599 0.017857143
Illinois 9,434 802,243 1.18% 255 0.000317859 0.027029892
Indiana 10,883 426,363 2.55% 113 0.000265032 0.010383166
Iowa 5,670 275,106 2.06% 44 0.000159938 0.007760141
Kansas 2,783 220,222 1.26% 27 0.000122604 0.009701761
Kentucky 4,216 255,722 1.65% 40 0.00015642 0.009487666
Louisiana 2,077 244,660 0.85% 79 0.000322897 0.038035628
Maine 1,548 71,715 2.16% 45 0.000627484 0.029069767
Maryland 5,179 363,931 1.42% 123 0.000337976 0.023749759
Massachusetts 14,642 510,396 2.87% 422 0.000826809 0.028821199
Michigan 11,146 600,203 1.86% 142 0.000236587 0.012739996
Minnesota 8,577 427,757 2.01% 121 0.000282871 0.014107497
Mississippi 1,364 172,136 0.79% 19 0.000110378 0.013929619
Missouri 5,844 409,996 1.43% 93 0.000226831 0.015913758
Montana 747 50,798 1.47% 15 0.000295287 0.020080321
Nebraska 1,985 136,087 1.46% 15 0.000110224 0.007556675
Nevada 992 116,097 0.85% 8 6.89E-05 0.008064516
New Hampshire 1,830 123,966 1.48% 31 0.000250069 0.016939891
New Jersey 4,346 423,779 1.03% 94 0.000221814 0.021629084
New Mexico 1158 138,189 0.84% 23 0.000166439 0.019861831
New York 26,950 1,285,420 2.10% 1068 0.000830857 0.039628942
North Carolina 12,650 562,442 2.25% 178 0.000316477 0.014071146
North Dakota 524 53,840 0.97% 7 0.000130015 0.013358779
Ohio 14,136 667,760 2.12% 186 0.000278543 0.013157895
Oklahoma 2,839 210,904 1.35% 33 0.000156469 0.011623811
Oregon 3,877 240,646 1.61% 107 0.000444637 0.027598659
Pennsylvania 19,524 736,670 2.65% 446 0.000605427 0.02284368
Rhode Island 2,912 82,292 3.54% 80 0.000972148 0.027472527
South Carolina 5,671 249,654 2.27% 103 0.000412571 0.018162582
South Dakota 834 53,664 1.55% 7 0.000130441 0.008393285
Tennessee 6,129 323,499 1.89% 88 0.000272026 0.01435797
Texas 17,929 1,570,614 1.14% 302 0.000192281 0.016844219
Utah 3,944 293,527 1.34% 21 7.15E-05 0.005324544
Vermont 1,957 43,863 4.46% 35 0.000797939 0.017884517
Virginia 10,789 569,759 1.89% 167 0.000293106 0.015478728
Washington 6,599 365,412 1.81% 130 0.000355763 0.019699955
West Virginia 1,189 150,743 0.79% 12 7.96E-05 0.010092515
Wisconsin 8,355 350,248 2.39% 77 0.000219844 0.009216038
Wyoming 362 34,205 1.06% 5 0.000146177 0.013812155
Display the source blob
Display the rendered blob
Raw
us-states.json
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