sannehombroek/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hier de titel</title>

<!--This is a comment. Comments are not displayed in the browser-->
<!-- the style elements go in a separate style.css file-->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- This loads the most recent version of D3.JS-->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- This refers to the actual D3.js file where you can make the specific visualisation-->
<script src='script.js'></script>

<body>
<!-- tijdelijk erin om te proberen-->
  <svg width="760" height="140">
      <g transform="translate(100, 30)">
        <rect />
        <rect />
        <rect />
        <rect />
        <rect />
      </g>
      <g transform="translate(100, 30)">
        <text />
        <text />
        <text />
        <text />
        <text />
      </g>
      <g transform="translate(70, 30)">
        <circle />
        <circle />
        <circle />
        <circle />
        <circle />
      </g>
    </svg>

    <div id='enters'>
      <div></div>
    </div>
    <button onClick="doEnter();">hier kan je dingen mee toevoegen </button>

</body>

</html>

## script.js
// var width=500;
// var height=500;
// var canvas =  d3.select("body")
//                 .append("svg")
//                 .attr("width",width)
//                 .attr("height", height)

//tijdelijk erin//

var cities = [
  { name: 'London', population: 8674000},
  { name: 'New York', population: 8406000},
  { name: 'Sydney', population: 4293000},
  { name: 'Paris', population: 2244000},
  { name: 'Beijing', population: 11510000}
];

// Join cities to rect elements and modify height, width and position
d3.selectAll('rect')
  .data(cities)
  .attr('height', 19)
  .attr('width', function(d) {
    var scaleFactor = 0.00004;
    return d.population * scaleFactor;
  })
  .attr('y', function(d, i) {
    return i * 20;
  });

// Join cities to text elements and modify content and position
d3.selectAll('text')
  .data(cities)
  .attr('y', function(d, i) {
    return i * 20 + 13;
  })
  .attr('x', -4)
  .text(function(d) {
    return d.name;
  });

d3.selectAll('circle')
	.data(cities)
	.attr('r',function(d) {var scaleFactor = 0.0000009;return d.population*scaleFactor})
	.attr('cy',function(d,i) {return i*20+10})
	.attr('cx',-50)

//add divs with enter and use population to add text
function doEnter()
    {d3.select('#enters').selectAll('div')
  .data(cities).enter()
  .append('div')};

## style.css
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  color: #333;
}
rect {
  fill: steelblue;
}
rect:hover {
  fill: orange;
}
text {
  text-anchor: end;
}
  circle { fill: grey}
#enters div {
	display: inline-block;
	margin: 10px;
	background-color: orange;
	color: white;
	padding: 30px;
	width: 10px;
	height: 10px;
	text-align: center;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hier de titel</title>

	<!--This is a comment. Comments are not displayed in the browser-->
	<!-- the style elements go in a separate style.css file-->
	<link rel="stylesheet" type="text/css" href="style.css">
	<!-- This loads the most recent version of D3.JS-->
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<!-- This refers to the actual D3.js file where you can make the specific visualisation-->
	<script src='script.js'></script>

	<body>
	<!-- tijdelijk erin om te proberen-->
	<svg width="760" height="140">
	<g transform="translate(100, 30)">
	<rect />
	<rect />
	<rect />
	<rect />
	<rect />
	</g>
	<g transform="translate(100, 30)">
	<text />
	<text />
	<text />
	<text />
	<text />
	</g>
	<g transform="translate(70, 30)">
	<circle />
	<circle />
	<circle />
	<circle />
	<circle />
	</g>
	</svg>

	<div id='enters'>
	<div></div>
	</div>
	<button onClick="doEnter();">hier kan je dingen mee toevoegen </button>

	</body>

	</html>
	// var width=500;
	// var height=500;
	// var canvas = d3.select("body")
	// .append("svg")
	// .attr("width",width)
	// .attr("height", height)

	//tijdelijk erin//

	var cities = [
	{ name: 'London', population: 8674000},
	{ name: 'New York', population: 8406000},
	{ name: 'Sydney', population: 4293000},
	{ name: 'Paris', population: 2244000},
	{ name: 'Beijing', population: 11510000}
	];

	// Join cities to rect elements and modify height, width and position
	d3.selectAll('rect')
	.data(cities)
	.attr('height', 19)
	.attr('width', function(d) {
	var scaleFactor = 0.00004;
	return d.population * scaleFactor;
	})
	.attr('y', function(d, i) {
	return i * 20;
	});

	// Join cities to text elements and modify content and position
	d3.selectAll('text')
	.data(cities)
	.attr('y', function(d, i) {
	return i * 20 + 13;
	})
	.attr('x', -4)
	.text(function(d) {
	return d.name;
	});

	d3.selectAll('circle')
	.data(cities)
	.attr('r',function(d) {var scaleFactor = 0.0000009;return d.population*scaleFactor})
	.attr('cy',function(d,i) {return i*20+10})
	.attr('cx',-50)

	//add divs with enter and use population to add text
	function doEnter()
	{d3.select('#enters').selectAll('div')
	.data(cities).enter()
	.append('div')};
	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 15px;
	color: #333;
	}
	rect {
	fill: steelblue;
	}
	rect:hover {
	fill: orange;
	}
	text {
	text-anchor: end;
	}
	circle { fill: grey}
	#enters div {
	display: inline-block;
	margin: 10px;
	background-color: orange;
	color: white;
	padding: 30px;
	width: 10px;
	height: 10px;
	text-align: center;
	}