This is the dex.js Sunburst.
- Need to improve label sizing and placement.
- Dynamic partition sizing.
- Improve color separation and label coloring.
- dex.js The main site
Last active
August 7, 2017 02:21
-
-
Save PatMartin/2b3d11ad2eef3c57f9b9561cda7e64bd to your computer and use it in GitHub Desktop.
Sunburst
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> | |
| <style> | |
| html, body, #Chart { | |
| height: 100%; | |
| min-height: 100%; | |
| width: 100%; | |
| min-width: 100%; | |
| } | |
| #Chart { | |
| display: inline-block; | |
| } | |
| </style> | |
| <title>dex.js : Clustered Force</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css"> | |
| <link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/> | |
| <link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css"> | |
| <link rel="stylesheet" href="https://dexjs.net/js/dex.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> | |
| <script src="https://dexjs.net/js/dex-jquery.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="https://dexjs.net/js/dex-bootstrap.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
| <script src="https://dexjs.net/js/dex-libs.js"></script> | |
| <script src="https://dexjs.net/js/dex.js"></script> | |
| </head> | |
| <body> | |
| <div class="ui-layout-center"> | |
| <div id="Chart"></div> | |
| </div> | |
| <div class="ui-layout-west"> | |
| <div id="ConfigurationPane"></div> | |
| </div> | |
| <script> | |
| d3.csv("presidents.csv", function (error, data) { | |
| var presidents = new dex.csv(data); | |
| $(document).ready(function () { | |
| $('body').layout({ | |
| applyDemoStyles: false, | |
| west: { | |
| size: 335 | |
| }, | |
| onresize: function () { | |
| chart.resize(); | |
| } | |
| }); | |
| var chart = dex.charts.d3.Sunburst({ | |
| 'parent': '#Chart', | |
| 'csv': presidents.include([2, 3, 1, 0]) | |
| }).render(); | |
| var configPane = dex.ui.ConfigurationPane({ | |
| "parent": "#ConfigurationPane", | |
| "csv": presidents.include([2, 3, 1, 0]), | |
| "components": [chart] | |
| }).render(); | |
| }); | |
| }); | |
| </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
| Presidency | President | Party | Home State | |
|---|---|---|---|---|
| 1 | George Washington | Independent | Virginia | |
| 2 | John Adams | Federalist | Massachusetts | |
| 3 | Thomas Jefferson | Dem/Rep | Virginia | |
| 4 | James Madison | Dem/Rep | Virginia | |
| 5 | James Monroe | Dem/Rep | Virginia | |
| 6 | John Quincy Adams | Dem-Rep/Nat-Rep | Massachusetts | |
| 7 | Andrew Jackson | Democratic | Tennessee | |
| 8 | Martin Van Buren | Democratic | New York | |
| 9 | William Henry Harrison | Whig | Ohio | |
| 10 | John Tyler | Whig | Virginia | |
| 11 | James K. Polk | Democratic | Tennessee | |
| 12 | Zachary Taylor | Whig | Louisiana | |
| 13 | Millard Fillmore | Whig | New York | |
| 14 | Franklin Pierce | Democratic | New Hampshire | |
| 15 | James Buchanan | Democratic | Pennsylvania | |
| 16 | Abraham Lincoln | Rep/Nat Union | Illinois | |
| 17 | Andrew Johnson | Dem/Nat Union | Tennessee | |
| 18 | Ulysses S. Grant | Republican | Ohio | |
| 19 | Rutherford B. Hayes | Republican | Ohio | |
| 20 | James A. Garfield | Republican | Ohio | |
| 21 | Chester A. Arthur | Republican | New York | |
| 22 | Grover Cleveland | Democratic | New York | |
| 23 | Benjamin Harrison | Republican | Indiana | |
| 24 | Grover Cleveland (2nd term) | Democratic | New York | |
| 25 | William McKinley | Republican | Ohio | |
| 26 | Theodore Roosevelt | Republican | New York | |
| 27 | William Howard Taft | Republican | Ohio | |
| 28 | Woodrow Wilson | Democratic | New Jersey | |
| 29 | Warren G. Harding | Republican | Ohio | |
| 30 | Calvin Coolidge | Republican | Massachusetts | |
| 31 | Herbert Hoover | Republican | Iowa | |
| 32 | Franklin D. Roosevelt | Democratic | New York | |
| 33 | Harry S. Truman | Democratic | Missouri | |
| 34 | Dwight D. Eisenhower | Republican | Texas | |
| 35 | John F. Kennedy | Democratic | Massachusetts | |
| 36 | Lyndon B. Johnson | Democratic | Texas | |
| 37 | Richard Nixon | Republican | California | |
| 38 | Gerald Ford | Republican | Michigan | |
| 39 | Jimmy Carter | Democratic | Georgia | |
| 40 | Ronald Reagan | Republican | California | |
| 41 | George H. W. Bush | Republican | Texas | |
| 42 | Bill Clinton | Democratic | Arkansas | |
| 43 | George W. Bush | Republican | Texas | |
| 44 | Barack Obama | Democratic | Illinois |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment