Skip to content

Instantly share code, notes, and snippets.

@JulienAssouline

JulienAssouline/Critics country - Sheet1.csv

Last active November 24, 2017 16:29
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 JulienAssouline/7d40e4521dacd49807ec79e356c91309 to your computer and use it in GitHub Desktop.
Save JulienAssouline/7d40e4521dacd49807ec79e356c91309 to your computer and use it in GitHub Desktop.
Download ZIP
Map with squares + tooltip
Raw
Critics country - Sheet1.csv
index movie Country Latitude Longitude Name
United States 82 US 37.09024 -95.712891 United States
United Kingdom 18 GB 55.378051 -3.435973 United Kingdom
Canada 5 CA 56.130366 -106.346771 Canada
France 5 FR 46.227638 2.213749 France
Cuba 5 CU 21.521757 -77.781167 Cuba
Germany 5 DE 51.165691 10.451526 Germany
India 5 IN 20.593684 78.96288 India
Italy 4 IT 41.87194 12.56738 Italy
Israel 4 IL 31.046051 34.851612 Israel
Australia 4 AU -25.274398 133.775136 Australia
Colombia 4 CO 4.570868 -74.297333 Colombia
United Arab Emirates 3 AE 23.424076 53.847818 United Arab Emirates
Lebanon 3 LB 33.854721 35.862285 Lebanon
South Korea 2 KR 35.907757 127.766922 South Korea
Chile 2 CL -35.675147 -71.542969 Chile
Mexico 2 MX 23.634501 -102.552784 Mexico
Argentina 2 AR -38.416097 -63.616672 Argentina
Singapore 2 SG 1.352083 103.819836 Singapore
Austria 2 AT 47.516231 14.550072 Austria
Turkey 2 TR 38.963745 35.243322 Turkey
China 1 CN 35.86166 104.195397 China
South Africa 1 ZA -30.559482 22.937506 South Africa
Bangladesh 1 BD 23.684994 90.356331 Bangladesh
Brazil 1 BR -14.235004 -51.92528 Brazil
Namibia 1 -22.95764 18.49041 Namibia
Kazakhstan 1 KZ 48.019573 66.923684 Kazakhstan
Switzerland 1 CH 46.818188 8.227512 Switzerland
Hong Kong 1 HK 22.396428 114.109497 Hong Kong
Indonesia 1 ID -0.789275 113.921327 Indonesia
Philippines 1 PH 12.879721 121.774017 Philippines
Egypt 1 EG 26.820553 30.802498 Egypt
Senegal 1 SN 14.497401 -14.452362 Senegal
Qatar 1 QA 25.354826 51.183884 Qatar
Taiwan 1 TW 23.69781 120.960515 Taiwan
Japan 1 JP 36.204824 138.252924 Japan
Belgium 1 BE 50.503887 4.469936 Belgium
Raw
critics_world_map2.js
(function () {
var w = 800;
var h = 500;
var margin = {
top: 10,
bottom: 40,
left: 0,
right: 30
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var rectScale = d3.scaleLinear()
.range([5, 70])
// define map projection
var projection = d3.geoMercator()
.translate([w/2, h/2])
.scale(130)
// .scale([500]);
//Define default path generator
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("#critics")
.append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(0" + margin.left + "," + margin.top + ")");
var div = d3.select("#critics")
.append("div")
.attr("class", "tooltip2")
.style("opacity", 0)
d3.json("world.topojson", function(json){
d3.csv("Critics country - Sheet1.csv", function(error, data){
var countries = topojson.feature(json, json.objects.countries).features
console.log(countries)
rectScale.domain(d3.extent(data, function(d){ return +d["movie"]}))
svg.selectAll(".country")
.data(countries)
.enter()
.append("path")
.attr("class", "country2")
.attr("d", path)
svg.selectAll(".rect")
.data(data)
.enter()
.append("rect")
.classed("bar", true)
.attr("width", function(d){
return rectScale(+d["movie"]);
})
.attr("height", function(d){
return rectScale(+d["movie"]);
})
.attr("x", function(d){
var coords = projection([+d["Longitude"], +d["Latitude"]])
if(d.index == "United States"){
return coords[0] - 45;
}
if(d.index == "United Kingdom"){
return coords[0] - 15;
} else {
return coords[0];
}
})
.attr("y", function(d){
var coords = projection([+d["Longitude"], +d["Latitude"]])
if(d.index == "United States"){
return (coords[1] - 47);
}
if(d.index == "United Kingdom"){
return coords[1] - 5;
} else {
return coords[1];
}
})
.style("fill-opacity", 0)
.style("stroke-width", 1.5)
.style("stroke", function(d){
if (d.index == "United States"){
return "#e59400";
} else {
return "grey";
}
})
.on("mouseover", function(d){
div.transition()
.duration(200)
.style("opacity", 1)
var element = d3.select(this);
element.style("stroke-width", "0.5")
div.html(function(){
if(d.index == "United States"){
return d.movie + " critics from " + "U.S.";
}
if(d.index == "United Kingdom"){
return d.movie + " critics from " + "U.K.";
}
if(d.movie == 1){
return d.movie + " critic from " + d.index;
} else{
return d.movie + " critics from " + d.index;
}
})
.style("left", (d3.event.pageX - 20) + "px")
.style("top", (d3.event.pageY - 35) + "px")
})
.on("mousemove", function(d){
div.style("left", (d3.event.pageX - 20) + "px")
.style("top", (d3.event.pageY - 35) + "px")
})
.on("mouseout", function(d){
div.transition()
.duration(500)
.style("opacity", "0")
var element = d3.select(this);
element.style("stroke-width", "1.5");
})
svg.selectAll(".rect-label")
.data(data)
.enter()
.append("text")
.attr("class", "rect-label")
.attr("x", function(d){
var coords = projection([+d["Longitude"], +d["Latitude"]])
if (d.index == "United States"){
return coords[0] - 36;
}
if (d.index == "United Kingdom"){
return coords[0] - 22.5;
} else{
return coords[0];
}
})
.attr("y", function(d){
var coords = projection([+d["Longitude"], +d["Latitude"]])
if (d.index == "United States"){
return coords[1] - 10;
} if (d.index == "United Kingdom"){
return coords[1] + 3;
} else {
return coords[1];
}
})
.text(function(d){
if (d.index == "United States"){
return "U.S.";
}
if (d.index == "United Kingdom"){
return "U.K.";
}
})
.attr("dx", 9)
.attr("dy", 5)
.style("fill", function(d){
if (d.index == "United States"){
return "#e59400";
}
if (d.index == "United Kingdom"){
return "grey";
} else {
return "grey";
}
})
.attr("font-size", function(d){
if (d.index == "United States"){
return "18px";
} else {
return "9px";
}
})
.on("mouseover", function(d){
var coords = projection([+d["Longitude"], +d["Latitude"]])
div.transition()
.duration(200)
.style("opacity", 1)
div.html(function(){
if(d.index == "United States"){
return d.movie + " critics from " + "U.S.";
}
if(d.index == "United Kingdom"){
return d.movie + " critics from " + "U.K.";
} if(d.movie == 1){
return d.movie + " critic from " + d.index;
} else{
return d.movie + " critics from " + d.index;
}
})
.style("left", (d3.event.pageX - 20) + "px")
.style("top", (d3.event.pageY - 35) + "px")
})
.on("mousemove", function(d){
div.style("left", (d3.event.pageX - 20) + "px")
.style("top", (d3.event.pageY - 35) + "px")
})
.on("mouseout", function(d){
div.transition()
.duration(500)
.style("opacity", "0")
})
svg.append("rect")
.attr("width", rectScale(50))
.attr("height", rectScale(50))
.attr("x", (width/2) + 170)
.attr("y", 280)
.style("stroke", "lightgrey")
.style("fill-opacity", 0)
.style("stroke-width", 1.5)
.style("stroke-dasharray", ("2,2"))
svg.append("rect")
.attr("width", rectScale(20))
.attr("height", rectScale(20))
.attr("x", (width/2) + 182)
.attr("y", 304)
.style("stroke", "lightgrey")
.style("fill-opacity", 0)
.style("stroke-width", 1.5)
.style("stroke-dasharray", ("2,2"))
svg.append("line")
.attr("x1", 5)
.attr("y1", 20)
.attr("x2", 40)
.attr("y2", 20)
.attr("stroke-width", 1)
.attr("transform", "translate(570, 283)")
.attr("stroke", "lightgrey")
.style("shape-rendering", "crispEdges")
// .style("stroke-dasharray", ("3,3"));
svg.append("text")
.attr("x", 613)
.attr("y", 308)
.text("20")
.style("fill", "grey")
.style("font-size", "12px")
svg.append("line")
.attr("x1", 5)
.attr("y1", 20)
.attr("x2", 40)
.attr("y2", 20)
.attr("stroke-width", 1)
.attr("transform", "translate(570, 259.5)")
.attr("stroke", "lightgrey")
.style("shape-rendering", "crispEdges")
svg.append("text")
.attr("x", 613)
.attr("y", 284)
.text("50")
.style("fill", "grey")
.style("font-size", "12px")
})
})
})()
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Loading TopoJSON data and generating SVG paths</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style type="text/css">
/* No style rules here yet */
body,html{
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 11px;
text-align: center;
}
.country1{
fill: #E8E8E8;
}
.country2{
fill: #E8E8E8;
}
#chart1{
background-color: #F5F2EB;
border: 1px solid #F5F2EB;
}
#chart2 {
background-color: #F5F2EB;
border: 1px solid #F5F2EB;
}
#chart3{
background-color: #F5F2EB;
border: 1px solid #F5F2EB;
}
/* rect {
fill: #7f0000;
stroke: #7f0000;
fill-opacity: 0;
stroke-width: 1.5;
}*/
div.tooltip1 {
position: absolute;
text-align: center;
width: 190px;
height: 18px;
padding: 5px;
font: 14px sans-serif;
background: white;
border: rgba(0,0,0,0.3) solid 1px;
pointer-events: none;
}
div.tooltip2 {
position: absolute;
text-align: center;
width: 190px;
height: 18px;
padding: 5px;
font: 14px sans-serif;
background: white;
border: rgba(0,0,0,0.3) solid 1px;
pointer-events: none;
}
div.tooltip3 {
position: absolute;
text-align: center;
width: 180px;
height: 25px;
padding: 5px;
font: 14px sans-serif;
background: #F5F2EB;
pointer-events: none;
}
.axis1 path,
.axis1 line {
fill: none;
stroke: #F5F2EB;
stroke-width: 2px;
shape-rendering: crispEdges;
}
.axis2 path,
.axis2 line {
fill: none;
stroke: #F5F2EB;
stroke-width: 2px;
shape-rendering: crispEdges;
}
.axis3 path,
.axis3 line {
fill: none;
stroke: none;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.gridlines path,
.gridlines line {
fill: none;
stroke: #dcd9d3;
stroke-width: 2px;
shape-rendering: crispEdges;
opacity: 0.3;
stroke-dasharray: 5,3;
}
</style>
</head>
<body>
<div id="critics"></div>
<script src="critics_world_map2.js"></script>
<!-- <script src="Movies by Year2.js"></script> -->
</body>
</html>
Display the source blob
Display the rendered blob
Raw
world.topojson
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