[unlisted] Using Literal Data

This example shows how one can use an array literal as the data input to a visualization. Answers a question in the YouTube comments for the video Splitting Charts (Part 1): Stacked & Grouped Bar Charts by Maria Terekhina.

forked from curran's block: Stacked Bars

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
    
      .axis text {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
      }
      .axis .label {
        font-size: 20pt;
      }

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

.color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
      }
      
      .d3-tip {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
        line-height: 1;
        padding: 7px;
        background: black;
        color: lightgray;
        border-radius: 20px;
      }
      
    </style>
  </head>
  <body>
    <script>
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 130, top: 44, right: 30, bottom: 47 };
      var barPadding = 0.2;

var xColumn = "country";
      var yColumn = "population";
      var colorColumn = "religion";
      var layerColumn = colorColumn;
      
      var hoveredColorValue;
      var hoveredStrokeColor = "black";

var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
      // This is the layer where the bars are drawn.
      var baseBarLayer = g.append("g");
      
      // This layer contains a semi-transparent overlay
      // that fades out the base bars.
      var overlayRect = g.append("g")
        .append("rect")
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .style("pointer-events", "none");
      
      // This contains the subset of bars rendered on top
      // when you hover over the entries in the color legend.
      var foregroundBarLayer = g.append("g");
      
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(596, 0)");

var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
      var yScale = d3.scale.linear().range([innerHeight, 0]);
      var colorScale = d3.scale.category10();
      
      var tipNumberFormat = d3.format(",");
      var tip = d3.tip()
        .attr("class", "d3-tip")
        .offset([-10, 0])
        .html(function(d) {
          return [
            d[colorColumn],
            " in ",
            d[xColumn],
            ": ",
            tipNumberFormat(d[yColumn])
          ].join("");
        });
      g.call(tip);
      
      // Use a modified SI formatter that uses "B" for Billion.
      var siFormat = d3.format("s");
      var customTickFormat = function (d){
        return siFormat(d).replace("G", "B");
      };

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(5)
        .tickFormat(customTickFormat)
        .outerTickSize(0);

var colorLegend = d3.legend.color()
        .scale(colorScale)
        .shapePadding(6.24)
        .shapeWidth(25)
        .shapeHeight(25)
        .labelOffset(5);

function render(data){

var nested = d3.nest()
          .key(function (d){ return d[layerColumn]; })
          .entries(data);

var stack = d3.layout.stack()
          .y(function (d){ return d[yColumn]; })
          .values(function (d){ return d.values; });

var layers = stack(nested.reverse()).reverse();

xScale.domain(layers[0].values.map(function (d){
          return d[xColumn];
        }));

yScale.domain([
          0,
          d3.max(layers, function (layer){
            return d3.max(layer.values, function (d){
              return d.y0 + d.y;
            });
          })
        ]);

colorScale.domain(layers.map(function (layer){
          return layer.key;
        }));

xAxisG.call(xAxis); 
        yAxisG.call(yAxis);

renderBars(baseBarLayer, layers);
        
        if(hoveredColorValue){
          setOverlayTransparency(0.7);
          renderBars(foregroundBarLayer, layers.filter(function (layer){
            return layer.key === hoveredColorValue;
          }));
        } else {
          setOverlayTransparency(0.0);
          renderBars(foregroundBarLayer, []);
        }
        
        colorLegendG.call(colorLegend);
        
        // Move the text down a bit.
        colorLegendG.selectAll("text").attr("y", 4);
        
        listenForHover(colorLegendG.selectAll("rect"), data);
        listenForHover(colorLegendG.selectAll("text"), data);
      }
      
      function setOverlayTransparency(alpha){
        overlayRect
          .transition().duration(400)
          .attr("fill", "rgba(255, 255, 255, " + alpha + ")");
      }
      
      function renderBars(g, layers){
        var layerGs = g.selectAll(".layer").data(layers);
        layerGs.enter().append("g").attr("class", "layer");
        layerGs.exit().remove();
        layerGs.style("fill", function (d){
          return colorScale(d.key);
        });

function type(d){
        d.population = +d.population;
        return d;
      }

var data = [
        {
          "country": "China",
          "religion": "Christian",
          "population": 68410000
        },
        {
          "country": "China",
          "religion": "Muslim",
          "population": 24690000
        },
        {
          "country": "China",
          "religion": "Unaffiliated",
          "population": 700680000
        },
        {
          "country": "China",
          "religion": "Hindu",
          "population": 20000
        },
        {
          "country": "China",
          "religion": "Buddhist",
          "population": 244130000
        },
        {
          "country": "China",
          "religion": "Folk Religions",
          "population": 294320000
        },
        {
          "country": "China",
          "religion": "Other Religions",
          "population": 9080000
        },
        {
          "country": "China",
          "religion": "Jewish",
          "population": 0
        },
        {
          "country": "India",
          "religion": "Christian",
          "population": 31130000
        },
        {
          "country": "India",
          "religion": "Muslim",
          "population": 176190000
        },
        {
          "country": "India",
          "religion": "Unaffiliated",
          "population": 870000
        },
        {
          "country": "India",
          "religion": "Hindu",
          "population": 973750000
        },
        {
          "country": "India",
          "religion": "Buddhist",
          "population": 9250000
        },
        {
          "country": "India",
          "religion": "Folk Religions",
          "population": 5840000
        },
        {
          "country": "India",
          "religion": "Other Religions",
          "population": 27560000
        },
        {
          "country": "India",
          "religion": "Jewish",
          "population": 10000
        },
        {
          "country": "USA",
          "religion": "Christian",
          "population": 243060000
        },
        {
          "country": "USA",
          "religion": "Muslim",
          "population": 2770000
        },
        {
          "country": "USA",
          "religion": "Unaffiliated",
          "population": 50980000
        },
        {
          "country": "USA",
          "religion": "Hindu",
          "population": 1790000
        },
        {
          "country": "USA",
          "religion": "Buddhist",
          "population": 3570000
        },
        {
          "country": "USA",
          "religion": "Folk Religions",
          "population": 630000
        },
        {
          "country": "USA",
          "religion": "Other Religions",
          "population": 1900000
        },
        {
          "country": "USA",
          "religion": "Jewish",
          "population": 5690000
        },
        {
          "country": "Indonesia",
          "religion": "Christian",
          "population": 23660000
        },
        {
          "country": "Indonesia",
          "religion": "Muslim",
          "population": 209120000
        },
        {
          "country": "Indonesia",
          "religion": "Unaffiliated",
          "population": 240000
        },
        {
          "country": "Indonesia",
          "religion": "Hindu",
          "population": 4050000
        },
        {
          "country": "Indonesia",
          "religion": "Buddhist",
          "population": 1720000
        },
        {
          "country": "Indonesia",
          "religion": "Folk Religions",
          "population": 750000
        },
        {
          "country": "Indonesia",
          "religion": "Other Religions",
          "population": 340000
        },
        {
          "country": "Indonesia",
          "religion": "Jewish",
          "population": 0
        },
        {
          "country": "Brazil",
          "religion": "Christian",
          "population": 173300000
        },
        {
          "country": "Brazil",
          "religion": "Muslim",
          "population": 40000
        },
        {
          "country": "Brazil",
          "religion": "Unaffiliated",
          "population": 15410000
        },
        {
          "country": "Brazil",
          "religion": "Hindu",
          "population": 0
        },
        {
          "country": "Brazil",
          "religion": "Buddhist",
          "population": 250000
        },
        {
          "country": "Brazil",
          "religion": "Folk Religions",
          "population": 5540000
        },
        {
          "country": "Brazil",
          "religion": "Other Religions",
          "population": 300000
        },
        {
          "country": "Brazil",
          "religion": "Jewish",
          "population": 110000
        }
      ];

render(data);
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js