EPI Data Visulization

.block

license: gpl-3.0

readme.json

{
 "name": "epi",
 "children": [
  {
   "name": "Switzerland",
   "children": [
    {
     "name": "Health Impacts",
     "children": [
      {"name": "Child Mortality", "size": 100}
     ]
    },
    {
     "name": "Air Quality",
     "children": [
      {"name": "Household Air Quality", "size": 95},
      {"name": "Air Pollution - Average Exposure to PM2.5", "size": 78.21},
      {"name": "Air Pollution - Average PM2.5 Exceedance", "size": 56.47}
     ]
    },
    {
     "name": "Water and Sanitation",
     "children": [
      {"name": "Access to Sanitation", "size": 100},
      {"name": "Access to Drinking Water", "size": 100}
     ]
    },
    {
     "name": "Water Resources",
     "children": [
      {"name": "Wastewater Treatment", "size": 96.95}
     ]
    },
    {
     "name": "Agriculture",
     "children": [
      {"name": "Agricultural Subsidies", "size": 6.48},
      {"name": "Pesticide ", "size": 92}
     ]
    },
    {
     "name": "Forests",
     "children": [
      {"name": "Change in Forest Cover ", "size": 49.65}
     ]
    },
    {
     "name": "Fisheries",
     "children": [
      {"name": "Fish Stocks", "size": 0},
      {"name": "Coastal Shelf Fishing Pressure", "size": 0}
     ]
    },
    {
     "name": "Biodiversity and Habitat",
     "children": [
      {"name": "Terrestrial Protected Areas (National Biome Weights)", "size": 100},
      {"name": "Terrestrial Protected Areas (Global Biome Weights)", "size": 100},
      {"name": "Marine Protected Areas", "size": 0},
      {"name": "Critical Habitat Protection", "size": 0}
     ]
    },
    {
     "name": "Climate and Energy",
     "children": [
      {"name": "Trend in Carbon Intensity", "size": 67.91},
      {"name": "Change of Trend in Carbon Intensity", "size": 38.47},
      {"name": "Trend in CO2 Emissions per KwH", "size": 98.63},
      {"name": "Access to Electricity", "size": 100}
     ]
    }
   ]
  },
  {
   "name": "Colombia",
   "children": [
    {
     "name": "Health Impacts",
     "children": [
      {"name": "Child Mortality", "size": 63}
     ]
    },
    {
     "name": "Air Quality",
     "children": [
      {"name": "Household Air Quality", "size": 86},
      {"name": "Air Pollution - Average Exposure to PM2.5", "size": 100},
      {"name": "Air Pollution - Average PM2.5 Exceedance", "size": 99.28}
     ]
    },
    {
     "name": "Water and Sanitation",
     "children": [
      {"name": "Access to Sanitation", "size": 29.91},
      {"name": "Access to Drinking Water", "size": 49.94}
     ]
    },
    {
     "name": "Water Resources",
     "children": [
      {"name": "Wastewater Treatment", "size": 4.6}
     ]
    },
    {
     "name": "Agriculture",
     "children": [
      {"name": "Agricultural Subsidies", "size": 13.01},
      {"name": "Pesticide Regulation", "size": 92}
     ]
    },
    {
     "name": "Forests",
     "children": [
      {"name": "Change in Forest Cover ", "size": 26.24}
     ]
    },
    {
     "name": "Fisheries",
     "children": [
      {"name": "Fish Stocks", "size": 9.5},
      {"name": "Coastal Shelf Fishing Pressure", "size": 55.42}
     ]
    },
    {
     "name": "Biodiversity and Habitat",
     "children": [
      {"name": "Terrestrial Protected Areas (National Biome Weights)", "size": 89.25},
      {"name": "Terrestrial Protected Areas (Global Biome Weights)", "size": 77.22},
      {"name": "Marine Protected Areas", "size": 99.14},
      {"name": "Critical Habitat Protection", "size": 56}
     ]
    },
    {
     "name": "Climate and Energy",
     "children": [
      {"name": "Trend in Carbon Intensity", "size": 64.68},
      {"name": "Change of Trend in Carbon Intensity", "size": 36.3},
      {"name": "Trend in CO2 Emissions per KwH", "size": 48.1},
      {"name": "Access to Electricity", "size": 97}
     ]
    }
   ]
  },
  {
   "name": "Germany",
   "children": [
    {
     "name": "Health Impacts",
     "children": [
      {"name": "Child Mortality", "size": 100}
     ]
    },
    {
     "name": "Air Quality",
     "children": [
      {"name": "Household Air Quality", "size": 95},
      {"name": "Air Pollution - Average Exposure to PM2.5", "size": 82.24},
      {"name": "Air Pollution - Average PM2.5 Exceedance", "size": 58.27}
     ]
    },
    {
     "name": "Water and Sanitation",
     "children": [
      {"name": "Access to Sanitation", "size": 100},
      {"name": "Access to Drinking Water", "size": 100}
     ]
    },
    {
     "name": "Water Resources",
     "children": [
      {"name": "Wastewater Treatment", "size": 95.18}
     ]
    },
    {
     "name": "Agriculture",
     "children": [
      {"name": "Agricultural Subsidies", "size": 38.62},
      {"name": "Pesticide Regulation", "size": 92}
     ]
    },
    {
     "name": "Forests",
     "children": [
      {"name": "Change in Forest Cover ", "size": 31.35}
     ]
    },
    {
     "name": "Fisheries",
     "children": [
      {"name": "Fish Stocks", "size": 8.33},
      {"name": "Coastal Shelf Fishing Pressure", "size": 18.46}
     ]
    },
    {
     "name": "Biodiversity and Habitat",
     "children": [
      {"name": "Terrestrial Protected Areas (National Biome Weights)", "size": 100},
      {"name": "Terrestrial Protected Areas (Global Biome Weights)", "size": 100},
      {"name": "Marine Protected Areas", "size": 100},
      {"name": "Critical Habitat Protection", "size": 0}
     ]
    },
    {
     "name": "Climate and Energy",
     "children": [
      {"name": "Trend in Carbon Intensity", "size": 65.24},
      {"name": "Change of Trend in Carbon Intensity", "size": 27.82},
      {"name": "Trend in CO2 Emissions per KwH", "size": 58.26},
      {"name": "Access to Electricity", "size": 100}
     ]
    }
   ]
  },
  {
   "name": "India",
   "children": [
    {
     "name": "Health Impacts",
     "children": [
      {"name": "Child Mortality", "size": 50.04}
     ]
    },
    {
     "name": "Air Quality",
     "children": [
      {"name": "Household Air Quality", "size": 42},
      {"name": "Air Pollution - Average Exposure to PM2.5", "size": 27.72},
      {"name": "Air Pollution - Average PM2.5 Exceedance", "size": 0}
     ]
    },
    {
     "name": "Water and Sanitation",
     "children": [
      {"name": "Access to Sanitation", "size": 6.2},
      {"name": "Access to Drinking Water", "size": 46.36}
     ]
    },
    {
     "name": "Water Resources",
     "children": [
      {"name": "Wastewater Treatment", "size": 10.49}
     ]
    },
    {
     "name": "Agriculture",
     "children": [
      {"name": "Agricultural Subsidies", "size": 24.79},
      {"name": "Pesticide Regulation", "size": 92}
     ]
    },
    {
     "name": "Forests",
     "children": [
      {"name": "Change in Forest Cover ", "size": 35.07}
     ]
    },
    {
     "name": "Fisheries",
     "children": [
      {"name": "Fish Stocks", "size": 27.14},
      {"name": "Coastal Shelf Fishing Pressure", "size": 18.14}
     ]
    },
    {
     "name": "Biodiversity and Habitat",
     "children": [
      {"name": "Terrestrial Protected Areas (National Biome Weights)", "size": 27.61},
      {"name": "Terrestrial Protected Areas (Global Biome Weights)", "size": 36.33},
      {"name": "Marine Protected Areas", "size": 60.79},
      {"name": "Critical Habitat Protection", "size": 32}
     ]
    },
    {
     "name": "Climate and Energy",
     "children": [
      {"name": "Trend in Carbon Intensity", "size": 51.47},
      {"name": "Change of Trend in Carbon Intensity", "size": 26.89},
      {"name": "Trend in CO2 Emissions per KwH", "size": 51.91},
      {"name": "Access to Electricity", "size": 75}
     ]
    }
   ]
  },
  {
   "name": "Spain",
   "children": [
    {
     "name": "Health Impacts",
     "children": [
      {"name": "Child Mortality", "size": 96.17}
     ]
    },
    {
     "name": "Air Quality",
     "children": [
      {"name": "Household Air Quality", "size": 95},
      {"name": "Air Pollution - Average Exposure to PM2.5", "size": 100},
      {"name": "Air Pollution - Average PM2.5 Exceedance", "size": 97.12}
     ]
    },
    {
     "name": "Water and Sanitation",
     "children": [
      {"name": "Access to Sanitation", "size": 99},
      {"name": "Access to Drinking Water", "size": 98}
     ]
    },
    {
     "name": "Water Resources",
     "children": [
      {"name": "Wastewater Treatment", "size": 92.83}
     ]
    },
    {
     "name": "Agriculture",
     "children": [
      {"name": "Agricultural Subsidies", "size": 38.38},
      {"name": "Pesticide Regulation", "size": 92}
     ]
    },
    {
     "name": "Forests",
     "children": [
      {"name": "Change in Forest Cover ", "size": 45.05}
     ]
    },
    {
     "name": "Fisheries",
     "children": [
      {"name": "Fish Stocks", "size": 21.69},
      {"name": "Coastal Shelf Fishing Pressure", "size": 24.8}
     ]
    },
    {
     "name": "Biodiversity and Habitat",
     "children": [
      {"name": "Terrestrial Protected Areas (National Biome Weights)", "size": 50.34},
      {"name": "Terrestrial Protected Areas (Global Biome Weights)", "size": 46.11},
      {"name": "Marine Protected Areas", "size": 73.21},
      {"name": "Critical Habitat Protection", "size": 0}
     ]
    },
    {
     "name": "Climate and Energy",
     "children": [
      {"name": "Trend in Carbon Intensity", "size": 77.96},
      {"name": "Change of Trend in Carbon Intensity", "size": 69.8},
      {"name": "Trend in CO2 Emissions per KwH", "size": 89.97},
      {"name": "Access to Electricity", "size": 100}
     ]
    }
   ]
  }
 ]
}

README.md

This bar chart visualizes hierarchical data using D3. Each blue bar represents a folder, whose length encodes the total size of all files in that folder (and all subfolders). Clicking on a bar dives into that folder, while clicking on the background bubbles back up to the parent folder. The effect is similar to a zoomable partition layout, though in a more conventional display.

forked from mbostock's block: Hierarchical Bar Chart

forked from willroj's block: EPI Data Visulization

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
  font: 10px sans-serif;
}

rect.background {
  fill: white;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
}
  
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 13px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

var margin = {top: 30, right: 120, bottom: 0, left: 245},
    width = 960 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;

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

var barHeight = 25;

var color = d3.scale.ordinal()
    .range(["steelblue", "#98AFC7"]);

var duration = 750,
    delay = 25;

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {return "<span style='color:Chartreuse;font-size: 10pt;font-family: arial'>" + d.value + "</span>";
  })
var partition = d3.layout.partition()
    .value(function(d) { return d.size; });

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

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", up);

  svg.call(tip);
  
svg.append("g")
    .attr("class", "x axis")
    .append("text")
    .attr("x", -50)
    .attr("dx", ".1em")
    .style("text-anchor", "end")
    .text("CLICK ON BAR FOR DETAILS");


svg.append("g")
    .attr("class", "y axis")
  .append("line")
    .attr("y1", "100%");

d3.json("readme.json", function(error, root) {
  if (error) throw error;

  partition.nodes(root);
  x.domain([0, root.value]).nice();
  down(root, 0);
});

function down(d, i) {
  if (!d.children || this.__transition__) return;
  var end = duration + d.children.length * delay;

  // Mark any currently-displayed bars as exiting.
  var exit = svg.selectAll(".enter")
      .attr("class", "exit");

  // Entering nodes immediately obscure the clicked-on bar, so hide it.
  exit.selectAll("rect").filter(function(p) { return p === d; })
      .style("fill-opacity", 1e-6);

  // Enter the new bars for the clicked-on data.
  // Per above, entering bars are immediately visible.
  var enter = bar(d)
      .attr("transform", stack(i))
      .style("opacity", 1);

  // Have the text fade-in, even though the bars are visible.
  // Color the bars as parents; they will fade to children if appropriate.
  enter.select("text").style("fill-opacity", 1e-6);
  enter.select("rect").style("fill", color(true));

  // Update the x-scale domain.
  x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();

  // Update the x-axis.
  svg.selectAll(".x.axis").transition()
      .duration(duration)
      .call(xAxis);

  // Transition entering bars to their new position.
  var enterTransition = enter.transition()
      .duration(duration)
      .delay(function(d, i) { return i * delay; })
      .attr("transform", function(d, i) { return "translate(0," + barHeight * i * 1.2 + ")"; });

  // Transition entering text.
  enterTransition.select("text")
      .style("fill-opacity", 1);

  // Transition entering rects to the new x-scale.
  enterTransition.select("rect")
      .attr("width", function(d) { return x(d.value); })
      .style("fill", function(d) { return color(!!d.children); });

  // Transition exiting bars to fade out.
  var exitTransition = exit.transition()
      .duration(duration)
      .style("opacity", 1e-6)
      .remove();

  // Transition exiting bars to the new x-scale.
  exitTransition.selectAll("rect")
      .attr("width", function(d) { return x(d.value); });

  // Rebind the current node to the background.
  svg.select(".background")
      .datum(d)
    .transition()
      .duration(end);

  d.index = i;
}

function up(d) {
  if (!d.parent || this.__transition__) return;
  var end = duration + d.children.length * delay;

  // Mark any currently-displayed bars as exiting.
  var exit = svg.selectAll(".enter")
      .attr("class", "exit");

  // Enter the new bars for the clicked-on data's parent.
  var enter = bar(d.parent)
      .attr("transform", function(d, i) { return "translate(0," + barHeight * i * 1.2 + ")"; })
      .style("opacity", 1e-6);

  // Color the bars as appropriate.
  // Exiting nodes will obscure the parent bar, so hide it.
  enter.select("rect")
      .style("fill", function(d) { return color(!!d.children); })
    .filter(function(p) { return p === d; })
      .style("fill-opacity", 1e-6);

  // Update the x-scale domain.
  x.domain([0, d3.max(d.parent.children, function(d) { return d.value; })]).nice();

  // Update the x-axis.
  svg.selectAll(".x.axis").transition()
      .duration(duration)
      .call(xAxis);

  // Transition entering bars to fade in over the full duration.
  var enterTransition = enter.transition()
      .duration(end)
      .style("opacity", 1);

  // Transition entering rects to the new x-scale.
  // When the entering parent rect is done, make it visible!
  enterTransition.select("rect")
      .attr("width", function(d) { return x(d.value); })
      .each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); });

  // Transition exiting bars to the parent's position.
  var exitTransition = exit.selectAll("g").transition()
      .duration(duration)
      .delay(function(d, i) { return i * delay; })
      .attr("transform", stack(d.index));

  // Transition exiting text to fade out.
  exitTransition.select("text")
      .style("fill-opacity", 1e-6);

  // Transition exiting rects to the new scale and fade to parent color.
  exitTransition.select("rect")
      .attr("width", function(d) { return x(d.value); })
      .style("fill", color(true));

  // Remove exiting nodes when the last child has finished transitioning.
  exit.transition()
      .duration(end)
      .remove();

  // Rebind the current parent to the background.
  svg.select(".background")
      .datum(d.parent)
    .transition()
      .duration(end);
}

// Creates a set of bars for the given data node, at the specified index.
function bar(d) {
  var bar = svg.insert("g", ".y.axis")
      .attr("class", "enter")
      .attr("transform", "translate(0,5)")
    .selectAll("g")
      .data(d.children)
    .enter().append("g")
      .style("cursor", function(d) { return !d.children ? null : "pointer"; })
      .on("click", down);

  bar.append("text")
      .attr("x", -6)
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d.name; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", barHeight)
        .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

  return bar;
}

// A stateful closure for stacking bars horizontally.
function stack(i) {
  var x0 = 0;
  return function(d) {
    var tx = "translate(" + x0 + "," + barHeight * i * 1.2 + ")";
    x0 += x(d.value);
    return tx;
  };
}

</script>

thumbnail.png