meli-lewis/.block

## .block
license: gpl-3.0
height: 240
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Demonstration of DOM manipulation using D3
For NICAR Beginning D3, 2017
forked from darlacameron's block: 1. DOM Manipulation

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<title>DOM Manipulation</title>
</head>

<style>
	body {
		font-family: "Helvetica Neue", Helvetica, sans-serif;
		font-size: 14px;
	}

  circle {
    fill: blue;
    stroke: black;
    stroke-width: 2;
  }
</style>

<body>

	<svg width="500" height="300">
    <circle cx="50" cy="50" r="20" id="first-circle" />
	</svg>

	<script src="http://d3js.org/d3.v4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<script>
		ADD A CIRCLE WITH D3
		d3.select("svg").append("circle")
      .attr("id", "second-circle")
      .attr("cx", 150)
      .attr("cy", 50)
      .attr("r", 20);

    // AND ANOTHER!
//     d3.select("svg").append("circle")
//       .attr("id", "third-circle")
//       .attr("cx", 250)
//       .attr("cy", 50)
//       .attr("r", 30);

    // DEMO OF HOW D3 COMPARES TO JAVASCRIPT AND JQUERY
//     console.debug('javascript ', document.getElementById("first-circle"))
//     console.debug('jquery ', $("#first-circle")[0])

	</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>DOM Manipulation</title>
	</head>

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	}

	circle {
	fill: blue;
	stroke: black;
	stroke-width: 2;
	}
	</style>

	<body>

	<svg width="500" height="300">
	<circle cx="50" cy="50" r="20" id="first-circle" />
	</svg>

	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<script>
	ADD A CIRCLE WITH D3
	d3.select("svg").append("circle")
	.attr("id", "second-circle")
	.attr("cx", 150)
	.attr("cy", 50)
	.attr("r", 20);

	// AND ANOTHER!
	// d3.select("svg").append("circle")
	// .attr("id", "third-circle")
	// .attr("cx", 250)
	// .attr("cy", 50)
	// .attr("r", 30);

	// DEMO OF HOW D3 COMPARES TO JAVASCRIPT AND JQUERY
	// console.debug('javascript ', document.getElementById("first-circle"))
	// console.debug('jquery ', $("#first-circle")[0])

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