dnprock/index.html

## 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://gist.githubusercontent.com/amartone/5e9a82772cf1337d688fe47729e99532/raw/65a04d5b4934beda724630f18c475d350628f64d/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://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.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>

## population.csv

          
            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
	<!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://gist.githubusercontent.com/amartone/5e9a82772cf1337d688fe47729e99532/raw/65a04d5b4934beda724630f18c475d350628f64d/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://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.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