Skip to content

Instantly share code, notes, and snippets.

@kristin-henry-sf

kristin-henry-sf/index.html

Created June 16, 2016 22:48
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 kristin-henry-sf/8404d31297b4a785a17df5ceac42a709 to your computer and use it in GitHub Desktop.
Save kristin-henry-sf/8404d31297b4a785a17df5ceac42a709 to your computer and use it in GitHub Desktop.
Download ZIP
Two d3 layers on a google map
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 20;
padding: 20;
}
.charts, .charts svg {
position: absolute;
}
.bar {
}
.stations, .stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
<div id="map"></div>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var leakMax = 20; // this sets threshold for how to color dots of locations
var saleColor = 'teal';
var leakColor = 'orange';
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(37.76487, -122.41948),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Load the station data. When the data comes back, create an overlay.
d3.json("stations.json", function(error, data) {
if (error) throw error;
var overlay = new google.maps.OverlayView();
var overlayBars = new google.maps.OverlayView();
overlayBars.onAdd = function(){
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "charts");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have?
overlayBars.draw = function() {
var projection = this.getProjection(),
padding = 10;
var bar = layer.selectAll("bars")
.data(d3.entries(data))
.each(transform) // update existing markers
.enter().append("svg")
.each(transform)
.attr("class", "bar");
// sales ammount
bar.append('rect')
.attr('width', function(d){ return d.value[4][0]})
.attr('height', 14)
//.attr('x', padding)
.attr('x', function(d){return padding; } )// - d3.select(this.parentNode).attr('x')})
.attr('y', padding)
.style('fill', function(d){ return saleColor; })
.style('opacity', .4);
// leak ammount
bar.append('rect')
.attr('width', function(d){ return d.value[4][1]})
.attr('height', 14)
.attr('x', function(d){ //console.log('padding: ', padding);
//console.log('left: ', +d3.select(this.parentNode).style('left').slice(0, -2));
//console.log(d3.select(this.parentNode.parentNode));
var offset = +d3.select(this.parentNode).style('left').slice(0, -2) + 100;
//console.log(offset);
return padding + d.value[4][0]})
//.attr('x', function(d){ return d.value[4][0] - d3.select(this.parentNode).style('left')})
.attr('y', padding)
.style('fill', function(d){ return leakColor; })
.style('opacity', .4);
// Add a label.
bar.append("text")
.attr("x", padding +2)
.attr("y", padding + 7)
.attr("dy", ".31em")
.text(function(d) { return d.key; });
function transform(d,i) {
console.log(d)
d = new google.maps.LatLng(d.value[1], d.value[0]);
d = projection.fromLatLngToDivPixel(d);
// console.log("d projections: ", d)
return d3.select(this)
//.style("left", (d.x - padding) + "px")
.style('left', 100)
//.style("top", (d.y - padding) + "px");
.style('top', i*16 + 200)
}
}
}
// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have?
overlay.draw = function() {
var projection = this.getProjection(),
padding = 10;
var marker = layer.selectAll("markers")
.data(d3.entries(data))
.each(transform) // update existing markers
.enter().append("svg")
.each(transform)
.attr("class", "marker");
// Add a circle.
marker.append("circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
// .style('fill', function(d){ console.log('fill', d.value[4]); if(d.value[4][1] > leakMax){ return 'red'} return 'blue'; });
.style('fill', function(d){ if(d.value[4][1] > leakMax){ return leakColor} return saleColor; });
// Add a label.
marker.append("text")
.attr("x", padding + 7)
.attr("y", padding)
.attr("dy", ".31em")
.text(function(d) { return d.key; });
function transform(d) {
d = new google.maps.LatLng(d.value[1], d.value[0]);
d = projection.fromLatLngToDivPixel(d);
// console.log("d projections: ", d)
return d3.select(this)
.style("left", (d.x - padding) + "px")
.style("top", (d.y - padding) + "px");
}
};
};
// Bind our overlay to the map…
overlay.setMap(map);
overlayBars.setMap(map);
});
</script>
Raw
stations.json
{"KMAE":
[-120.12,36.98,
"MADERA MUNICIPAL AIRPORT",
[26,1,2,5,6,3,2,1,2,7,29,12,3],
[95, 5]],
"KSJC":
[-121.92,37.37,
"SAN JOSE INTERNATIONAL AIRPORT",
[28,1,1,1,6,10,5,3,2,4,14,21,7],
[70, 30]],
"KSCK":
[-121.23,37.90,
"STOCKTON METROPOLITAN AIRPORT ",
[21,2,2,3,6,8,2,1,4,15,19,12,4],
[80, 20]],
"KCCR":
[-122.05,38.00,
"CONCORD BUCHANAN FIELD",
[24,3,2,1,1,5,17,12,9,9,7,6,4],
[92, 8]],
"KMRY":
[-121.85,36.58,
"MONTEREY PENINSULA AIRPORT",
[26,1,2,9,5,3,4,9,13,14,9,4,1],
[99, 1]],
"KPAO":
[-122.12,37.47,
"Palo Alto Airport",
[31,3,1,1,2,5,1,1,1,4,10,25,14],
[60, 40]],
"KSAC":
[-121.50,38.50,
"SACRAMENTO EXECUTIVE AIRPORT ",
[32,1,0,1,3,11,12,16,5,2,4,9,3],
[88, 12]],
"KHWD":
[-122.12,37.67,
"HAYWARD AIR TERMINAL",
[20,2,7,2,2,6,3,3,6,23,18,6,2],
[95, 5]],
"KSTS":
[-122.82,38.50,
"SANTA ROSA SONOMA COUNTY",
[46,1,0,1,5,13,10,4,3,3,4,6,3],
[85, 15]],
"KSMF":
[-121.60,38.70,
"SACRAMENTO INTERNATIONAL AIRPORT",
[19,2,1,2,4,21,18,8,3,2,5,12,4],
[99, 1]],
"KNUQ":
[-122.05,37.43,
"MOFFETT FIELD",
[35,3,1,1,4,7,2,1,2,5,6,17,15],
[90, 10]],
"KRHV":
[-121.82,37.33,
"San Jose / Reid / Hillv",
[35,0,0,1,4,4,2,1,1,10,28,11,1],
[62, 38]],
"KWVI":
[-121.78,36.93,
"WATSONVILLE MUNICIPAL AIRPORT ",
[44,1,2,3,4,5,7,9,8,4,6,5,2],
[83, 17]],
"KMHR":
[-121.30,38.55,
"Sacramento, Sacramento Mather Airport",
[21,1,1,2,8,15,12,12,7,4,5,7,3],
[80, 20]],
"KVCB":
[-121.95,38.38,
"VACAVILLE NUT TREE AIRPORT",
[36,2,1,1,2,6,10,18,10,2,2,5,6],
[90, 10]],
"KSFO":
[-122.37,37.62,
"SAN FRANCISCO INTERNATIONAL AIRPORT ",
[13,3,3,2,3,4,4,4,7,31,20,2,3],
[50, 50]],
"KLVK":
[-121.82,37.70,
"LIVERMORE MUNICIPAL AIRPORT ",
[32,2,7,3,1,1,2,7,9,17,16,2,1],
[99, 1]]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment