mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Made a 2 multiples chart of the double bar chart I did earlier but using dimple.js.  They both look nice but it might be fun to try and get it to work so when you get the event to open the tooltip and show the lines from one axis you also could make that event happen on the other graph so you could see each value for a given year nice and easily. That's a little beyond me though so if you have any suggestions as to how to do that let me know.
This was made for as part of a Udacity class I'm working on which is about data visualization and d3.
Check it out at to see other people's viz remakes: http://forums.udacity.com/questions/100228696/mini-project-2-take-two#ud507

  
## index.html
<!DOCTYPE html>

<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<link href='multi.css' rel='stylesheet' />


</head>
<body>


  <script src="multip.js"></script>


</body>


</html>

## multi.css
.mainhead{
  margin-right:auto;
  margin-left:auto;
  background:none;
  text-align:center;
}

## multip.js

var width = 450,
height = 300;

var charCount = 0;

d3.select('body')
  .append('h2')
  .text("Plane Crash Stats")
  .attr("class","mainhead");

function draw(data){

  makeCh(data, "Fatalities");

  makeCh(data, "Accidents");


}


function makeCh(data, field){

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("class", "chart"+charCount);


    var myChart = new dimple.chart(svg, data);

    var x = myChart.addTimeAxis("x", "Year");
    var y = myChart.addMeasureAxis("y", field);

    x.dateParseFormat ="%Y";
    x.tickFormat = "%Y";
    x.timeInterval = (5);

    myChart.setBounds("10%", "10%", "80%", "80%");


    myChart.addSeries(null, dimple.plot.line);

    myChart.draw();


  charCount++;
}


d3.csv("http://bl.ocks.org/mpmckenna8/raw/fbbd31c7da81af4c4176/Accidents.csv", draw)
	<!DOCTYPE html>

	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
	<link href='multi.css' rel='stylesheet' />



	</head>
	<body>




	<script src="multip.js"></script>



	</body>


	</html>
	.mainhead{
	margin-right:auto;
	margin-left:auto;
	background:none;
	text-align:center;
	}

	var width = 450,
	height = 300;

	var charCount = 0;

	d3.select('body')
	.append('h2')
	.text("Plane Crash Stats")
	.attr("class","mainhead");

	function draw(data){

	makeCh(data, "Fatalities");

	makeCh(data, "Accidents");



	}


	function makeCh(data, field){

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("class", "chart"+charCount);


	var myChart = new dimple.chart(svg, data);

	var x = myChart.addTimeAxis("x", "Year");
	var y = myChart.addMeasureAxis("y", field);

	x.dateParseFormat ="%Y";
	x.tickFormat = "%Y";
	x.timeInterval = (5);

	myChart.setBounds("10%", "10%", "80%", "80%");




	myChart.addSeries(null, dimple.plot.line);

	myChart.draw();


	charCount++;
	}



	d3.csv("http://bl.ocks.org/mpmckenna8/raw/fbbd31c7da81af4c4176/Accidents.csv", draw)