Old school D3 from simpler times

All examples By author By category About

darlacameron

Full window Github gist

1. DOM Manipulation

Demonstration of DOM manipulation using D3

For NICAR Beginning D3, 2017

<!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: red;
    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="https://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>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js