A simple example of the Towards Reusable Charts pattern.
Built with blockbuilder.org
forked from curran's block: Reusable Bar Chart
Last active
February 21, 2017 11:01
-
-
Save curran/85b45f241a7d75cebc246f9a58f18915 to your computer and use it in GitHub Desktop.
[UNLISTED] Simplest Reusable Chart
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
| license: mit |
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"> | |
| <title>Simplest Reusable Chart</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <svg id="simple-chart"></svg> | |
| <script> | |
| function SimpleChart(){ | |
| var width, | |
| height; | |
| function my(selection){ | |
| selection | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("background-color", "blue"); | |
| } | |
| my.width = function (_){ | |
| return arguments.length ? (width = _, my) : width; | |
| }; | |
| my.height = function (_){ | |
| return arguments.length ? (height = _, my) : height; | |
| }; | |
| return my; | |
| } | |
| function main(){ | |
| // Initialize the chart. | |
| var simpleChart = SimpleChart() | |
| .width(500) | |
| .height(300); | |
| // Render for the first time. | |
| d3.select("#simple-chart") | |
| .call(simpleChart); | |
| // Randomly resize every second. | |
| setInterval(function (){ | |
| // Reconfigure width and height. | |
| simpleChart | |
| .width(Math.random() * 960) | |
| .height(Math.random() * 500); | |
| // Re-render. | |
| d3.select("#simple-chart") | |
| .call(simpleChart); | |
| }, 1000); | |
| } | |
| main(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment