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 */

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

.categories-choropleth {
  fill: #ccc;
}

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

#canvas svg {
  border: 0px;
}

.tooltip_key {
  font-weight: bold;
}

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

.x-axis {
  fill: #000;
}

.chart {
  background: #fff;
  margin: 5px;
}

.chart .category-bar {
  stroke: white;
  fill: steelblue;
}

.chart .score {
  fill: white;
}

.chart text.name {
  fill: #000;
}

.chart line {
  stroke: #c1c1c1;
}

.chart .rule {
  fill: #000;
}

.main-category-text {
  fill: #FF4A4A;
}

.main-category-bar {
  stroke: #FF4A4A;
  stroke-width: 2px;
}

</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":"#c3e2ff","color2":"#08306B","mainCategory":"Washington","averageCategory":"Nation Average","stateDataColumn":"state_and_district_of_columbia","valueDataColumn":"obese_adults_number"}

  var WIDTH = 800, HEIGHT = 400;

  var COLOR_COUNTS = 9;

  var SCALE = 0.7;

  var MAIN_CATEGORY = config.mainCategory;
  var AVG_CATEGORY = config.averageCategory;

  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;
  }

  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_CATEGORY = 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_CATEGORY]];
    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] })]);

  function makeBars() {
    var names = [],
        ids = [],
        name_values = [],
        values = [],
        chart,
        width = 400,
        bar_height = 20,
        height = (bar_height + 2 * gap) * names.length;

    var total_categories = 0, categories_count = 0;
    Object.keys(name_id_map).forEach(function(n) {
      if (valueById.get(+name_id_map[n])) {
        ids.push(+name_id_map[n]);
        values.push(valueById.get(+name_id_map[n]));
        name_values.push({name: n, value: valueById.get(+name_id_map[n])});
        total_categories += valueById.get(+name_id_map[n]);
        categories_count++;
      }
    });

    values.push(Math.round(total_categories / categories_count));
    name_values.push({name: AVG_CATEGORY, value: Math.round(total_categories / categories_count)});

    values = values.sort(function(a, b) {
      return -(a - b);
    });

    name_values = name_values.sort(function(a, b) {
      return -(a.value - b.value);
    });

    name_values.forEach(function(d) {
      names.push(d.name);
    });

    var left_width = 150;

    var x = d3.scale.linear()
       .domain([0, d3.max(values)])
       .range([0, width]);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("top");

    var gap = 2;
    // redefine y for adjusting the gap
    var y = d3.scale.ordinal()
      .domain(names)
      .rangeBands([0, (bar_height + 2 * gap) * names.length]);

    chart = d3.select("#canvas-svg")
      .append('svg')
      .attr('class', 'chart')
      .attr('width', left_width + width + 100)
      .attr('height', (bar_height + gap * 2) * names.length + 30)
      .append("g")
      .attr("transform", "translate(10, 20)");

    chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + left_width + ", 0)")
      .call(xAxis)
    .append("text")
      .attr("transform", "rotate(90) translate(10, " + (-width - 20) + ")")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "right")
      .text(MAP_VALUE);

    chart.selectAll(".tick").append("line")
      .attr("x1", 0)
      .attr("x2", 0)
      .attr("y1", 0)
      .attr("y2", (bar_height + gap * 2) * names.length);

    chart.selectAll("rect")
      .data(name_values)
      .enter().append("rect")
      .attr("x", left_width)
      .attr("y", function(d) { return y(d.name) + gap; })
      .attr("name", function(d, i) {
        return d.name;
      })
      .attr("width", function(d, i) {
        return x(d.value);
      })
      .attr("height", bar_height)
      .style("fill", function(d) {
        var i = quantize(d.value);
        var color = colors[i].getColors();
        return "rgb(" + color.r + "," + color.g +
            "," + color.b + ")";
      })
      .attr("class", function(d) {
        if (d.name === MAIN_CATEGORY || d.name === AVG_CATEGORY) {
          return "main-category-bar";
        } else {
          return "category-bar";
        }
      });

    chart.selectAll("text.score")
      .data(name_values)
      .enter().append("text")
      .attr("x", function(d) { return x(d.value) + left_width; })
      .attr("y", function(d, i){ return y(d.name) + y.rangeBand()/2; } )
      .attr("dx", -5)
      .attr("dy", ".36em")
      .attr("text-anchor", "end")
      .attr('class', 'score')
      .text(function(d) {
        return d.value;
      });

    chart.selectAll("text.name")
      .data(name_values)
      .enter().append("text")
      .attr("x", left_width / 2)
      .attr("y", function(d, i){
        return y(d.name) + y.rangeBand()/2; } )
      .attr("dy", ".36em")
      .attr("text-anchor", "middle")
      .attr('class', function(d) {
        if (d.name === MAIN_CATEGORY || d.name === AVG_CATEGORY) {
          return "main-category-text";
        } else {
          return "";
        }
      })
      .text(function(d) {
        return d.name;
      });
  }

  function makeMap(us) {
    svg.append("g")
        .attr("class", "categories-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) ? 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 = $('.categories-choropleth')[0].getBoundingClientRect().width;

            if (d3.event.pageX < map_width / 2) {
              d3.select("#tooltip-container")
                .style("top", (d3.event.pageY + 15) + "px")
                .style("left", (d3.event.pageX + 15) + "px");
            } else {
              var tooltip_width = $("#tooltip-container").width();
              d3.select("#tooltip-container")
                .style("top", (d3.event.pageY + 15) + "px")
                .style("left", (d3.event.pageX - 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", "categories")
        .attr("transform", "scale(" + SCALE + ")")
        .attr("d", path);
  }

  d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
    makeMap(us);
    makeBars(data);
  });

  });
});

</script>

## population.csv

          
            state_and_district_of_columbia
            obese_adults_number
            obese_adults
            overweight_incl_obese_adults_number
            overweight_incl_obese_adults
            obese_children_and_adolescents_number
            obese_children_and_adolescents
            obesity_rank_number

            
              Alabama
              30.1
              30.10%
              65.4
              65.40%
              16.7
              16.70%
              3

            
              Alaska
              27.3
              27.30%
              64.5
              64.50%
              11.1
              11.10%
              14

            
              Arizona
              23.3
              23.30%
              59.5
              59.50%
              12.2
              12.20%
              40

            
              Arkansas
              28.1
              28.10%
              64.7
              64.70%
              16.4
              16.40%
              9

            
              California
              23.1
              23.10%
              59.4
              59.40%
              13.2
              13.20%
              41

            
              Colorado
              21
              21.00%
              55
              55.00%
              9.9
              9.90%
              51

            
              Connecticut
              20.8
              20.80%
              58.7
              58.70%
              12.3
              12.30%
              49

            
              District of Columbia
              22.1
              22.10%
              55
              55.00%
              14.8
              14.80%
              43

            
              Delaware
              25.9
              25.90%
              63.9
              63.90%
              22.8
              22.80%
              22

            
              Florida
              23.3
              23.30%
              60.8
              60.80%
              14.4
              14.40%
              39

            
              Georgia
              27.5
              27.50%
              63.3
              63.30%
              16.4
              16.40%
              12

            
              Hawaii
              20.7
              20.70%
              55.3
              55.30%
              13.3
              13.30%
              50

            
              Idaho
              24.6
              24.60%
              61.4
              61.40%
              10.1
              10.10%
              31

            
              Illinois
              25.3
              25.30%
              61.8
              61.80%
              15.8
              15.80%
              26

            
              Indiana
              27.5
              27.50%
              62.8
              62.80%
              15.6
              15.60%
              11

            
              Iowa
              26.3
              26.30%
              63.4
              63.40%
              12.5
              12.50%
              19

            
              Kansas
              25.8
              25.80%
              62.3
              62.30%
              14
              14.00%
              23

            
              Kentucky
              28.4
              28.40%
              66.8
              66.80%
              20.6
              20.60%
              7

            
              Louisiana
              29.5
              29.50%
              64.2
              64.20%
              17.2
              17.20%
              4

            
              Maine
              23.7
              23.70%
              60.8
              60.80%
              12.7
              12.70%
              34

            
              Maryland
              25.2
              25.20%
              61.5
              61.50%
              13.3
              13.30%
              28

            
              Massachusetts
              20.9
              20.90%
              56.8
              56.80%
              13.6
              13.60%
              48

            
              Michigan
              27.7
              27.70%
              63.9
              63.90%
              14.5
              14.50%
              10

            
              Minnesota
              24.8
              24.80%
              61.9
              61.90%
              10.1
              10.10%
              30

            
              Mississippi
              34.4
              34.40%
              67.4
              67.40%
              17.8
              17.80%
              1

            
              Missouri
              27.4
              27.40%
              63.3
              63.30%
              15.6
              15.60%
              13

            
              Montana
              21.7
              21.70%
              59.6
              59.60%
              11.1
              11.10%
              45

            
              Nebraska
              26.5
              26.50%
              63.9
              63.90%
              11.9
              11.90%
              18

            
              Nevada
              23.6
              23.60%
              61.8
              61.80%
              12.4
              12.40%
              36

            
              New Hampshire
              23.6
              23.60%
              60.8
              60.80%
              12.9
              12.90%
              35

            
              New Jersey
              22.9
              22.90%
              60.5
              60.50%
              13.7
              13.70%
              42

            
              New Mexico
              23.3
              23.30%
              60.3
              60.30%
              16.8
              16.80%
              38

            
              New York
              23.5
              23.50%
              60
              60.00%
              15.3
              15.30%
              37

            
              North Carolina
              27.1
              27.10%
              63.4
              63.40%
              19.3
              19.30%
              16

            
              North Dakota
              25.9
              25.90%
              64.5
              64.50%
              12.1
              12.10%
              21

            
              Ohio
              26.9
              26.90%
              63.3
              63.30%
              14.2
              14.20%
              17

            
              Oklahoma
              28.1
              28.10%
              64.2
              64.20%
              15.4
              15.40%
              8

            
              Oregon
              25
              25.00%
              60.8
              60.80%
              14.1
              14.10%
              29

            
              Pennsylvania
              25.7
              25.70%
              61.9
              61.90%
              13.3
              13.30%
              24

            
              Rhode Island
              21.4
              21.40%
              60.4
              60.40%
              11.9
              11.90%
              46

            
              South Carolina
              29.2
              29.20%
              65.1
              65.10%
              18.9
              18.90%
              5

            
              South Dakota
              26.1
              26.10%
              64.2
              64.20%
              12.1
              12.10%
              20

            
              Tennessee
              29
              29.00%
              65
              65.00%
              20
              20.00%
              6

            
              Texas
              27.2
              27.20%
              64.1
              64.10%
              19.1
              19.10%
              15

            
              Utah
              21.8
              21.80%
              56.4
              56.40%
              8.5
              8.50%
              44

            
              Vermont
              21.1
              21.10%
              56.9
              56.90%
              11.3
              11.30%
              47

            
              Virginia
              25.2
              25.20%
              61.6
              61.60%
              13.8
              13.80%
              27

            
              Washington
              24.5
              24.50%
              60.7
              60.70%
              10.8
              10.80%
              32

            
              West Virginia
              30.6
              30.60%
              66.8
              66.80%
              20.9
              20.90%
              2

            
              Wisconsin
              25.5
              25.50%
              62.4
              62.40%
              13.5
              13.50%
              25

            
              Wyoming
              24
              24.00%
              61.7
              61.70%
              8.7
              8.70%
              33
	<!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 */

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

	.categories-choropleth {
	fill: #ccc;
	}

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

	#canvas svg {
	border: 0px;
	}

	.tooltip_key {
	font-weight: bold;
	}

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

	.x-axis {
	fill: #000;
	}

	.chart {
	background: #fff;
	margin: 5px;
	}

	.chart .category-bar {
	stroke: white;
	fill: steelblue;
	}

	.chart .score {
	fill: white;
	}

	.chart text.name {
	fill: #000;
	}

	.chart line {
	stroke: #c1c1c1;
	}

	.chart .rule {
	fill: #000;
	}

	.main-category-text {
	fill: #FF4A4A;
	}

	.main-category-bar {
	stroke: #FF4A4A;
	stroke-width: 2px;
	}

	</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":"#c3e2ff","color2":"#08306B","mainCategory":"Washington","averageCategory":"Nation Average","stateDataColumn":"state_and_district_of_columbia","valueDataColumn":"obese_adults_number"}

	var WIDTH = 800, HEIGHT = 400;

	var COLOR_COUNTS = 9;

	var SCALE = 0.7;

	var MAIN_CATEGORY = config.mainCategory;
	var AVG_CATEGORY = config.averageCategory;

	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;
	}

	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_CATEGORY = 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_CATEGORY]];
	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] })]);

	function makeBars() {
	var names = [],
	ids = [],
	name_values = [],
	values = [],
	chart,
	width = 400,
	bar_height = 20,
	height = (bar_height + 2 * gap) * names.length;

	var total_categories = 0, categories_count = 0;
	Object.keys(name_id_map).forEach(function(n) {
	if (valueById.get(+name_id_map[n])) {
	ids.push(+name_id_map[n]);
	values.push(valueById.get(+name_id_map[n]));
	name_values.push({name: n, value: valueById.get(+name_id_map[n])});
	total_categories += valueById.get(+name_id_map[n]);
	categories_count++;
	}
	});

	values.push(Math.round(total_categories / categories_count));
	name_values.push({name: AVG_CATEGORY, value: Math.round(total_categories / categories_count)});

	values = values.sort(function(a, b) {
	return -(a - b);
	});

	name_values = name_values.sort(function(a, b) {
	return -(a.value - b.value);
	});

	name_values.forEach(function(d) {
	names.push(d.name);
	});

	var left_width = 150;

	var x = d3.scale.linear()
	.domain([0, d3.max(values)])
	.range([0, width]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("top");

	var gap = 2;
	// redefine y for adjusting the gap
	var y = d3.scale.ordinal()
	.domain(names)
	.rangeBands([0, (bar_height + 2 * gap) * names.length]);

	chart = d3.select("#canvas-svg")
	.append('svg')
	.attr('class', 'chart')
	.attr('width', left_width + width + 100)
	.attr('height', (bar_height + gap * 2) * names.length + 30)
	.append("g")
	.attr("transform", "translate(10, 20)");

	chart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + left_width + ", 0)")
	.call(xAxis)
	.append("text")
	.attr("transform", "rotate(90) translate(10, " + (-width - 20) + ")")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "right")
	.text(MAP_VALUE);

	chart.selectAll(".tick").append("line")
	.attr("x1", 0)
	.attr("x2", 0)
	.attr("y1", 0)
	.attr("y2", (bar_height + gap * 2) * names.length);

	chart.selectAll("rect")
	.data(name_values)
	.enter().append("rect")
	.attr("x", left_width)
	.attr("y", function(d) { return y(d.name) + gap; })
	.attr("name", function(d, i) {
	return d.name;
	})
	.attr("width", function(d, i) {
	return x(d.value);
	})
	.attr("height", bar_height)
	.style("fill", function(d) {
	var i = quantize(d.value);
	var color = colors[i].getColors();
	return "rgb(" + color.r + "," + color.g +
	"," + color.b + ")";
	})
	.attr("class", function(d) {
	if (d.name === MAIN_CATEGORY \|\| d.name === AVG_CATEGORY) {
	return "main-category-bar";
	} else {
	return "category-bar";
	}
	});

	chart.selectAll("text.score")
	.data(name_values)
	.enter().append("text")
	.attr("x", function(d) { return x(d.value) + left_width; })
	.attr("y", function(d, i){ return y(d.name) + y.rangeBand()/2; } )
	.attr("dx", -5)
	.attr("dy", ".36em")
	.attr("text-anchor", "end")
	.attr('class', 'score')
	.text(function(d) {
	return d.value;
	});

	chart.selectAll("text.name")
	.data(name_values)
	.enter().append("text")
	.attr("x", left_width / 2)
	.attr("y", function(d, i){
	return y(d.name) + y.rangeBand()/2; } )
	.attr("dy", ".36em")
	.attr("text-anchor", "middle")
	.attr('class', function(d) {
	if (d.name === MAIN_CATEGORY \|\| d.name === AVG_CATEGORY) {
	return "main-category-text";
	} else {
	return "";
	}
	})
	.text(function(d) {
	return d.name;
	});
	}

	function makeMap(us) {
	svg.append("g")
	.attr("class", "categories-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) ? 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 = $('.categories-choropleth')[0].getBoundingClientRect().width;

	if (d3.event.pageX < map_width / 2) {
	d3.select("#tooltip-container")
	.style("top", (d3.event.pageY + 15) + "px")
	.style("left", (d3.event.pageX + 15) + "px");
	} else {
	var tooltip_width = $("#tooltip-container").width();
	d3.select("#tooltip-container")
	.style("top", (d3.event.pageY + 15) + "px")
	.style("left", (d3.event.pageX - 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", "categories")
	.attr("transform", "scale(" + SCALE + ")")
	.attr("d", path);
	}

	d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
	makeMap(us);
	makeBars(data);
	});

	});
	});

	</script>
state_and_district_of_columbia	obese_adults_number	obese_adults	overweight_incl_obese_adults_number	overweight_incl_obese_adults	obese_children_and_adolescents_number	obese_children_and_adolescents	obesity_rank_number
Alabama	30.1	30.10%	65.4	65.40%	16.7	16.70%	3
Alaska	27.3	27.30%	64.5	64.50%	11.1	11.10%	14
Arizona	23.3	23.30%	59.5	59.50%	12.2	12.20%	40
Arkansas	28.1	28.10%	64.7	64.70%	16.4	16.40%	9
California	23.1	23.10%	59.4	59.40%	13.2	13.20%	41
Colorado	21	21.00%	55	55.00%	9.9	9.90%	51
Connecticut	20.8	20.80%	58.7	58.70%	12.3	12.30%	49
District of Columbia	22.1	22.10%	55	55.00%	14.8	14.80%	43
Delaware	25.9	25.90%	63.9	63.90%	22.8	22.80%	22
Florida	23.3	23.30%	60.8	60.80%	14.4	14.40%	39
Georgia	27.5	27.50%	63.3	63.30%	16.4	16.40%	12
Hawaii	20.7	20.70%	55.3	55.30%	13.3	13.30%	50
Idaho	24.6	24.60%	61.4	61.40%	10.1	10.10%	31
Illinois	25.3	25.30%	61.8	61.80%	15.8	15.80%	26
Indiana	27.5	27.50%	62.8	62.80%	15.6	15.60%	11
Iowa	26.3	26.30%	63.4	63.40%	12.5	12.50%	19
Kansas	25.8	25.80%	62.3	62.30%	14	14.00%	23
Kentucky	28.4	28.40%	66.8	66.80%	20.6	20.60%	7
Louisiana	29.5	29.50%	64.2	64.20%	17.2	17.20%	4
Maine	23.7	23.70%	60.8	60.80%	12.7	12.70%	34
Maryland	25.2	25.20%	61.5	61.50%	13.3	13.30%	28
Massachusetts	20.9	20.90%	56.8	56.80%	13.6	13.60%	48
Michigan	27.7	27.70%	63.9	63.90%	14.5	14.50%	10
Minnesota	24.8	24.80%	61.9	61.90%	10.1	10.10%	30
Mississippi	34.4	34.40%	67.4	67.40%	17.8	17.80%	1
Missouri	27.4	27.40%	63.3	63.30%	15.6	15.60%	13
Montana	21.7	21.70%	59.6	59.60%	11.1	11.10%	45
Nebraska	26.5	26.50%	63.9	63.90%	11.9	11.90%	18
Nevada	23.6	23.60%	61.8	61.80%	12.4	12.40%	36
New Hampshire	23.6	23.60%	60.8	60.80%	12.9	12.90%	35
New Jersey	22.9	22.90%	60.5	60.50%	13.7	13.70%	42
New Mexico	23.3	23.30%	60.3	60.30%	16.8	16.80%	38
New York	23.5	23.50%	60	60.00%	15.3	15.30%	37
North Carolina	27.1	27.10%	63.4	63.40%	19.3	19.30%	16
North Dakota	25.9	25.90%	64.5	64.50%	12.1	12.10%	21
Ohio	26.9	26.90%	63.3	63.30%	14.2	14.20%	17
Oklahoma	28.1	28.10%	64.2	64.20%	15.4	15.40%	8
Oregon	25	25.00%	60.8	60.80%	14.1	14.10%	29
Pennsylvania	25.7	25.70%	61.9	61.90%	13.3	13.30%	24
Rhode Island	21.4	21.40%	60.4	60.40%	11.9	11.90%	46
South Carolina	29.2	29.20%	65.1	65.10%	18.9	18.90%	5
South Dakota	26.1	26.10%	64.2	64.20%	12.1	12.10%	20
Tennessee	29	29.00%	65	65.00%	20	20.00%	6
Texas	27.2	27.20%	64.1	64.10%	19.1	19.10%	15
Utah	21.8	21.80%	56.4	56.40%	8.5	8.50%	44
Vermont	21.1	21.10%	56.9	56.90%	11.3	11.30%	47
Virginia	25.2	25.20%	61.6	61.60%	13.8	13.80%	27
Washington	24.5	24.50%	60.7	60.70%	10.8	10.80%	32
West Virginia	30.6	30.60%	66.8	66.80%	20.9	20.90%	2
Wisconsin	25.5	25.50%	62.4	62.40%	13.5	13.50%	25
Wyoming	24	24.00%	61.7	61.70%	8.7	8.70%	33