cypranowska · May 12, 2017 07:16
diff --git a/README.md b/README.md
diff --git a/camp_map.csv b/camp_map.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .background {
  fill: none;
  pointer-events: all; 
 }

 #states {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
 }

 .canvas {
    margin-top: 50px;       
 }

 .overlay {
  fill: none;
 }
    
 .bubble {
    fill-opacity: 0.5;
    stroke: #ccc;
    vector-effect: non-scaling-stroke;
 }
    
 div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: auto;					
    height: auto;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightgray;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
 }
    
 .legend, .tick {
    font-size: 12px;
    font-family: sans-serif;
 }

 </style>

 <body>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="https://d3js.org/d3-queue.v3.min.js"></script>
 <script>

 var width = 960,
    height = 500,
    centered;

 var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2, height / 2]);
    
 var zoom = d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed);

 var path = d3.geo.path()
    .projection(projection);

 var div = d3.select("body").append("div")	
    .attr("class", "tooltip")				
    .style("opacity", 0);

 var svg = d3.select("body").append("svg")
    .attr("class", "canvas")
    .attr("width", width)
    .attr("height", height); 

 var g = svg.append("g");
    
 svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);
    
 svg
    .call(zoom)
    .call(zoom.event);
    
 d3.queue()
    .defer(d3.json, "us.json")
    .defer(d3.csv, "camp_map.csv")
    .await(ready);

    
 function ready(error, us, camp) {
    if (error) throw error;
    
    var tents = camp.map(function(d){ return +d.percent_tent; });
    
    var colors = d3.scale.quantize()
        .domain([d3.min(tents),d3.max(tents)])
        .range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", 
    "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]); 
    
    var colors_percent = d3.scale.quantize()
        .domain([d3.min(tents)*100,d3.max(tents)*100])
        .range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598", 
    "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]); 
    
    g.append("g")
        .attr("id", "states")
        .selectAll("path")
        .data(topojson.feature(us, us.objects.states).features)
        .enter().append("path")
        .attr("d", path);

    g.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
        .attr("id", "states")
        .attr("d", path);
    
    g.selectAll("circle")
        .data(camp).enter()
        .append("circle")
        .attr("class", "bubble")
        .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
        .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
        .attr("r", function(d) { return Math.sqrt(d.num_sites)+1; })
        .attr("fill", function(d) { return colors(d.percent_tent)})
        .on("mouseover", function(d) {		
            div.transition()		
                .duration(200)		
                .style("opacity", .9);		
            div.html("<b>" + d.facilityName + "</b>" + "<br/>"  + "Agency: " + d.org_name + "<br/>" + "No. campsites: " + d.num_sites)	
                .style("left", (d3.event.pageX) + "px")		
                .style("top", (d3.event.pageY - 80) + "px");	
            })					
        .on("mouseout", function(d) {		
            div.transition()		
                .duration(500)		
                .style("opacity", 0);	
        });
 
    var x = d3.scale.linear()
        .domain([0,100])
        .rangeRound([600,840]);
    
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickSize(13) 
        .tickFormat(function(x, i) { return i ? x : x + "%"; })
        .tickValues(colors_percent.domain());
        
    
    var legend  = svg.append("g")
        .attr("class", "key")
        .attr("transform", "translate(0,20)");
    
    legend.selectAll("rect")
        .data(colors_percent.range().map(function(d) {
            d = colors_percent.invertExtent(d);
            if (d[0] == null) d[0] = x.domain()[0];
            if (d[1] == null) d[1] = x.domain()[1];
            return d;
    }))
        .enter().append("rect")
        .attr("height", 8)
        .attr("x", function(d) { return x(d[0]); })
        .attr("width", function(d) { return x(d[1])-x(d[0]); })
        .attr("fill", function (d) { return colors_percent(d[0]); }); 
    
    legend.append("text")
        .attr("class", "legend")
        .attr("x", x.range()[0])
        .attr("y", -6)
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text("% tent only sites");
    
    legend.call(d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(10)
        .tickSize(13)
        .tickFormat(function(x, i) { return i ? x : x ; })
        .tickValues([0,10,20,30,40,50,60,70,80,90,100]))
        .select(".domain")
        .remove();
    
 };
    

 function zoomed() {
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
 };
    
 d3.select(self.frameElement).style("height", height + "px");

 </script>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us.json b/us.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.background {
	fill: none;
	pointer-events: all;
	}

	#states {
	fill: none;
	stroke: #000;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	}

	.canvas {
	margin-top: 50px;
	}

	.overlay {
	fill: none;
	}

	.bubble {
	fill-opacity: 0.5;
	stroke: #ccc;
	vector-effect: non-scaling-stroke;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: auto;
	height: auto;
	padding: 2px;
	font: 12px sans-serif;
	background: lightgray;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}

	.legend, .tick {
	font-size: 12px;
	font-family: sans-serif;
	}

	</style>

	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="https://d3js.org/d3-queue.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500,
	centered;

	var projection = d3.geo.albersUsa()
	.scale(width)
	.translate([width / 2, height / 2]);

	var zoom = d3.behavior.zoom()
	.scaleExtent([1, 8])
	.on("zoom", zoomed);

	var path = d3.geo.path()
	.projection(projection);

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var svg = d3.select("body").append("svg")
	.attr("class", "canvas")
	.attr("width", width)
	.attr("height", height);

	var g = svg.append("g");

	svg.append("rect")
	.attr("class", "overlay")
	.attr("width", width)
	.attr("height", height);

	svg
	.call(zoom)
	.call(zoom.event);

	d3.queue()
	.defer(d3.json, "us.json")
	.defer(d3.csv, "camp_map.csv")
	.await(ready);


	function ready(error, us, camp) {
	if (error) throw error;

	var tents = camp.map(function(d){ return +d.percent_tent; });

	var colors = d3.scale.quantize()
	.domain([d3.min(tents),d3.max(tents)])
	.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598",
	"#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);

	var colors_percent = d3.scale.quantize()
	.domain([d3.min(tents)100,d3.max(tents)100])
	.range(["#5E4FA2", "#3288BD", "#66C2A5", "#ABDDA4", "#E6F598",
	"#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", "#D53E4F", "#9E0142"]);

	g.append("g")
	.attr("id", "states")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append("path")
	.attr("d", path);

	g.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("id", "states")
	.attr("d", path);

	g.selectAll("circle")
	.data(camp).enter()
	.append("circle")
	.attr("class", "bubble")
	.attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
	.attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
	.attr("r", function(d) { return Math.sqrt(d.num_sites)+1; })
	.attr("fill", function(d) { return colors(d.percent_tent)})
	.on("mouseover", function(d) {
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div.html("<b>" + d.facilityName + "</b>" + "<br/>" + "Agency: " + d.org_name + "<br/>" + "No. campsites: " + d.num_sites)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 80) + "px");
	})
	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("opacity", 0);
	});

	var x = d3.scale.linear()
	.domain([0,100])
	.rangeRound([600,840]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickSize(13)
	.tickFormat(function(x, i) { return i ? x : x + "%"; })
	.tickValues(colors_percent.domain());


	var legend = svg.append("g")
	.attr("class", "key")
	.attr("transform", "translate(0,20)");

	legend.selectAll("rect")
	.data(colors_percent.range().map(function(d) {
	d = colors_percent.invertExtent(d);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	}))
	.enter().append("rect")
	.attr("height", 8)
	.attr("x", function(d) { return x(d[0]); })
	.attr("width", function(d) { return x(d[1])-x(d[0]); })
	.attr("fill", function (d) { return colors_percent(d[0]); });

	legend.append("text")
	.attr("class", "legend")
	.attr("x", x.range()[0])
	.attr("y", -6)
	.attr("text-anchor", "start")
	.attr("font-weight", "bold")
	.text("% tent only sites");

	legend.call(d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.ticks(10)
	.tickSize(13)
	.tickFormat(function(x, i) { return i ? x : x ; })
	.tickValues([0,10,20,30,40,50,60,70,80,90,100]))
	.select(".domain")
	.remove();

	};


	function zoomed() {
	g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	};

	d3.select(self.frameElement).style("height", height + "px");

	</script>