john-guerra/cond3.html

## cond3.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Con D3</title>
</head>
<body>

  <h1>Scatterplot</h1>
  <svg width=400 height=400 id="viz"></svg>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sed, itaque culpa sapiente beatae aliquam numquam nemo? Voluptate nostrum, mollitia molestias distinctio deleniti delectus optio illo saepe blanditiis ex. Voluptatem?</div>


  <script src="http://d3js.org/d3.v4.min.js"></script>


  <script>
/* global d3 */

let svg = d3.select("#viz"),
  margin = {top: 20, right: 20, bottom: 30, left: 50},
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

g.append("g")
  .attr("class", "x axis");

g.append("g")
  .attr("class", "y axis");


let x = d3.scaleLinear()
  .range([0, width]);

let y = d3.scaleLinear()
  .range([height, 0]);

function update(myData) {
  x.domain([0, d3.max(myData, d => d.mod_razona_cuantitat_punt)]);
  y.domain([0, d3.max(myData, d => d.mod_lectura_critica_punt)]);

  let points = g.selectAll(".point")
    .data(myData); //update

  let pointsEnter = points
    .enter()
    .append("circle")
    .attr("class", "point");

  points.merge(pointsEnter) //Enter + Update
    .attr("cx", d => x(d.mod_razona_cuantitat_punt))
    .attr("cy", d => y(d.mod_lectura_critica_punt))
    .attr("r", 3.5);

  points.exit()
    .remove();


  g.select(".x.axis")
    .call(d3.axisBottom(x))
    .attr("transform",
      "translate(0, " + height + ")");

  g.select(".y.axis")
    .call(d3.axisLeft(y));
}


function callback(err, data) {
  if (err) throw err;
  console.log("segundo");

  data.forEach(d => {
    d.mod_razona_cuantitat_punt = +d.mod_razona_cuantitat_punt;
    d.mod_lectura_critica_punt = +d.mod_lectura_critica_punt;
  });


  update(data.slice(0, 10000));

}


console.log("primero");
d3.csv("./slice.csv", callback);
console.log("tercero");


  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Con D3</title>
	</head>
	<body>

	<h1>Scatterplot</h1>
	<svg width=400 height=400 id="viz"></svg>
	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sed, itaque culpa sapiente beatae aliquam numquam nemo? Voluptate nostrum, mollitia molestias distinctio deleniti delectus optio illo saepe blanditiis ex. Voluptatem?</div>


	<script src="http://d3js.org/d3.v4.min.js"></script>



	<script>
	/* global d3 */

	let svg = d3.select("#viz"),
	margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	g.append("g")
	.attr("class", "x axis");

	g.append("g")
	.attr("class", "y axis");


	let x = d3.scaleLinear()
	.range([0, width]);

	let y = d3.scaleLinear()
	.range([height, 0]);

	function update(myData) {
	x.domain([0, d3.max(myData, d => d.mod_razona_cuantitat_punt)]);
	y.domain([0, d3.max(myData, d => d.mod_lectura_critica_punt)]);

	let points = g.selectAll(".point")
	.data(myData); //update

	let pointsEnter = points
	.enter()
	.append("circle")
	.attr("class", "point");

	points.merge(pointsEnter) //Enter + Update
	.attr("cx", d => x(d.mod_razona_cuantitat_punt))
	.attr("cy", d => y(d.mod_lectura_critica_punt))
	.attr("r", 3.5);

	points.exit()
	.remove();


	g.select(".x.axis")
	.call(d3.axisBottom(x))
	.attr("transform",
	"translate(0, " + height + ")");

	g.select(".y.axis")
	.call(d3.axisLeft(y));
	}


	function callback(err, data) {
	if (err) throw err;
	console.log("segundo");

	data.forEach(d => {
	d.mod_razona_cuantitat_punt = +d.mod_razona_cuantitat_punt;
	d.mod_lectura_critica_punt = +d.mod_lectura_critica_punt;
	});


	update(data.slice(0, 10000));

	}




	console.log("primero");
	d3.csv("./slice.csv", callback);
	console.log("tercero");

























	</script>

	</body>
	</html>