Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/.block

Last active Jul 12, 2019
Embed
What would you like to do?
群馬とフランスは似てる?
license: mit
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="jp">
<head>
<script src="https://unpkg.com/d3@5.0.0/dist/d3.min.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
}
.map {
display: inline-block;
width: 470px;
height: 500px;
transition: all 2000ms 0s ease;
}
.change {
transform: scaleX(-1) scaleX(0.9) rotate(315deg) scaleX(0.9);
}
#btn {
z-index:9;
color:red;
position: absolute;
left:calc(980px/2 - 30px);
top:calc(250px - 21px);
font-size: 1em;
display: inline-block;
width: 60px;
height: 42px;
text-decoration: none;
background-color: #fff;
border-bottom: solid 4px #627295;
border-radius: 3px;
outline: none;
}
#btn:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
</style>
</head>
<body>
<div>
<button id="btn">click!</button>
</div>
<div>
<svg class="map" id="gunma"></svg>
<svg class="map" id="france"></svg>
</div>
<script>
const gunma = d3.select("#gunma")
const france = d3.select("#france")
const w=470,h=500;
const Toggle = function(){
var fn = arguments;
var l = arguments.length;
var i = 0;
return function () {
if (l <= i) i = 0;
fn[i++]();
}
}
const projection = d3.geoMercator();
const geoPath = d3.geoPath();
const p1 = d3.json("gunma.geojson");
const p2 = d3.json("france.geojson");
Promise.all([p1, p2]).then(function(data){
const gunmaData = data[0];
const flanceData= data[1];
projection.fitExtent([[0, 0], [w, h]], gunmaData);
geoPath.projection(projection);
gunma.selectAll("path")
.data(gunmaData.features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("stroke", "black")
.attr("fill", "gray");
const gunmaCener = geoPath.centroid(gunmaData);
gunma.append("text")
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("transform", "translate("+ gunmaCener+")")
.attr("fill", "white")
.text("GUNMA");
projection.fitExtent([[0, 0], [w, h]], flanceData);
geoPath.projection(projection);
france.selectAll("path")
.data(flanceData.features)
.enter()
.append("path")
.attr("class", "pref")
.attr("d", geoPath)
.attr("stroke", "black")
.attr("fill", "gray");
const franceCener = geoPath.centroid(flanceData);
france.append("text")
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("transform", "translate(" + franceCener + ")")
.attr("fill", "white")
.text("FRANCE");
var tog = Toggle(() => { france.classed("change", true) }, ()=> { france.classed("change", false)});
d3.select("#btn").on("click", tog);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment