D3 Examples

VI4

#Juliette Pardue

Charts were based off of Scott Murray's examples. Legend was based off of this example and tooltip was based off of this example.

This chart shows the breakdown of the housing population for the three smallest minority groups: American Indian and Alaska Native, Asian, and Native Hawaiian and Other Pacific Islander.

Line marks were used

Magnitude Channel encoded using position on an aligned scale (or length)

Discriminability is maintained because the viewer can easily compared the rightmost point of bars

Identity Channel encoded using color hue

Discriminability is maintained because we have a small number of categories, so the viewer is not overwhelmed by a large number of colors.

This chart shows the number of men and women participating each year during the Summer Olympics. The number of participating countries is mapped to the area of the circle. You can hover over a data point to see the year and the number of participating countries.

Point marks were used

Magnitude Channel encoded using area

Discriminability is maintained by defining a scale of acceptable radii which can be mapped to. That way we are guaranteed that our circles do not become too large and obscure other data points.

Identity Channel encoded using spatial position, so years that there was a large number of men and women are at the top right, or years where there were few women are towards the bottom side.

Discriminability is maintained because the viewer can easily see groups of points since spatial region is the most effective categorical encoding.

##Tableau Figures

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
            .axis path, .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
            
            svg {
                overflow:hidden;
                border:1px solid black;
            }
    
    .circle:hover {
      fill:red;
    }
    
    .d3_tip {
      padding:5px;
      background:#888;
      color:white;
    }
        </style>
    </head>
    <body style="text-align:center;margin-top:5px;">
        <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <div id="chart_a" style="width:530px;display:inline-block;text-align:center;vertical-align:top;">
      <h4 style="margin-top:0px;">Housing Demographics for Non-White and Non-Black Persons 2014</h4>
    </div>
​
        <script type="text/javascript">
            var w = 430;
            var h = 250;
            var barPadding = 1;
            var padding = 30;
      var leftPadding = 100;
      var bottomPadding = 50;
            
            var dataset = [
        ["Cherokee tribal grouping",279728,"American Indian and Alaska Native"],
        ["Chippewa tribal grouping",113968,"American Indian and Alaska Native"],
        ["Navajo tribal grouping",308296,"American Indian and Alaska Native"],
        ["Sioux tribal grouping",125425,"American Indian and Alaska Native"],
        ["Asian Indian",3111333,"Asian"],
        ["Chinese",3710381,"Asian"],
        ["Filipino",2653959,"Asian"],
        ["Japanese",779141,"Asian"],
        ["Korean",1453807,"Asian"],
        ["Vietnamese",1681643,"Asian"],
        ["Other Asian",2320395,"Asian"],
        ["Native Hawaiian",170908,"Native Hawaiian and Other Pacific Islander"],
        ["Guamanian or Chamorro",73050,"Native Hawaiian and Other Pacific Islander"],
        ["Samoan",108505,"Native Hawaiian and Other Pacific Islander"],
        ["Other Pacific Islander",183298,"Native Hawaiian and Other Pacific Islander"]
      ];
       
      dataset.sort(function(a, b){return b[1]-a[1]});
      
      var xScale = d3.scale.linear()
                .domain([0, 4000000])
                .range([padding, w - padding * 2]);
                
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(10)
        .tickFormat(d3.format("s"));
                
            var svg_a = d3.select("#chart_a")
                .append("svg")
                .attr("width", w + leftPadding)
                .attr("height", h + bottomPadding);
                
            svg_a.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("y", function(d, i) {
                  return i * (h / dataset.length);
                })
                .attr("x", function(d) {
                  return leftPadding + padding;
                })
                .attr("height", h / dataset.length - barPadding)
                .attr("width", function(d) {
                  return xScale(d[1]);
                })
                .attr("fill", function(d) {
                  if(d[2] == "Asian") return "orange";
                  else if(d[2] == "American Indian and Alaska Native") return "blue";
                  else return "green"
                });
      
      svg_a.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .text(function(d) {
                return d[0];
                })
                .attr("text-anchor", "end")
                .attr("y", function(d, i) {
                return i * (h / dataset.length) + (h / dataset.length + 5) / 2;
                })
                .attr("x", function(d) {
                return leftPadding + padding - 5;
                })
                .attr("font-family", "sans-serif")
                .attr("font-size", "11px");
      
      svg_a.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + leftPadding + "," + (h + barPadding) + ")")
                .call(xAxis)
        .append("text")
            .attr("x", (w+padding)/2)
            .attr("y", 30)
            .style("text-anchor", "end")
            .text("Population");
      
      var legend = svg_a.append("g");
​
      var legend_data = [
        ["American Indian and Alaska Native", "blue"],
        ["Asian", "orange"],
        ["Native Hawaiian and Other Pacific Islander", "green"]
      ];
      
            legend.selectAll("g")
        .data(legend_data)
          .enter()
        .append("g")
          .each(function(d, i) {
          var g = d3.select(this);
            g.append("rect")
            .attr("x", 225)
            .attr("y", i*20 + 175)
            .attr("width", 10)
            .attr("height", 10)
            .style("fill", function(d) {
                return d[1];
                });
        
            g.append("text")
            .attr("x", 245)
            .attr("y", i*20 + 185)
            .attr("height",30)
            .attr("width",100)
            .style("fill", function(d) {
                return d[1];
                })
            .text(function(d) {
                return d[0];
                });
        });
        </script>
        
        <div id="chart_b" style="width:400px;display:inline-block;text-align:center;vertical-align:top;">
      <h4 style="margin-top:0px;margin-bottom:0px;">Men and Women Participants in Summer Olympics Each Year</h4>
      <span style="display:block;">Number of Participating Countries Represented By Area</span>
      <span style="display:block;font-size:11pt">(Hover over a data point for more info)</span>
    </div>
        </br>
        <script type="text/javascript">
            var w2 = 400;
            var h2 = 400;
            var padding2 = 50;
            
            var dataset2 = [
                [205,5864,4655,2012],
                [204,6290,4611,2008],
                [201,6257,4304,2004],
                [200,6579,4068,2000],
                [197,6819,3520,1996],
                [169,6659,2721,1992],
                [159,6249,2202,1988],
                [140,5224,1567,1984],
                [80,4135,1123,1980],
                [92,4812,1260,1976],
                [121,6052,1060,1972],
                [112,4775,783,1968],
                [93,4457,680,1964],
                [83,4738,613,1960],
                [67,2818,371,1956],
                [69,4411,521,1952],
                [59,3951,445,1948],
                [49,4124,360,1936],
                [47,1719,202,1932],
                [46,2936,312,1928],
                [45,3100,156,1924],
                [29,2599,78,1920],
                [29,2356,53,1912],
                [22,1980,44,1908],
                [21,835,6,1906],
                [15,644,6,1904],
                [31,1201,23,1900],
                [12,176,0,1896]
            ];
            
            var xScale2 = d3.scale.linear()
                .domain([0, d3.max(dataset2, function(d) { return d[1]; })])
                .range([padding2, w2 - padding2]);
​
            var yScale2 = d3.scale.linear()
                .domain([0, d3.max(dataset2, function(d) { return d[2]; })])
                .range([h2 - padding2, padding2]);
​
            var rScale2 = d3.scale.linear()
                .domain([0, d3.max(dataset2, function(d) { return d[0]; })])
                .range([2, 8]);
​
            var xAxis2 = d3.svg.axis()
                .scale(xScale2)
                .orient("bottom")
                .ticks(15)
          .tickFormat(d3.format("s"));
​
            var yAxis2 = d3.svg.axis()
                .scale(yScale2)
                .orient("left")
                .ticks(15)
                .tickFormat(d3.format("s"));
      
      var tip = d3.tip()
        .attr('class', 'd3_tip')
            .offset([-10, 0])
            .html(function(d) {
                return "Year: " + d[3] + "<br/>Countries: " + d[0];
            });
      
            var svg2 = d3.select("#chart_b")
                .append("svg")
                .attr("width", w2)
                .attr("height", h2)
                .call(tip);
      
            svg2.selectAll("circle")
                .data(dataset2)
                .enter()
                .append("circle")
        .attr("class", "circle")
                .attr("cx", function(d) {
                    return xScale2(d[1]);
                })
                .attr("cy", function(d) {
                    return yScale2(d[2]);
                })
                .attr("r", function(d) {
                    return rScale2(d[0]);
                })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);
      
            svg2.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + (h2 - padding2) + ")")
                .call(xAxis2)
        .append("text")
            .attr("x", (w2+padding2)/2)
            .attr("y", 30)
            .style("text-anchor", "end")
            .text("Men");
            
            svg2.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding2 + ",0)")
                .call(yAxis2)
        .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -35)
            .attr("x", (-h2+padding2)/2)
            .style("text-anchor", "end")
            .text("Women");
        </script>
    </body>
</html> 
    