qcho/.block

## .block
license: mit

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style> /* set the CSS */

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}

body { font: 12px Tahoma;}

</style>
</head>
<body>
  <h1>InfoViz - Clase2</h1>
  <h2>Interpolacion</h2>
  <select id="itype">
    <option value="curveLinear" selected>curveLinear</option>
    <option value="curveStep">curveStep</option>
    <option value="curveStepBefore">curveStepBefore</option>
    <option value="curveStepAfter">curveStepAfter</option>
    <option value="curveBasis">curveBasis</option>
    <option value="curveCardinal">curveCardinal</option>
    <option value="curveMonotoneX">curveMonotoneX</option>
    <option value="curveCatmullRom">curveCatmullRom</option>
  </select>
  <div id="viz"/></div>
  <h2>Links</h2>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random" target="_blank">Math.random</a></li>
    <li><a href="https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529" target="_blank">Ejemplo</a></li>
  </ul>
  <script src="script.js"></script>
</body>
</html>

## script.js
let MAX_X = 20,
    MAX_Y = 20,
    f = (x) => ({x: x, y: (Math.random()* MAX_Y)}),
    data = Array.from(Array(MAX_X).keys()).map(x => f(x))

// set the dimensions and margins of the graph
let margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 800 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom

let svg = d3.select("#viz").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")")

// Escalas para el tamaño del grafico
let x = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.x)])
      .range([0, width]),
    y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.y)])
      .range([height, 0])

// Eje X
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

// Eje Y
svg.append("g")
  .call(d3.axisLeft(y))

// Dibujar puntos
svg.selectAll("dot")
  .data(data)
  .enter().append("circle")
  .attr("r", 5)
  .attr("cx", function(d) { return x(d.x); })
  .attr("cy", function(d) { return y(d.y); })

// Colores
var color = d3.scaleOrdinal(d3.schemeCategory10);

function drawPath(svg) {
  svg.selectAll("path").remove()
  let d3Curve = itypeSelect.property("value")
    svg.append("path")
      .datum(data)
      .attr("class", "line")
      .style("stroke", () => color(d3Curve))
      .attr("d", d3.line()
                   .curve(d3[d3Curve])
                   .x((d) => x(d.x))
                   .y((d) => y(d.y))
               );
}

// On-change del dropdown redibujar
let itypeSelect = d3.select("#itype")
  .on("change", () => drawPath(svg))

drawPath(svg)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style> /* set the CSS */

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 3px;
	}

	body { font: 12px Tahoma;}

	</style>
	</head>
	<body>
	<h1>InfoViz - Clase2</h1>
	<h2>Interpolacion</h2>
	<select id="itype">
	<option value="curveLinear" selected>curveLinear</option>
	<option value="curveStep">curveStep</option>
	<option value="curveStepBefore">curveStepBefore</option>
	<option value="curveStepAfter">curveStepAfter</option>
	<option value="curveBasis">curveBasis</option>
	<option value="curveCardinal">curveCardinal</option>
	<option value="curveMonotoneX">curveMonotoneX</option>
	<option value="curveCatmullRom">curveCatmullRom</option>
	</select>
	<div id="viz"/></div>
	<h2>Links</h2>
	<ul>
	<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random" target="_blank">Math.random</a></li>
	<li><a href="https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529" target="_blank">Ejemplo</a></li>
	</ul>
	<script src="script.js"></script>
	</body>
	</html>
	let MAX_X = 20,
	MAX_Y = 20,
	f = (x) => ({x: x, y: (Math.random()* MAX_Y)}),
	data = Array.from(Array(MAX_X).keys()).map(x => f(x))

	// set the dimensions and margins of the graph
	let margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 800 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom

	let svg = d3.select("#viz").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")")

	// Escalas para el tamaño del grafico
	let x = d3.scaleLinear()
	.domain([0, d3.max(data, d => d.x)])
	.range([0, width]),
	y = d3.scaleLinear()
	.domain([0, d3.max(data, d => d.y)])
	.range([height, 0])

	// Eje X
	svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))

	// Eje Y
	svg.append("g")
	.call(d3.axisLeft(y))

	// Dibujar puntos
	svg.selectAll("dot")
	.data(data)
	.enter().append("circle")
	.attr("r", 5)
	.attr("cx", function(d) { return x(d.x); })
	.attr("cy", function(d) { return y(d.y); })

	// Colores
	var color = d3.scaleOrdinal(d3.schemeCategory10);

	function drawPath(svg) {
	svg.selectAll("path").remove()
	let d3Curve = itypeSelect.property("value")
	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.style("stroke", () => color(d3Curve))
	.attr("d", d3.line()
	.curve(d3[d3Curve])
	.x((d) => x(d.x))
	.y((d) => y(d.y))
	);
	}

	// On-change del dropdown redibujar
	let itypeSelect = d3.select("#itype")
	.on("change", () => drawPath(svg))

	drawPath(svg)