Skip to content

Instantly share code, notes, and snippets.

@captainelaine

captainelaine/2000year.csv

Created April 4, 2016 19:13
Show Gist options
  • Save captainelaine/8f3205d25f35df0a64ab881bd9159ea7 to your computer and use it in GitHub Desktop.
Save captainelaine/8f3205d25f35df0a64ab881bd9159ea7 to your computer and use it in GitHub Desktop.
Download ZIP
Week11: Map
Raw
2000year.csv
IS0 Country WinOrNot Winner2000 Team2000
AUS Australia Won by Ferrari Michael Schumacher Ferrari
BRA Brazil Won by Ferrari Michael Schumacher Ferrari
SMR San Marino Won by Ferrari Michael Schumacher Ferrari
GBR Britain Won by other teams David Coulthard McLaren
ESP Spain Won by other teams Mika Hakkinen McLaren
DEU Germany��Europe�� Won by Ferrari Michael Schumacher Ferrari
MCO Monaco Won by other teams David Coulthard McLaren
CAN Canada Won by Ferrari Michael Schumacher Ferrari
FRA France Won by other teams David Coulthard McLaren
AUT Austria Won by other teams Mika Hakkinen McLaren
DEU Germany Won by other teams David Coulthard McLaren
HUN Hungary Won by other teams Mika Hakkinen McLaren
BEL Belgium Won by other teams Mika Hakkinen McLaren
ITA Italy Won by Ferrari Michael Schumacher Ferrari
USA United States Won by Ferrari Michael Schumacher Ferrari
JPN Japan Won by Ferrari Michael Schumacher Ferrari
MYS Malaysia Won by Ferrari Michael Schumacher Ferrari
Display the source blob
Display the rendered blob
Raw
countries.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300italic,500|Josefin+Sans:400italic' rel='stylesheet' type='text/css'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
/* On mouse hover, lighten state color */
path {
stroke: gray;
stroke-width: 1;
}
circle {
fill: orange;
fill-opacity: .8;
}
p.intro {
margin-top: 25px;
width: 750px;
margin-left: 23%;
font-size: 14px;
}
/* Style for Custom Tooltip */
div.tooltip {
position: absolute;
text-align: center;
min-width: 100px;
height: 50px;
padding: 2px;
font: 12px sans-serif;
background: white;
border: 1px lightgray solid;
border-radius: 5px;
pointer-events: none;
}
.tooltip p {
margin: 5px;
}
.map {
margin-top: 25px;
}
/* Legend Font Style */
body {
margin-top: 30px;
font-size: 11px;
text-align: center;
font-family: 'Ubuntu',sans-serif;
}
/* Legend Position Style */
.legend {
font-size: 2px;
left:2px;
top:350px;
}
</style>
</head>
<body>
<h2>A Map Showing You Formula One Team's Winners During Season 2000</h2>
<p class="intro">During the past 15 years in the field of Formula One, things have changed a lot, especially Ferrari.</br>After the times of "Michael Schumacher", Ferrari was no longer the empire of F1. </br>Due to the changes of rule and development of technology, other teams have become competitive challengers and eventually defeated Ferrari.</p>
<p class="intro">This map can show you the change of champion winning numbers of each teams in season 2000.</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript">
//Width and height of map
var width = 960;
var height = 500;
// D3 Projection
var projection = d3.geo.mercator()
.translate([width/2, height/2]) // translate to center of screen
.scale([200]); // scale things down so see entire US
// Define path generator
var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
var idLookup=d3.map();
// Define linear scale for output
var countriesColor = d3.scale.ordinal()
.range(["red", "lightyellow","white"]);
//Create SVG element and append map to the SVG
var svg = d3.select("body")
.append("svg")
.classed("map",true)
.attr("width", width)
.attr("height", height);
// Append Div for tooltip to SVG
var tooltip = d3.select("body").append("div").attr("class", "tooltip");
queue()
.defer(d3.json, "countries.json")
.defer(d3.csv, "2000year.csv")
.await(ready);
function ready(error, world, countries) {
console.log(world);
var countriesworld = topojson.feature(world, world.objects.units).features;
countriesColor.domain(d3.extent(countries,function(s) {
return s.WinOrNot;
}
)
);
// Loop through each state data value in the .csv file
countries.forEach(function(countries) {
// Grab State Name
var dataCountries = countries.IS0; // name
// Grab data value
var dataValue = countries.WinOrNot;
var datawinnername = countries.Winner2000;
var datawinnerteam = countries.Team2000;// number
// Find the corresponding state inside the GeoJSON
countriesworld.forEach(function(j) {
var jsonCountries = j.id;
if (dataCountries == jsonCountries) { // assumes the names will match...
// Copy the data value into the JSON
j.properties.WinOrNot = dataValue;
j.properties.winner = datawinnername;
j.properties.team = datawinnerteam;
// Stop looking through the JSON
}
});
}); // ends data merge
// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
.data(countriesworld)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
// Get data value for visited
var value = d.properties.WinOrNot;
return countriesColor(value);
})
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
svg.append("g")
.attr("class", "legendColors")
.attr("transform", "translate(50, 370)"); // where we put it on the page!
var legendColors = d3.legend.color()
.shapeWidth(20)
.title("Grand Prix Won")
.scale(countriesColor); // our existing color scale
svg.select(".legendColors")
.call(legendColors);
}
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
function mouseover(d){
d3.select(this)
.transition()
.style("stroke", "gray")
.style("stroke-width", "2");
d3.select(this).moveToFront();
var data = idLookup.get(d.id);
// check for other data attributes to make the tooltip more interesting
// ideally this would report more about the county
if (typeof(d.properties.winner) !== "undefined") {
tooltip
.style("display", null) // this removes the display none setting from it
.html("<p>Country: " + d.properties.name + "</br>" + "Winner: " + d.properties.winner + "</br>" + "Team: " + d.properties.team + "</p>");
} else {
tooltip
.style("display", null) // this removes the display none setting from it
.html("<p>Country: " + d.properties.name + "</br>" + "No Grand Prix This Year </p>");
}
}
function mousemove(d) {
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
}
function mouseout(d) {
d3.select(this)
.transition()
.style("stroke", null)
.style("stroke-width", null);
tooltip.style("display", "none"); // this sets it to invisible!
}
// end ready function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment