Drawable Graphs in d3
Last active
August 29, 2015 14:05
-
-
Save chromy/f8cb242657a7027cf60c to your computer and use it in GitHub Desktop.
Drawable Graphs
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| #content { | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| font-family: "PT Sans", sans-serif; | |
| } | |
| .example rect { | |
| fill: steelblue; | |
| } | |
| .example text { | |
| fill: white; | |
| font: 10px sans-serif; | |
| text-anchor: middle; | |
| padding-bottom: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <svg id="example1" class="example"></svg> | |
| <svg id="example2" class="example"></svg> | |
| <svg id="example3" class="example"></svg> | |
| </div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| function chart() { | |
| var width = 700, // default width | |
| height = 80; // default height | |
| var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; | |
| var max = 100; | |
| var discrete = false; | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| function my(selection) { | |
| y.domain([0, max]); | |
| var barWidth = width / data.length; | |
| selection | |
| .attr("width", width) | |
| .attr("height", height); | |
| var bar = selection.selectAll("g") | |
| .data(data); | |
| var enterg = bar.enter() | |
| .append("g") | |
| .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; }); | |
| enterg.append("rect"); | |
| var rect = bar.select("rect") | |
| .attr("y", function(d) { return y(d); }) | |
| .attr("height", function(d) { return height - y(d); }) | |
| .attr("width", barWidth - 1); | |
| selection | |
| .on('mousemove', function() { | |
| var pt = d3.mouse(this); | |
| var px = pt[0]; | |
| var py = pt[1]; | |
| var sample = Math.floor(px / barWidth); | |
| var newValue = y.invert(py); | |
| if (discrete) { | |
| newValue = Math.floor(newValue); | |
| } | |
| data[sample] = newValue; | |
| my(selection); | |
| }); | |
| } | |
| my.width = function(value) { | |
| if (!arguments.length) return width; | |
| width = value; | |
| return my; | |
| }; | |
| my.height = function(value) { | |
| if (!arguments.length) return height; | |
| height = value; | |
| return my; | |
| }; | |
| my.max = function(value) { | |
| if (!arguments.length) return max; | |
| max = value; | |
| return my; | |
| }; | |
| my.data = function(value) { | |
| if (!arguments.length) return data; | |
| data = value; | |
| return my; | |
| }; | |
| my.n = function(value) { | |
| if (!arguments.length) return data.length; | |
| data.length = value; | |
| // Set any new values to 50% | |
| for (var i=0; i<data.length; i++) { | |
| if (!data[i]) { | |
| data[i] = max / 2; | |
| } | |
| } | |
| return my; | |
| }; | |
| my.discrete = function(value) { | |
| if (!arguments.length) return discrete; | |
| discrete = value; | |
| return my; | |
| }; | |
| return my; | |
| } | |
| // Minimal example. | |
| var example1 = chart(); | |
| d3.select("#example1").call(example1); | |
| // Large n. | |
| var example2 = chart() | |
| .n(100); | |
| d3.select("#example2").call(example2); | |
| var example3 = chart() | |
| .n(20) | |
| .max(8) | |
| .discrete(true); | |
| d3.select("#example3").call(example3); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment