Skip to content

Instantly share code, notes, and snippets.

@mforando

mforando/.block

Created December 27, 2017 20:22
Show Gist options
  • Save mforando/d0480dc3f92ca234a1c997718a9a8cd4 to your computer and use it in GitHub Desktop.
Save mforando/d0480dc3f92ca234a1c997718a9a8cd4 to your computer and use it in GitHub Desktop.
Download ZIP
Map Swiper POC
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style type="text/css">
/* Legend Font Style */
body {
font: 11px Tahoma;
background-color: #ffffff;
}
/* Legend Position Style */
.legend {
position:absolute;
left:20px;
top:30px;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font: 11px Tahoma;
background-color: #ffffff;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height of map
var width = 960;
var height = 500;
var medColor = "#f4ca93",
lowColor = "#9e3d22",
medhighColor = "#b4d1dc",
highColor = "#2b5c8a";
// D3 Projection
var projection = d3.geoAlbersUsa()
.translate([width / 2, height / 2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
//Create SVG element and append map to the SVG
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect").attr("x",0).attr("y",0).attr("width",width).attr("height",height).attr("stroke","black").attr("fill","none")
var map = svg.append("g").attr("id","map");
var slider = svg.append("g").attr("id","slider").call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
map.append("svg:image").attr("href","https://s3.us-east-2.amazonaws.com/d3poc/2017SummaryScore.png").attr("clip-path", "url(#clipPath1)").attr("width",width).attr("height",height)
map.append("svg:image").attr("href","https://s3.us-east-2.amazonaws.com/d3poc/2016SummaryScore.png").attr("clip-path", "url(#clipPath2)").attr("width",width).attr("height",height)
slider.append("clipPath").attr("id","clipPath1").append("rect").attr("x",0).attr("y",0).attr("height",height).attr("width",0).attr("fill","none")
slider.append("clipPath").attr("id","clipPath2").append("rect").attr("x",0).attr("y",0).attr("height",height).attr("width",1000).attr("fill","none")
var buttons = slider.append("g").attr("id","buttons")
buttons.append("rect").attr("x",0).attr("y",0).attr("height",height).attr("width",4).attr("fill","#003264").attr("stroke","black") .attr("stroke-width",.5)
buttons.append("rect").attr("transform","translate(-20,0)").attr("x",0).attr("y",height/2-20).attr("height",40).attr("width",40).attr("fill","#003264").attr("stroke","black") .attr("stroke-width",.5)
function dragstarted(d) {
}
function dragged(d) {
x = d3.event.x;
d3.select("#clipPath1").selectAll("rect").attr("width",Math.max(Math.min(x,width-4),0))
d3.select("#clipPath2").selectAll("rect").attr("x",Math.max(Math.min(x,width-4),0))
d3.select("#buttons").selectAll("rect").attr("x",Math.max(Math.min(x,width-4),0))
}
function dragended(d) {
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment