Created
December 17, 2012 22:46
-
-
Save kardeiz/4323126 to your computer and use it in GitHub Desktop.
d3 fragments for stacked charts
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
| <html> | |
| <head> | |
| <title>Sankey Diagram</title> | |
| <script src="../assets/d3.v2.js"></script> | |
| <script src="../assets/sankey.js"></script> | |
| <script src="../assets/jquery-1.8.3.min.js"></script> | |
| <script src="../assets/underscore.js"></script> | |
| <script src="../assets/underscore.nest.js"></script> | |
| <script src="../assets/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
| <link href='../assets/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.css' rel='stylesheet' type='text/css'> | |
| <style type="text/css"> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: small; | |
| } | |
| .node rect { | |
| cursor: move; | |
| fill-opacity: .9; | |
| shape-rendering: crispEdges; | |
| } | |
| .node text { | |
| pointer-events: none; | |
| text-shadow: 0 1px 0 #fff; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #000; | |
| stroke-opacity: .2; | |
| } | |
| .link:hover { | |
| stroke-opacity: .5; | |
| } | |
| ul { list-style: none; } | |
| ul#sortable { cursor: move; padding-left: 0; } | |
| ul#sortable li:first-child { margin-left: 50px; } | |
| ul#sortable li { | |
| display: inline-block; | |
| float: left; | |
| width: 100px; | |
| } | |
| select { | |
| -moz-border-radius: 4px; | |
| -moz-box-shadow: 1px 1px 5px #cfcfcf inset; | |
| border: 1px solid #cfcfcf; | |
| vertical-align: middle; | |
| background-color: transparent; | |
| } | |
| option { | |
| background-color: #fef5e6; | |
| border-bottom: 1px solid #ebdac0; | |
| border-right: 1px solid #d6bb86; | |
| border-left: 1px solid #d6bb86; | |
| } | |
| option:hover { | |
| cursor: pointer; | |
| } | |
| .selectable .ui-selected { background: darkgray; color: white; } | |
| .selectable { list-style-type: none; margin: 0; padding: 0; cursor: pointer; } | |
| .selectable li { padding: 0.5em; } | |
| .selectable li { padding: 0.5em; } | |
| .selectable li:not(:first-child) { margin-top: 2px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="display:table-row; vertical-align:middle;"> | |
| <div id="div_question_1" style="display:table-cell; vertical-align:inherit; padding-right: 20px; border-right: 2px solid gray;"></div> | |
| <div id="content" style="display:table-cell; vertical-align:inherit;"></div> | |
| <div id="div_question_2" style="display:table-cell; vertical-align:inherit; padding-left: 20px; border-left: 2px solid gray;"></div> | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| d3.csv('../assets/summon_survey_results.csv', function(csv){ | |
| processData(csv); | |
| }); | |
| var select_box = $('<ul class="selectable" style="list-style:none;"/>'); | |
| _(survey_questions).each(function(x) { | |
| select_box.append($('<li class="ui-widget-content"/>').text(x)); | |
| }); | |
| $('#div_question_1, #div_question_2').append(select_box); | |
| $('#div_question_1 > .selectable > li:nth-child(1)').addClass("ui-selected"); | |
| $('#div_question_2 > .selectable > li:nth-child(2)').addClass("ui-selected"); | |
| $(function() { | |
| $( "#div_question_1 > .selectable" ).selectable(); | |
| $( "#div_question_2 > .selectable" ).selectable(); | |
| }) | |
| $( "#div_question_1 > .selectable, #div_question_2 > .selectable" ).on( "selectableselected", function( event, ui ) { | |
| d3.csv('../assets/summon_survey_results.csv', function(csv){ | |
| processData(csv, $('#div_question_1 > .selectable > .ui-selected').text(), $('#div_question_2 > .selectable > .ui-selected').text()); | |
| }); | |
| }); | |
| }); | |
| var survey_questions = [ | |
| "1. Please select your college status:", | |
| "2. Have you ever used FrogScholar?", | |
| "3. Did a librarian teach you how to use FrogScholar?", | |
| "4. How frequently do you use FrogScholar?", | |
| "5. Are you able to find useful information using FrogScholar?", | |
| "6. How satisfied are you with your search results when using FrogScholar?", | |
| "7. How easy is FrogScholar to use?", | |
| "8. How useful did you find the choices on the left hand side of the search results screen?", | |
| "9. When a search finds titles you\u2019re interested in, are you able to get to the content?", | |
| "10. Would you recommend this research tool to a friend?" | |
| ]; | |
| function processData(data, question_1, question_2) { | |
| question_1 = typeof question_1 !== 'undefined' ? question_1 : "1. Please select your college status:"; | |
| question_2 = typeof question_2 !== 'undefined' ? question_2 : "2. Have you ever used FrogScholar?"; | |
| data = _(data).map(function(x) { | |
| if (x["2. Have you ever used FrogScholar?"] == "No") { | |
| return _(x).chain() | |
| .pairs() | |
| .reject(function(y) { return y[0] !== "1. Please select your college status:" && y[0] !== "2. Have you ever used FrogScholar?" }) | |
| .object() | |
| .value(); | |
| } | |
| else { return x; } | |
| }); | |
| var output_json = {nodes: [], links: []}; | |
| var nested = d3.nest() | |
| .key(function(d) { return d[question_1]; }) | |
| .key(function(d) { return d[question_2]; }) | |
| .rollup(function(d) { return d.length; }) | |
| .entries(data); | |
| console.log(nested); | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment