Treblesteph/README.md

## README.md

      
    Raw
  

              README.md
            
          
    2015 Mozfest workshop - Intro to d3js

### Example00
Built with blockbuilder.org
forked from jjelosua's block: d3intro_ex00

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mozfest example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      .existing {color: blue;}
      .new {color: green;}
    </style>
  </head>
  <body>
    <h1>Mozfest: D3 intro</h1>
    <!--<p> previous paragraph</p>-->
    <script type="text/javascript">
      test = [1,2,3];

      // We make a DOM selection using D3 and link data to it
      var p = d3.select("body").selectAll("p").data(test);

      // Update subselection
      p.attr("class",function(d,i) {return "existing";});

			// Enter subselection
      p.enter()
        .append("p")
        .text(function(d,i) {return "The value is "+d;})
        .attr("class","new");

      // Exit subselection
      p.exit().remove();

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Mozfest example</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.existing {color: blue;}
	.new {color: green;}
	</style>
	</head>
	<body>
	<h1>Mozfest: D3 intro</h1>
	<!--<p> previous paragraph</p>-->
	<script type="text/javascript">
	test = [1,2,3];

	// We make a DOM selection using D3 and link data to it
	var p = d3.select("body").selectAll("p").data(test);

	// Update subselection
	p.attr("class",function(d,i) {return "existing";});

	// Enter subselection
	p.enter()
	.append("p")
	.text(function(d,i) {return "The value is "+d;})
	.attr("class","new");

	// Exit subselection
	p.exit().remove();

	</script>
	</body>
	</html>