Created
July 27, 2017 21:13
-
-
Save ricardofelippe/10cb24020262b5116a7687e5f93d2a83 to your computer and use it in GitHub Desktop.
This file contains 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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 Page Template</title> | |
| <!---Style CSS---> | |
| <style type="text/css"> | |
| div.bar { | |
| display: inline-block; | |
| width: 20px; | |
| height: 75px; /* We'll override height later */ | |
| background-color: pink; } | |
| .inactive, .tentative { | |
| stroke: darkgray; | |
| stroke-width: 2px; | |
| stroke-dasharray: 5 5; | |
| } | |
| .tentative { | |
| opacity: .5; | |
| } | |
| .active { | |
| stroke: black; | |
| stroke-width: 4px; | |
| stroke-dasharray: 1; | |
| } | |
| </style> | |
| <script type="text/javascript" src="d3.js"></script> | |
| <script> | |
| var dataset = [ 5, 10, 15, 20, 25 ]; | |
| function draw_simple_bar_inSVG(){ | |
| //Width and height | |
| var w = 500; | |
| var h = 100; | |
| var barPadding =1; | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w/2) | |
| .attr("height", h); | |
| var svg2 = d3.select("body") | |
| .append("svg") | |
| .attr("width", w/2) | |
| .attr("height", h) | |
| svg.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d,i){ return i*(w/dataset.length)}) | |
| .attr("y", function(d){return h-d*4}) | |
| .attr("width", w/dataset.length-barPadding) | |
| .attr("height", function(d){return d*4 }) | |
| .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";}) | |
| svg2 | |
| .selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d,i){ return i*(w/dataset.length)}) | |
| .attr("y", function(d){return h-d*4}) | |
| .attr("width", w/dataset.length-barPadding) | |
| .attr("height", function(d){return d*4 }) | |
| .attr("fill", function(d) {return "rgb(0, 0, " + (d * 10) + ")";}) | |
| svg.selectAll("text") | |
| .data(dataset) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { | |
| return d; }) | |
| .attr("x", function(d, i) { return i * (w / dataset.length)+5; }) | |
| .attr("y", function(d) { return h - (d * 4)+15; }) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "11px") | |
| .attr("fill", "red"); | |
| }; | |
| function draw_simple_bar_in_div(){ | |
| var div = d3.select("body").selectAll("div"); | |
| div.data(dataset) | |
| .enter() | |
| .append("div") | |
| .attr("class", "bar") | |
| .style("height", function(d) { | |
| var barHeight = d * 5; | |
| return barHeight + "px"; | |
| }); | |
| }; | |
| function making_scatterplot(){ | |
| var w = 1000; | |
| var h = 200; | |
| var barPadding =1; | |
| var padding=20; | |
| //Dynamic, random dataset | |
| 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]); | |
| } | |
| // Setting Up Dynamic Scales | |
| var xScale = d3.scaleLinear() | |
| .domain([0, d3.max(dataset, function(d) { return d[0]; })]) | |
| .range([0, w-padding*2]); | |
| var yScale = d3.scaleLinear() | |
| .domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
| .range([h-padding,padding]); | |
| var rScale = d3.scaleLinear() | |
| .domain([0, d3.max(dataset, function(d) { return d[1]; })]) | |
| .range([2, 5]); | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg.selectAll("circle") // <-- No longer "rect" | |
| .data(dataset) | |
| .enter() | |
| .append("circle") // <-- No longer "rect" | |
| .attr("cx", function(d) { | |
| return xScale(d[0]); | |
| }) | |
| .attr("transform", "translate(25,0)") | |
| .attr("cy", function(d) { | |
| return yScale(d[1]); | |
| }) | |
| .attr("r", function(d) { | |
| return rScale(d[1]); | |
| }); | |
| svg.selectAll("text") // <-- Note "text", not "circle" or "rect" | |
| .data(dataset) | |
| .enter() | |
| .append("text") // <-- Same here! | |
| .text(function(d) { | |
| return d[0] + "," + d[1]; }) | |
| .attr("x", function(d) { | |
| return xScale(d[0]); }) | |
| .attr("transform", "translate(25,0)") | |
| .attr("y", function(d) { | |
| return yScale(d[1]); }) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "11px") | |
| .attr("fill", "red"); | |
| // add the x Axis | |
| svg.append("g") | |
| .attr("transform", "translate(25,180)") | |
| .call(d3.axisBottom(xScale)); | |
| svg.append("g") | |
| .attr("transform", "translate(25,0)") | |
| .call(d3.axisLeft(yScale)); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <p x="10">Drawing a single div!</p><br> | |
| <button type="button" onclick="draw_simple_bar_in_div()">Insert div_bar!</button><br> | |
| <p>Drawing a single bar in a SVG!</p> | |
| <button type="button" onclick="draw_simple_bar_inSVG()">draw_simple_bar_inSVG!</button><br> | |
| <p>Making a Scatterplot!</p> | |
| <button type="button" onclick="making_scatterplot()">making_scatterplot!</button><br> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment