Created
March 12, 2018 12:48
-
-
Save qcho/275dca20a7d55502e0fad9c6230e520f to your computer and use it in GitHub Desktop.
Infoviz TP2 - d3 interpolate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment