AlbertFranco/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from mostaphaRoudsari's block: 01_workshop_select and append

  
## index.html
<!DOCTYPE html>

<head>
	<title>d3js workshop - data binding</title>
	<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
</head>

<body>

	<div id="selectMe" class="selectMe">
		Select me if you can!
	</div>
  <br>
	<div id="doNotSelectMe" class="doNotSelectMe">
		Keep distance! Thanks.
	</div>

	<script type="text/javascript">

// 		you can select items with d3 based on element type, id,
//    class, or combination of them here are some examples

// 		this will select all divs and update the text
// 		d3.selectAll('div').text("You are selected!");

// 		this will select only divs with class selectMe
//		d3.selectAll('div.selectMe').text("You are selected!") ;

// 		or any element that is classed as selectMe
//		d3.selectAll('.selectMe').text("You are selected!");

// 		this will select only divs with id selectMe
//		d3.selectAll('div#selectMe').text("You are selected!");

// 		and you can append items to your selection
// 		let's select body and append a new div
// 		check the order of elements in HTML page
// 		and also I'm using select this time!

		d3.select('body')
			.append('div')
			.text("I'm the new div added by d3! Yo!");

	</script>
</body>
	<!DOCTYPE html>

	<head>
	<title>d3js workshop - data binding</title>
	<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
	</head>

	<body>

	<div id="selectMe" class="selectMe">
	Select me if you can!
	</div>
	<br>
	<div id="doNotSelectMe" class="doNotSelectMe">
	Keep distance! Thanks.
	</div>

	<script type="text/javascript">

	// you can select items with d3 based on element type, id,
	// class, or combination of them here are some examples

	// this will select all divs and update the text
	// d3.selectAll('div').text("You are selected!");

	// this will select only divs with class selectMe
	// d3.selectAll('div.selectMe').text("You are selected!") ;

	// or any element that is classed as selectMe
	// d3.selectAll('.selectMe').text("You are selected!");

	// this will select only divs with id selectMe
	// d3.selectAll('div#selectMe').text("You are selected!");

	// and you can append items to your selection
	// let's select body and append a new div
	// check the order of elements in HTML page
	// and also I'm using select this time!

	d3.select('body')
	.append('div')
	.text("I'm the new div added by d3! Yo!");

	</script>
	</body>