All examples By author By category About

kirkhunter

Full window Github gist

Healthcare Covered Charges Among US States

Project 3

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    
h2.title {
color: black;
text-align: left;
}

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

path {  stroke: #fff; }
path:hover {  opacity:0.9; }
rect:hover {  fill:steelblue; }
.axis {  font: 10px sans-serif; }
.legend tr{    border-bottom:1px solid grey; }
.legend tr:first-child{    border-top:1px solid grey; }

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {  display: none; }
.legend{
    margin-bottom:76px;
    display:inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
}
.legend td{
    padding:4px 5px;
    vertical-align:bottom;
}
.legendFreq, .legendPerc{
    align:right;
    width:50px;
}

</style>
<body><h2 text="Healthcare Average Covered Charges (in thousands of dollars)" class="title"></h2></body>
<body id="dashboard"></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

d3.select("body")
            .append("h2")
            .text("Healthcare Average Covered Charges (in thousands of dollars)")
            .attr('class', 'title');

function draw(data) {
        // "use strict"; 
        // console.log(data)

var WIDTH = 800, HEIGHT = 400;

var COLOR_COUNTS = 9;

var SCALE = 0.7;

var config = {
          "main_category": "Washington",
          "avg_category": "Nation Average",
          "color1": '#c3e2ff',
          "color2": '#08306B',
          "stateDataColumn": "provider_state",
          "valueDataColumn": "med_average_covered_charges"
        };

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

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) {
// console.log(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;
};
console.log(name_id_map);
console.log(id_name_map);

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

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) ? (Math.round(+valueById.get(d.id) / 10.) / 100) : "");
          html += "";
          html += "</span>";
          html += "</div>";
          
          $("#tooltip-container").html(html);
          $(this).attr("fill-opacity", "0.8");
          $("#tooltip-container").show(); console.log(html);
          
          var coordinates = d3.mouse(this);
          
          var map_width = $('.categories-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", "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);
});

});

};

d3.csv("https://raw.githubusercontent.com/KirkHunter/KirkHunter.github.io/master/health.csv", draw);

</script>
<body>
<div id="tooltip-container"></div>
<div id="canvas-svg"></div>
</body>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js