D3 Examples - TestBlock1

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
​
    <title>Frederick Kauber - fdk9 - HW5</title>
​
  </head>
  <body>
​
    <p id="problem1">
      <script>
        //Part 1
​
        var plotHistogram = function(id, data) {
          var height = 400;
          var width = 800;
​
          var svg = d3.select("#" + id)
          .append("svg")
          .attr("height", height)
          .attr("width", width)
          .attr("id", "svg_" + id);
​
          var max = d3.max(data);
          var min = d3.min(data);
          var xPadding = 50;
          var xBinScale = d3.scaleLinear().domain([min, max + 1]).range([xPadding, width - xPadding]);
​
          //var xScale = d3.scaleLinear().rangeRound([xPadding, width - xPadding])
​
​
          var histogram = d3.histogram()
          .domain(xBinScale.domain())
          .thresholds(xBinScale.ticks(20));
​
          var bins = histogram(data);
​
          var maxY = d3.max(bins, function(d) { return d.length;});
          var yPadding = 100;
          var yScale = d3.scaleLinear()
          .domain([0, maxY + maxY/10])
          .range([height - yPadding, 0 + yPadding]);
          svg.append("g").call(yScale);
​
​
          var barWidth = bins[1].x1 - bins[1].x0;
​
          var xScale = d3.scaleLinear().domain([bins[1].x0 - (barWidth), bins[bins.length - 1].x1 + barWidth]).range([xPadding, width - xPadding])
          //I had some trouble figuring out the bars, so I consulted this example: https://bl.ocks.org/mbostock/3048450
          var bars = svg.selectAll(".bar")
          .data(bins)
          .enter()
          .append("g")
          .attr("class", "bar")
          .attr("transform", function(bin, index) {
            if(index==0) {
              return "translate(" + xPadding + "," + yScale(bin.length) + ")"; 
            } else {
              return "translate(" + xScale(bin.x0) + "," + yScale(bin.length) + ")"; 
            }
          });
​
​
​
          bars.append("rect")
          .attr("x",1)
          .attr("width", xScale(bins[1].x1) - xScale(bins[1].x0) - 1)
          .attr("height", function(bin) {return (height - yPadding) - yScale(bin.length)})
          .attr("style", "fill: blue");
​
​
          svg.append("g").call(xAxis).attr("transform", "translate(0," + (height - yPadding) + ")");
​
          var yAxis = d3.axisLeft(yScale).tickSizeOuter(0);
          svg.append("g").call(yAxis).attr("transform", "translate("
            + (xPadding) + ","
             + "0)");
​
        }
​
​
      </script>
    </p>
​
    <p id="problem2"><strong>Problem 2</strong>
      <br/>
      <script>
​
        //Part 2
​
        var gaussian = d3.randomNormal(0.0, 1.0);
​
        var gaussian1000 = function() {
          var gaussianResults = [];
​
          for(var i = 0; i < 1000; i++) {
            var gaussianResult = gaussian();
            gaussianResults.push(1 + gaussianResult);
          }
          return gaussianResults;
        }
​
        plotHistogram("problem2", gaussian1000());
​
      </script>
    </p>
​
    <p id="problem3"><strong>Problem 3</strong>: This graph does have roughly the same shape in that it is normally distributed, but it is much more concentrated (i.e. not as wide). It does not have the same x-scale. The x-scale values here seem mostly positive and cover a smaller range, as the mean of each result would be closer to 1 - this is why there are so many points around 1 on problem 3's graph.
      <br/>
      <script>  
        var part3Array = [];
​
        for(var i = 0; i < 1000; i++) {
          part3Array.push(d3.mean(gaussian1000()));
        }
​
        plotHistogram("problem3", part3Array);
​
      </script>
​
​
    </p>
​
    <p id="problem4"><strong>Problem 4</strong>
      <br/>
      <script>
        var lognormal1000 = function() {
          logNormalResults = [];
​
          for(var i = 0; i < 1000; i++) {
            var gaussianResult = gaussian();
            logNormalResults.push(Math.exp(gaussianResult));
          }
​
          return logNormalResults;
​
        }
​
        plotHistogram("problem4", lognormal1000());
​
      </script>
​
    </p>
​
    <p id="problem5"><strong>Problem 5</strong>: This graph looks a lot more normally distributed relative to problem 4, which is more skewed to the right. Similarly, the axis values are not the same. In problem 5, they cover a far smaller range than they do in problem 4.
      <br/>
      <script>
        var part5Array = [];
​
        for(var i = 0; i< 1000; i++) {
          part5Array.push(d3.mean(lognormal1000()));
        }
​
        plotHistogram("problem5", part5Array);
​
      </script>
​
    </p>
​
    <p id="problem6"><strong>Problem 6</strong>
      <br/>
      <script>
        var exponential1000 = function() {
          var exponentialResults = [];
          for(var i=0; i<1000; i++) {
            exponentialResults.push(-Math.log(Math.random()));
          }
​
          return exponentialResults
        }
​
        plotHistogram("problem6", exponential1000());
​
      </script>
​
    </p>
​
    <p id="problem7"><strong>Problem 7:</strong> This graph is shaped differently. It is much more concentrated and looks more symmetrical/normally distributed. The graph in problem 6 looks more skewed to the right. Similarly, the axes are not the same. The axes in problem 7 cover a much smaller range of values than the axes in problem 6 do. These values for problem 7 are, on average, smaller than the values in problem 6.
      <br/>
      <script>
        var part7Array = [];
​
        for(var i = 0; i < 1000; i++) {
          part7Array.push(d3.mean(exponential1000()));
        }
​
        plotHistogram("problem7", part7Array);
​
      </script>
​
    </p>
​
    <p id="problem8"><strong>Problem 8:</strong>
      <br/>
      <script>
        var gumbel1000 = function() {
          var gumbelResults = [];
​
          for(var i=0; i<1000; i++) {
            var exponentialRandomVariable = -Math.log(Math.random());
            var value = -Math.log(exponentialRandomVariable) * 1.732455;
            gumbelResults.push(value);
          }
​
          return gumbelResults;
        }
​
        plotHistogram("problem8", gumbel1000());
​
      </script>
​
    </p>
​
    <p id="problem9"><strong>Problem 9:</strong> This graph is shaped differently. It is much more concentrated and looks more symmetrical/normally distributed than the graph in problem 8. The graph in problem 9 has an axis with smaller values that cover a smaller range than the graph in problem 9. 
      <br/>
      <script>
​
        var part9Array = [];
​
        for(var i=0; i<1000; i++) {
          part9Array.push(d3.mean(gumbel1000()));
        }
​
        plotHistogram("problem9", part9Array);
​
      </script>
    </p>
​
    <p id="problem10"><strong>Problem 10</strong>
      <br/>
      <script>
​
        var cauchy1000 = function() {
​
          var cauchyResults = [];
​
          for(var i=0; i<1000; i++) {
            var ratio = gaussian() / gaussian();
            cauchyResults.push(ratio);
          }
    
          return cauchyResults;
        }
​
        plotHistogram("problem10", cauchy1000());
      </script>
​
    </p>
​
    <p id="problem11"><strong>Problem 11:</strong>Generally, this distribution does look like the distributions shown in parts 3, 5, 7, and 9. It generally appears fairly symmetrical (in this case, around 0). The core difference with problem 11 is that the axis values are far larger, and the values on the axis cover a much broader range of values, in problem 11 than in problems 3, 5, 7 or 9. 
      <br/>
​
      <script>
​
        var pary11Array = [];
​
        for(var i = 0; i < 1000; i++) {
          pary11Array.push(d3.mean(cauchy1000()));
        }
​
        plotHistogram("problem11", pary11Array);
​
      </script>
​
    </p>
​
    <p id="problem12"><strong>Problem 12</strong>
      <br/>
      <script>
​
        var counter = 0; 
        var problem12Height = 500;
        var problem12Width = 500;
​
        var svg12 = d3.select("#problem12").append("svg")
        .attr("height", problem12Height)
        .attr("width", problem12Width);
​
        var showCircles = function(hue, opacity) {
          var through100 = [];
          for(var i=0; i<11; i++) {
            through100.push(i * 10);
          }
        
​
          circleData = [];
​
          through100.forEach(function(saturation) {
            through100.forEach(function(lightness) {
              circleData.push({hue: hue, saturation: saturation, lightness: lightness, opacity: opacity});
            });
          });
​
          var padding = 30;
          var lightnessScale = d3.scaleLinear()
          .domain([0, 100])
          .range([padding, problem12Width - padding]);
​
          var saturationScale = d3.scaleLinear()
          .domain([0, 100])
          .range([problem12Height - padding, padding]);
​
​
          circleRadius = 20; 
​
          var circles = svg12.selectAll(".circle");
      
          circles.data(circleData)
            .enter()
            .append("circle")
            .attr("class", "circle")
            .attr("cx", function(value) { return lightnessScale(value.lightness); })
            .attr("cy", function(value) { return saturationScale(value.saturation); })
            .attr("r", circleRadius)
            .style("stroke", "#eee")
            .style("stroke-width", "1")
            .style("fill", function(value, index) {
              var hsla = d3.hsl(value.hue, value.saturation/100, value.lightness/100, value.opacity);
              return d3.rgb(hsla);
            });
​
​
​
            counter++;
        }; 
      </script>
​
      <br/>
      <p>Opacity</p>
      <input id="opacitySlider" type="range"/>
      <p>Hue</p>
      <input id="hueSlider" type="range"/>
​
      <script>
​
​
​
        showCircles(180, 0.5);
​
        var hue = 0;
        var opacity = 0.0;
​
        var opacitySlider = d3.select("#opacitySlider")
        .attr("max", 1.0)
        .attr("min", 0.0)
        .attr("step", 0.01)
        .attr("value", 0.50)
        .on("input", function() {
          var circles = svg12.selectAll(".circle");
          circles.remove();
          opacity = this.value;
          showCircles(hue, opacity);
        });
​
        var hueSlider = d3.select("#hueSlider")
        .attr("max", 360.0)
        .attr("min", 0.0)
        .attr("value", 180)
        .on("input", function() {
          var circles = svg12.selectAll(".circle");
          circles.remove();
          hue = parseInt(this.value);
          showCircles(hue, opacity);
        });
​
      </script>
    </p>
 
  </body>
</html>
​
​
    