dardecena · February 18, 2018 05:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  <link rel='stylesheet' href=
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
    integrity=
    'sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=='
    crossorigin='anonymous'>
  <script type="text/javascript">
    function draw(data) {


    // Get selected baseball performance metric from radio button
    var categoryValue, categoryName;
    radios = document.getElementsByName('performanceVariable');
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) {
        categoryValue = radios[i].value;
        categoryName = categories[i];
      }
    };

    /*
      Dimple.js Chart construction code
    */
    svg.selectAll('g').remove();
    var myChart = new dimple.chart(svg, baseballData);
      myChart.setMargins(140, 10, 50, 50);
      myChart.defaultColors = [
        new dimple.color("#253494"), 
        new dimple.color("#41b6c4"), 
        new dimple.color("#a1dab4") 
        ]; 

    var x = myChart.addCategoryAxis("x", "Body Mass Index");
        x.addOrderRule(["<= 20", "21 - 25", ">= 26"])
        x.title = "Body Mass Index (kg/m^2)"
        x.fontSize = 12;

    var y = myChart.addMeasureAxis('y', categoryName);
        y.fontSize = 12;
        y.showGridlines = false;
        if (categoryName === "Home Runs") {
          y.title = "Average Home Runs";
          y.overrideMax = 170;
        } else if (categoryName === "Batting Average") {
          y.title = "Average Batting Average Score (hits/at bats)";
          y.tickFormat = '.3f';
          y.overrideMax = 0.700;
        }

    // Takes average of the x-axis metric, overrides default summation
    var series = myChart.addSeries(["Handedness"], dimple.plot.bar);
    series.aggregate = dimple.aggregateMethod.avg= function (lhs, rhs) {
      lhs.value = (lhs.value === null || lhs.value === undefined ? 0 : parseFloat(lhs.value));
      lhs.count = (lhs.count === null || lhs.count === undefined ? 1 : parseFloat(lhs.count));
      rhs.value = (rhs.value === null || rhs.value === undefined ? 0 : parseFloat(rhs.value));
      rhs.count = (rhs.count === null || rhs.count === undefined ? 1 : parseFloat(rhs.count));
      return ((lhs.value * lhs.count) + (rhs.value * rhs.count)) / (lhs.count + rhs.count);
      };

    var myLegend = myChart.addLegend(250, 0.4, 380, 20, "Right");
    // Pass duration parameter to animate chart. 
    myChart.draw(2000);

  
    // Orphan the legend to prevent it from updating
    myChart.legends = [];

    // Add the legend title. 
    svg.selectAll("title_text")
      .data(["Click legend to show/hide handedness:"])
      .enter()
      .append("text")
        .attr("x", 150)
        .attr("y", 10)
        .style("font-family", "sans-serif")
        .style("font-size", "10px")
        .style("color", "Black")
        .text(function (d) { return d; });

    // Get a unique list of values to use when filtering
    var filterValues = dimple.getUniqueValues(baseballData, "Handedness");
    // Get all the rectangles from orphaned legend
    myLegend.shapes.selectAll("rect")
      // Add a click event to each rectangle
      .on("click", function (e) {
        // Indicates whether the item is already visible or not
        var hide = false;
        var newFilters = [];
        // If the filters contain the clicked shape hide it
        filterValues.forEach(function (f) {
          if (f === e.aggField.slice(-1)[0]) {
            hide = true;
          } else {
            newFilters.push(f);
          }
        });
        // Hide the shape or show it
        if (hide) {
          d3.select(this).style("opacity", 0.2);
        } else {
          newFilters.push(e.aggField.slice(-1)[0]);
          d3.select(this).style("opacity", 0.8);
        }
        // Update filters
        filterValues = newFilters;
        // Filter the data
        myChart.data = dimple.filterData(baseballData, "Handedness", filterValues);
        // Pass duration parameter to animate chart. 
        myChart.draw(800);
      });
    };

  </script>
 </head>
 <body>
  <div class='container'>
    <div class='row'>
      <div class='col-md-10'>
        <h3 class='text-left'>
          Does body mass index (BMI) and handedness affect baseball player performance?
        </h3>
        <p>
          Major league baseball players are getting <a href="http://www.obesityresearchclinicalpractice.com/article/S1871-403X(16)30084-9/abstract"> heftier</a>, and while 1 in 10 people are left-handed, 1 in 4 MLB players are <a href="http://www.newsweek.com/science-why-lefties-make-better-baseball-players-92783">southpaws</a>. The body mass index (BMI) is an attempt to assess a person’s body fat based on their height and weight, however muscularity can influence BMI significantly. This graphic shows how BMI and handedness may affect a baseball player's performance statistics. General categories for BMI are: BMI <= 20 = underweight, 21 - 25 = normal, >= 26 = overweight, obese. The metrics used are the averages of both the number of home runs and the batting average. 
          <br style="margin-bottom:240px;">
          <br>
        </p>
        <h5 class='text-left'>
        Select baseball performance metrics:
        </h5>
        <!-- Standard button -->
        <div class="radio">
          <label><input onchange="draw()" type="radio" name=
          "performanceVariable" id="Home Runs" value="Home Runs" checked> Average Home Runs </label>
        </div>
        <div class="radio">
          <label><input onchange="draw()" type="radio" name=
          "performanceVariable" id="Batting Average" value="Batting Average">
          Average Batting Average Score</label>
        </div>
      </div>
      <div class='chart' id='chartContainer'></div>
    </div>
    <script type='text/javascript'>
      /*
      Use D3 (not dimple.js) to load the CSV file
      and pass the contents of it to the draw function
      */
      var categories = [
              "Home Runs",
              "Batting Average"
          ];
      var myChart;
      var svg = dimple.newSvg("#chartContainer", 900, 550);
      d3.csv("new_baseball_data.csv", function (data) {
        baseballData = data;
        draw();
      });
    
    </script>
  </div>

 </body>

 </html>

diff --git a/new_baseball_data.csv b/new_baseball_data.csv
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
	<link rel='stylesheet' href=
	'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
	integrity=
	'sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=='
	crossorigin='anonymous'>
	<script type="text/javascript">
	function draw(data) {


	// Get selected baseball performance metric from radio button
	var categoryValue, categoryName;
	radios = document.getElementsByName('performanceVariable');
	for (var i = 0; i < radios.length; i++) {
	if (radios[i].checked) {
	categoryValue = radios[i].value;
	categoryName = categories[i];
	}
	};

	/*
	Dimple.js Chart construction code
	*/
	svg.selectAll('g').remove();
	var myChart = new dimple.chart(svg, baseballData);
	myChart.setMargins(140, 10, 50, 50);
	myChart.defaultColors = [
	new dimple.color("#253494"),
	new dimple.color("#41b6c4"),
	new dimple.color("#a1dab4")
	];

	var x = myChart.addCategoryAxis("x", "Body Mass Index");
	x.addOrderRule(["<= 20", "21 - 25", ">= 26"])
	x.title = "Body Mass Index (kg/m^2)"
	x.fontSize = 12;

	var y = myChart.addMeasureAxis('y', categoryName);
	y.fontSize = 12;
	y.showGridlines = false;
	if (categoryName === "Home Runs") {
	y.title = "Average Home Runs";
	y.overrideMax = 170;
	} else if (categoryName === "Batting Average") {
	y.title = "Average Batting Average Score (hits/at bats)";
	y.tickFormat = '.3f';
	y.overrideMax = 0.700;
	}

	// Takes average of the x-axis metric, overrides default summation
	var series = myChart.addSeries(["Handedness"], dimple.plot.bar);
	series.aggregate = dimple.aggregateMethod.avg= function (lhs, rhs) {
	lhs.value = (lhs.value === null \|\| lhs.value === undefined ? 0 : parseFloat(lhs.value));
	lhs.count = (lhs.count === null \|\| lhs.count === undefined ? 1 : parseFloat(lhs.count));
	rhs.value = (rhs.value === null \|\| rhs.value === undefined ? 0 : parseFloat(rhs.value));
	rhs.count = (rhs.count === null \|\| rhs.count === undefined ? 1 : parseFloat(rhs.count));
	return ((lhs.value * lhs.count) + (rhs.value * rhs.count)) / (lhs.count + rhs.count);
	};

	var myLegend = myChart.addLegend(250, 0.4, 380, 20, "Right");
	// Pass duration parameter to animate chart.
	myChart.draw(2000);


	// Orphan the legend to prevent it from updating
	myChart.legends = [];

	// Add the legend title.
	svg.selectAll("title_text")
	.data(["Click legend to show/hide handedness:"])
	.enter()
	.append("text")
	.attr("x", 150)
	.attr("y", 10)
	.style("font-family", "sans-serif")
	.style("font-size", "10px")
	.style("color", "Black")
	.text(function (d) { return d; });

	// Get a unique list of values to use when filtering
	var filterValues = dimple.getUniqueValues(baseballData, "Handedness");
	// Get all the rectangles from orphaned legend
	myLegend.shapes.selectAll("rect")
	// Add a click event to each rectangle
	.on("click", function (e) {
	// Indicates whether the item is already visible or not
	var hide = false;
	var newFilters = [];
	// If the filters contain the clicked shape hide it
	filterValues.forEach(function (f) {
	if (f === e.aggField.slice(-1)[0]) {
	hide = true;
	} else {
	newFilters.push(f);
	}
	});
	// Hide the shape or show it
	if (hide) {
	d3.select(this).style("opacity", 0.2);
	} else {
	newFilters.push(e.aggField.slice(-1)[0]);
	d3.select(this).style("opacity", 0.8);
	}
	// Update filters
	filterValues = newFilters;
	// Filter the data
	myChart.data = dimple.filterData(baseballData, "Handedness", filterValues);
	// Pass duration parameter to animate chart.
	myChart.draw(800);
	});
	};

	</script>
	</head>
	<body>
	<div class='container'>
	<div class='row'>
	<div class='col-md-10'>
	<h3 class='text-left'>
	Does body mass index (BMI) and handedness affect baseball player performance?
	</h3>
	<p>
	Major league baseball players are getting <a href="http://www.obesityresearchclinicalpractice.com/article/S1871-403X(16)30084-9/abstract"> heftier</a>, and while 1 in 10 people are left-handed, 1 in 4 MLB players are <a href="http://www.newsweek.com/science-why-lefties-make-better-baseball-players-92783">southpaws</a>. The body mass index (BMI) is an attempt to assess a person’s body fat based on their height and weight, however muscularity can influence BMI significantly. This graphic shows how BMI and handedness may affect a baseball player's performance statistics. General categories for BMI are: BMI <= 20 = underweight, 21 - 25 = normal, >= 26 = overweight, obese. The metrics used are the averages of both the number of home runs and the batting average.
	<br style="margin-bottom:240px;">
	<br>
	</p>
	<h5 class='text-left'>
	Select baseball performance metrics:
	</h5>
	<!-- Standard button -->
	<div class="radio">
	<label><input onchange="draw()" type="radio" name=
	"performanceVariable" id="Home Runs" value="Home Runs" checked> Average Home Runs </label>
	</div>
	<div class="radio">
	<label><input onchange="draw()" type="radio" name=
	"performanceVariable" id="Batting Average" value="Batting Average">
	Average Batting Average Score</label>
	</div>
	</div>
	<div class='chart' id='chartContainer'></div>
	</div>
	<script type='text/javascript'>
	/*
	Use D3 (not dimple.js) to load the CSV file
	and pass the contents of it to the draw function
	*/
	var categories = [
	"Home Runs",
	"Batting Average"
	];
	var myChart;
	var svg = dimple.newSvg("#chartContainer", 900, 550);
	d3.csv("new_baseball_data.csv", function (data) {
	baseballData = data;
	draw();
	});

	</script>
	</div>

	</body>

	</html>
No results found