aaizemberg/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>linechart</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    html {
      height: 100%;
      box-sizing: border-box;
    }

    *, *:before, *:after {
      box-sizing: inherit;
    }

    body {
      position: relative;
      margin: 0;
      padding-bottom: 6rem;
      min-height: 100%;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }

    footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 3px;
    }
</style>

</head>
<body>
  <div id="curveSelect"></div>

  <script>
    var select = [
    {"value":0, "text":"curveBasis",      "d3Curve":d3.curveBasis},
    {"value":1, "text":"curveLinear",     "d3Curve":d3.curveLinear},
    {"value":2, "text":"curveNatural",    "d3Curve":d3.curveNatural},
    {"value":3, "text":"curveStep",       "d3Curve":d3.curveStep},
    {"value":4, "text":"curveStepAfter",  "d3Curve":d3.curveStepAfter},
    {"value":5, "text":"curveCardinal",   "d3Curve":d3.curveCardinal},
    {"value":6, "text":"curveMonotoneX",  "d3Curve":d3.curveMonotoneX},
    {"value":7, "text":"curveCatmullRom", "d3Curve":d3.curveCatmullRom}
//
// etc.
//
];

    d3.select("div#curveSelect")
      .append("select").attr("id","curve")
        .selectAll("option")
        .data(select)
        .enter()
        .append("option")
        .attr("value",function(d,i) {return i})
        .text(function(d,i) {return d.text;});


    var data = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                  { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                  { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

    // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    // set the ranges
    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    var valueline = d3.line()
            .x(function(d) { return x(d.x); })
            .y(function(d) { return y(d.y); });

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain([0, d3.max(data, function(d) { return d.y; })]);

    render(d3.curveBasis);

    d3.select("#curve").on("change", function(){
            // Add the valueline path.
            valueline.curve(select[d3.select("#curve").property('value')].d3Curve);

            d3.select("path")
            .transition()
            // .duration(500)
            // .ease(d3.easeLinear)
            .attr("class","line")
            .attr("d",valueline(data));

      });

    function render(curve){
        // define the line
        valueline.curve(curve);

        // append the svg object to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("body").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 + ")");

        // Get the data

          // Add the valueline path.
          svg.append("path")
              .attr("class", "line")
              .attr("d", valueline(data));


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

          // text label for the x axis
          svg.append("text")
          .attr("transform",
                "translate(" + (width/2) + " ," +
                               (height + 30) + ")")
          .style("text-anchor", "middle")
          .text("X Axis");

          // Add the Y Axis
          svg.append("g")
              .call(d3.axisLeft(y));

          svg.append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 0 - margin.left)
          .attr("x",0 - (height / 2))
          .attr("dy", "1em")
          .style("text-anchor", "middle")
          .text("Y Axis");

          svg.selectAll("circle").data(data).enter().append("circle")
             .attr("cx",function(d,i) { return x(d.x);} )
             .attr("cy",function(d,i) { return y(d.y);} )
             .attr("r",5)
             .attr("fill", "steelblue")
             .attr("stroke","white");
      }
  </script>
<footer>
  <p>Una extension del trabajo de adebrouvier: <a href="https://bl.ocks.org/adebrouvier/24871961f25ac5e30c0a235154b61cf5">https://bl.ocks.org/adebrouvier/24871961f25ac5e30c0a235154b61cf5</a></p>
</footer>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>linechart</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	html {
	height: 100%;
	box-sizing: border-box;
	}

	, :before, *:after {
	box-sizing: inherit;
	}

	body {
	position: relative;
	margin: 0;
	padding-bottom: 6rem;
	min-height: 100%;
	font-family: "Helvetica Neue", Arial, sans-serif;
	}

	footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	background-color: #efefef;
	text-align: center;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 3px;
	}
	</style>

	</head>
	<body>
	<div id="curveSelect"></div>

	<script>
	var select = [
	{"value":0, "text":"curveBasis", "d3Curve":d3.curveBasis},
	{"value":1, "text":"curveLinear", "d3Curve":d3.curveLinear},
	{"value":2, "text":"curveNatural", "d3Curve":d3.curveNatural},
	{"value":3, "text":"curveStep", "d3Curve":d3.curveStep},
	{"value":4, "text":"curveStepAfter", "d3Curve":d3.curveStepAfter},
	{"value":5, "text":"curveCardinal", "d3Curve":d3.curveCardinal},
	{"value":6, "text":"curveMonotoneX", "d3Curve":d3.curveMonotoneX},
	{"value":7, "text":"curveCatmullRom", "d3Curve":d3.curveCatmullRom}
	//
	// etc.
	//
	];

	d3.select("div#curveSelect")
	.append("select").attr("id","curve")
	.selectAll("option")
	.data(select)
	.enter()
	.append("option")
	.attr("value",function(d,i) {return i})
	.text(function(d,i) {return d.text;});


	var data = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
	{ "x": 40, "y": 10}, { "x": 60, "y": 40},
	{ "x": 80, "y": 5}, { "x": 100, "y": 60}];

	// set the dimensions and margins of the graph
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	// set the ranges
	var x = d3.scaleLinear().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

	var valueline = d3.line()
	.x(function(d) { return x(d.x); })
	.y(function(d) { return y(d.y); });

	x.domain(d3.extent(data, function(d) { return d.x; }));
	y.domain([0, d3.max(data, function(d) { return d.y; })]);

	render(d3.curveBasis);

	d3.select("#curve").on("change", function(){
	// Add the valueline path.
	valueline.curve(select[d3.select("#curve").property('value')].d3Curve);

	d3.select("path")
	.transition()
	// .duration(500)
	// .ease(d3.easeLinear)
	.attr("class","line")
	.attr("d",valueline(data));

	});

	function render(curve){
	// define the line
	valueline.curve(curve);

	// append the svg object to the body of the page
	// appends a 'group' element to 'svg'
	// moves the 'group' element to the top left margin
	var svg = d3.select("body").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 + ")");

	// Get the data

	// Add the valueline path.
	svg.append("path")
	.attr("class", "line")
	.attr("d", valueline(data));


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

	// text label for the x axis
	svg.append("text")
	.attr("transform",
	"translate(" + (width/2) + " ," +
	(height + 30) + ")")
	.style("text-anchor", "middle")
	.text("X Axis");

	// Add the Y Axis
	svg.append("g")
	.call(d3.axisLeft(y));

	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - margin.left)
	.attr("x",0 - (height / 2))
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("Y Axis");

	svg.selectAll("circle").data(data).enter().append("circle")
	.attr("cx",function(d,i) { return x(d.x);} )
	.attr("cy",function(d,i) { return y(d.y);} )
	.attr("r",5)
	.attr("fill", "steelblue")
	.attr("stroke","white");
	}
	</script>
	<footer>
	<p>Una extension del trabajo de adebrouvier: <a href="https://bl.ocks.org/adebrouvier/24871961f25ac5e30c0a235154b61cf5">https://bl.ocks.org/adebrouvier/24871961f25ac5e30c0a235154b61cf5</a></p>
	</footer>

	</body>
	</html>