tcsios · August 9, 2017 09:28
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
 }

 /* stylesheet for your custom graph */

 .states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
 }

 .states-choropleth {
  fill: #ccc;
 }

 #tooltip-container {
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px;
  border: 1px solid;
  display: none;
 }

 .tooltip_key {
  font-weight: bold;
 }

 .tooltip_value {
  margin-left: 20px;
  float: right;
 }

 </style>

 <div id="tooltip-container"></div>

 <div id="canvas-svg"></div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 <script>

 d3.csv("population.csv", function(err, data) {

  var config = {"color1":"#d3e5ff","color2":"#08306B","stateDataColumn":"state_or_territory","valueDataColumn":"population_estimate_for_july_1_2013_number"}
  
  var WIDTH = 800, HEIGHT = 500;
  
  var COLOR_COUNTS = 9;
  
  var SCALE = 0.7;
  
  function Interpolate(start, end, steps, count) {
      var s = start,
          e = end,
          final = s + (((e - s) / steps) * count);
      return Math.floor(final);
  }
  
  function Color(_r, _g, _b) {
      var r, g, b;
      var setColors = function(_r, _g, _b) {
          r = _r;
          g = _g;
          b = _b;
      };
  
      setColors(_r, _g, _b);
      this.getColors = function() {
          var colors = {
              r: r,
              g: g,
              b: b
          };
          return colors;
      };
  }
  
  function hexToRgb(hex) {
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
      } : null;
  }
  
  function valueFormat(d) {
    if (d > 1000000000) {
      return Math.round(d / 1000000000 * 10) / 10 + "B";
    } else if (d > 1000000) {
      return Math.round(d / 1000000 * 10) / 10 + "M";
    } else if (d > 1000) {
      return Math.round(d / 1000 * 10) / 10 + "K";
    } else {
      return d;
    }
  }
  
  var COLOR_FIRST = config.color1, COLOR_LAST = config.color2;
  
  var rgb = hexToRgb(COLOR_FIRST);
  
  var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);
  
  rgb = hexToRgb(COLOR_LAST);
  var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);
  
  var MAP_STATE = config.stateDataColumn;
  var MAP_VALUE = config.valueDataColumn;
  
  var width = WIDTH,
      height = HEIGHT;
  
  var valueById = d3.map();
  
  var startColors = COLOR_START.getColors(),
      endColors = COLOR_END.getColors();
  
  var colors = [];
  
  for (var i = 0; i < COLOR_COUNTS; i++) {
    var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);
    var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);
    var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);
    colors.push(new Color(r, g, b));
  }
  
  var quantize = d3.scale.quantize()
      .domain([0, 1.0])
      .range(d3.range(COLOR_COUNTS).map(function(i) { return i }));
  
  var path = d3.geo.path();
  
  var svg = d3.select("#canvas-svg").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  d3.tsv("https://s3-us-west-2.amazonaws.com/vida-public/geo/us-state-names.tsv", function(error, names) {
  
  name_id_map = {};
  id_name_map = {};
  
  for (var i = 0; i < names.length; i++) {
    name_id_map[names[i].name] = names[i].id;
    id_name_map[names[i].id] = names[i].name;
  }
  
  data.forEach(function(d) {
    var id = name_id_map[d[MAP_STATE]];
    valueById.set(id, +d[MAP_VALUE]); 
  });
  
  quantize.domain([d3.min(data, function(d){ return +d[MAP_VALUE] }),
    d3.max(data, function(d){ return +d[MAP_VALUE] })]);
  
  d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
    svg.append("g")
        .attr("class", "states-choropleth")
      .selectAll("path")
        .data(topojson.feature(us, us.objects.states).features)
      .enter().append("path")
        .attr("transform", "scale(" + SCALE + ")")
        .style("fill", function(d) {
          if (valueById.get(d.id)) {
            var i = quantize(valueById.get(d.id));
            var color = colors[i].getColors();
            return "rgb(" + color.r + "," + color.g +
                "," + color.b + ")";
          } else {
            return "";
          }
        })
        .attr("d", path)
        .on("mousemove", function(d) {
            var html = "";
  
            html += "<div class=\"tooltip_kv\">";
            html += "<span class=\"tooltip_key\">";
            html += id_name_map[d.id];
            html += "</span>";
            html += "<span class=\"tooltip_value\">";
            html += (valueById.get(d.id) ? valueFormat(valueById.get(d.id)) : "");
            html += "";
            html += "</span>";
            html += "</div>";
            
            $("#tooltip-container").html(html);
            $(this).attr("fill-opacity", "0.8");
            $("#tooltip-container").show();
            
            var coordinates = d3.mouse(this);
            
            var map_width = $('.states-choropleth')[0].getBoundingClientRect().width;
            
            if (d3.event.layerX < map_width / 2) {
              d3.select("#tooltip-container")
                .style("top", (d3.event.layerY + 15) + "px")
                .style("left", (d3.event.layerX + 15) + "px");
            } else {
              var tooltip_width = $("#tooltip-container").width();
              d3.select("#tooltip-container")
                .style("top", (d3.event.layerY + 15) + "px")
                .style("left", (d3.event.layerX - tooltip_width - 30) + "px");
            }
        })
        .on("mouseout", function() {
                $(this).attr("fill-opacity", "1.0");
                $("#tooltip-container").hide();
            });
  
    svg.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
        .attr("class", "states")
        .attr("transform", "scale(" + SCALE + ")")
        .attr("d", path);
  });
  
  });
 });

 </script>
diff --git a/population.csv b/population.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}

	/* stylesheet for your custom graph */

	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	.states-choropleth {
	fill: #ccc;
	}

	#tooltip-container {
	position: absolute;
	background-color: #fff;
	color: #000;
	padding: 10px;
	border: 1px solid;
	display: none;
	}

	.tooltip_key {
	font-weight: bold;
	}

	.tooltip_value {
	margin-left: 20px;
	float: right;
	}

	</style>

	<div id="tooltip-container"></div>

	<div id="canvas-svg"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

	<script>

	d3.csv("population.csv", function(err, data) {

	var config = {"color1":"#d3e5ff","color2":"#08306B","stateDataColumn":"state_or_territory","valueDataColumn":"population_estimate_for_july_1_2013_number"}

	var WIDTH = 800, HEIGHT = 500;

	var COLOR_COUNTS = 9;

	var SCALE = 0.7;

	function Interpolate(start, end, steps, count) {
	var s = start,
	e = end,
	final = s + (((e - s) / steps) * count);
	return Math.floor(final);
	}

	function Color(_r, _g, _b) {
	var r, g, b;
	var setColors = function(_r, _g, _b) {
	r = _r;
	g = _g;
	b = _b;
	};

	setColors(_r, _g, _b);
	this.getColors = function() {
	var colors = {
	r: r,
	g: g,
	b: b
	};
	return colors;
	};
	}

	function hexToRgb(hex) {
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? {
	r: parseInt(result[1], 16),
	g: parseInt(result[2], 16),
	b: parseInt(result[3], 16)
	} : null;
	}

	function valueFormat(d) {
	if (d > 1000000000) {
	return Math.round(d / 1000000000 * 10) / 10 + "B";
	} else if (d > 1000000) {
	return Math.round(d / 1000000 * 10) / 10 + "M";
	} else if (d > 1000) {
	return Math.round(d / 1000 * 10) / 10 + "K";
	} else {
	return d;
	}
	}

	var COLOR_FIRST = config.color1, COLOR_LAST = config.color2;

	var rgb = hexToRgb(COLOR_FIRST);

	var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);

	rgb = hexToRgb(COLOR_LAST);
	var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);

	var MAP_STATE = config.stateDataColumn;
	var MAP_VALUE = config.valueDataColumn;

	var width = WIDTH,
	height = HEIGHT;

	var valueById = d3.map();

	var startColors = COLOR_START.getColors(),
	endColors = COLOR_END.getColors();

	var colors = [];

	for (var i = 0; i < COLOR_COUNTS; i++) {
	var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);
	var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);
	var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);
	colors.push(new Color(r, g, b));
	}

	var quantize = d3.scale.quantize()
	.domain([0, 1.0])
	.range(d3.range(COLOR_COUNTS).map(function(i) { return i }));

	var path = d3.geo.path();

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

	d3.tsv("https://s3-us-west-2.amazonaws.com/vida-public/geo/us-state-names.tsv", function(error, names) {

	name_id_map = {};
	id_name_map = {};

	for (var i = 0; i < names.length; i++) {
	name_id_map[names[i].name] = names[i].id;
	id_name_map[names[i].id] = names[i].name;
	}

	data.forEach(function(d) {
	var id = name_id_map[d[MAP_STATE]];
	valueById.set(id, +d[MAP_VALUE]);
	});

	quantize.domain([d3.min(data, function(d){ return +d[MAP_VALUE] }),
	d3.max(data, function(d){ return +d[MAP_VALUE] })]);

	d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
	svg.append("g")
	.attr("class", "states-choropleth")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append("path")
	.attr("transform", "scale(" + SCALE + ")")
	.style("fill", function(d) {
	if (valueById.get(d.id)) {
	var i = quantize(valueById.get(d.id));
	var color = colors[i].getColors();
	return "rgb(" + color.r + "," + color.g +
	"," + color.b + ")";
	} else {
	return "";
	}
	})
	.attr("d", path)
	.on("mousemove", function(d) {
	var html = "";

	html += "<div class=\"tooltip_kv\">";
	html += "<span class=\"tooltip_key\">";
	html += id_name_map[d.id];
	html += "</span>";
	html += "<span class=\"tooltip_value\">";
	html += (valueById.get(d.id) ? valueFormat(valueById.get(d.id)) : "");
	html += "";
	html += "</span>";
	html += "</div>";

	$("#tooltip-container").html(html);
	$(this).attr("fill-opacity", "0.8");
	$("#tooltip-container").show();

	var coordinates = d3.mouse(this);

	var map_width = $('.states-choropleth')[0].getBoundingClientRect().width;

	if (d3.event.layerX < map_width / 2) {
	d3.select("#tooltip-container")
	.style("top", (d3.event.layerY + 15) + "px")
	.style("left", (d3.event.layerX + 15) + "px");
	} else {
	var tooltip_width = $("#tooltip-container").width();
	d3.select("#tooltip-container")
	.style("top", (d3.event.layerY + 15) + "px")
	.style("left", (d3.event.layerX - tooltip_width - 30) + "px");
	}
	})
	.on("mouseout", function() {
	$(this).attr("fill-opacity", "1.0");
	$("#tooltip-container").hide();
	});

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "states")
	.attr("transform", "scale(" + SCALE + ")")
	.attr("d", path);
	});

	});
	});

	</script>
state_or_territory	population_estimate_for_july_1_2013_number	census_population_april_1_2010_number	census_population_april_1_2000_number
California	38332521	37253956	33871648
Texas	26448193	25145561	20851820
New York	19651127	19378102	18976457
Florida	19552860	18801310	15982378
Illinois	12882135	12830632	12419293
Pennsylvania	12773801	12702379	12281054
Ohio	11570808	11536504	11353140
Georgia	9992167	9687653	8186453
Michigan	9895622	9883640	9938444
North Carolina	9848060	9535483	8049313
New Jersey	8899339	8791894	8414350
Virginia	8260405	8001024	7078515
Washington	6971406	6724540	5894121
Massachusetts	6692824	6547629	6349097
Arizona	6626624	6392017	5130632
Indiana	6570902	6483802	6080485
Tennessee	6495978	6346105	5689283
Missouri	6044171	5988927	5595211
Maryland	5928814	5773552	5296486
Wisconsin	5742713	5686986	5363675
Minnesota	5420380	5303925	4919479
Colorado	5268367	5029196	4301261
Alabama	4833722	4779736	4447100
South Carolina	4774839	4625364	4012012
Louisiana	4625470	4533372	4468976
Kentucky	4395295	4339367	4041769
Oregon	3930065	3831074	3421399
Oklahoma	3850568	3751351	3450654
Puerto Rico	3615086	3725789	3808610
Connecticut	3596080	3574097	3405565
Iowa	3090416	3046355	2926324
Mississippi	2991207	2967297	2844658
Arkansas	2959373	2915918	2673400
Utah	2900872	2763885	2233169
Kansas	2893957	2853118	2688418
Nevada	2790136	2700551	1998257
New Mexico	2085287	2059179	1819046
Nebraska	1868516	1826341	1711263
West Virginia	1854304	1852994	1808344
Idaho	1612136	1567582	1293953
Hawaii	1404054	1360301	1211537
Maine	1328302	1328361	1274923
New Hampshire	1323459	1316470	1235786
Rhode Island	1051511	1052567	1048319
Montana	1015165	989415	902195
Delaware	925749	897934	783600
South Dakota	844877	814180	754844
Alaska	735132	710231	626932
North Dakota	723393	672591	642200
District of Columbia	646449	601723	572059
Vermont	626630	625741	608827
Wyoming	582658	563626	493782
Guam		159358; 1	154805
U.S. Virgin Islands		106405; 2	108612
American Samoa		55519; 3	57291
Northern Mariana Islands		53883; 4	69221