Live at http://bl.ocks.org/ChristosT/f73384946e17e4b1b46a
forked from ChristosT's block: CS 725 Information Visualization - VI2
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style type="text/css"> | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| } | |
| .button { | |
| background-color: #4CAF50; /* Green */ | |
| border: none; | |
| color: white; | |
| padding: 15px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- How to use buttons | |
| http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html --> | |
| <div id="option"> | |
| <input name="updateButton" | |
| type="button" | |
| value="Make scatterplot interesting" | |
| align="middle" | |
| onclick="Scatter()" /> | |
| <input name="updateButton" | |
| type="button" | |
| value="Update polygon" | |
| align="middle" | |
| onclick="Start()" /> | |
| <input name="updateButton" | |
| type="button" | |
| value="Reset polygon" | |
| align="middle" | |
| onclick="Reset()" /> | |
| </div> | |
| <script> | |
| // how to have 2 d3 graphs in one page : | |
| //http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html | |
| var w =420; | |
| var h= 400; | |
| var padding = 30; | |
| var dataset = []; | |
| var numDataPoints = 50; | |
| var xRange = Math.random() +1000 ; | |
| var yRange = Math.random() +1000 ; | |
| for (var i = 0; i < numDataPoints; i++) | |
| { | |
| var newNumber1 = Math.floor(Math.random() * xRange); | |
| var newNumber2 = Math.floor(Math.random() * yRange); | |
| dataset.push([newNumber1, newNumber2]); | |
| } | |
| var xScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[0]; })]) | |
| .range([padding, w-padding]); | |
| var yScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
| .range([h- padding, padding]); | |
| var rScale = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
| .range([2, 5]); | |
| // Color scale. | |
| var colorScale = d3.scale.ordinal() | |
| .range([ "rgb(50%, 0%, 0%)", | |
| "rgb(0%, 0%, 80%)", | |
| "rgb(0%, 50%, 0%)" ]); | |
| //Create SVG element | |
| var svg0 = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var Circles = svg0.selectAll("circle") | |
| .data(dataset) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) {return xScale(d[0]);}) | |
| .attr("cy", function(d) {return yScale(d[1]);}) | |
| .attr("r", 5); | |
| //color/opacity code taken from: | |
| //https://strongriley.github.io/d3/ex/splom.html | |
| // var formatAsPercentage = d3.format(".1%"); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .ticks(5); | |
| //.tickFormat(formatAsPercentage); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .orient("left") | |
| .ticks(5); | |
| svg0.append("g") | |
| .attr("class","axis") | |
| .attr("transform","translate(0," + (h-padding) + ")") | |
| .call(xAxis); | |
| //Create Y axis | |
| svg0.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(" + padding + ",0)") | |
| .call(yAxis); | |
| function Scatter(){ | |
| Circles.transition() | |
| .duration(2000) | |
| .attr("r" , function(d) {return rScale(d[1]*5);}) | |
| .style("fill", function(d) { return colorScale(d[0]); }) | |
| .style("fill-opacity", .5); | |
| } | |
| //========================================================= | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var polygon= svg.append("svg:path") | |
| .attr("d","m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z") | |
| .style("stroke-width", 2) | |
| .style("stroke", "blue") | |
| .style("fill", "white") | |
| .attr("transform", "translate(" + 250 + "," + 66 + ")") | |
| function Start() | |
| { | |
| polygon.transition() | |
| .duration(1500) | |
| .attr("d","m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z") | |
| .attr("transform", "translate(" + 250 + "," + 320 + ")") | |
| .style("fill","red") | |
| .each("end", function() | |
| { | |
| svg.append("svg:circle") | |
| .attr("cx",250) | |
| .attr("cy",320) | |
| .attr("r",200) | |
| .attr("fill","green") | |
| .transition() | |
| .duration(1500) | |
| .ease("linear") | |
| .attr("r",0) | |
| }); | |
| } | |
| //reset polygon to initial values | |
| function Reset() | |
| { | |
| polygon.attr("d","m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z") | |
| .style("stroke-width", 2) | |
| .style("stroke", "blue") | |
| .style("fill", "white") | |
| .attr("transform", "translate(" + 250 + "," + 66 + ")") | |
| } | |
| </script> | |
| </body> |