This example shows how to use D3 and selection subsections to process a nested json data structure.
source: gist.github.com/gists/1183998
D3 References:
-
-
Save xeophin/a6a5c54bdea054e0923f079e5baab993 to your computer and use it in GitHub Desktop.
D3 Example: Processing a nested json data structure with subsections
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> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>D3: Subselection Example</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font: 13px sans-serif; | |
| } | |
| ul { | |
| list-style: none; | |
| font-weight: bold; | |
| } | |
| li { | |
| margin: 0.2em 0.0em; | |
| padding: 0.5em 1.0em; | |
| font-weight: normal; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var questions = [ | |
| { "prompt": "Why is the sky blue?", | |
| "responses": [ | |
| "Because the color blue was on sale at Wallmart", | |
| "Because blue is the prettiest color", | |
| "Because the air molecules difract blue light more than any other color" | |
| ] | |
| }, | |
| { "prompt": "Why are leaves usually green?", | |
| "responses": [ | |
| "So green caterpillars can hide better.", | |
| "Because leaves can more easily make energy with green light", | |
| "Because leaves absorb red and blue light so it's green that is reflected" | |
| ] | |
| } | |
| ]; | |
| var rows = d3.select("body").select('table').selectAll("tr") | |
| .data(questions) | |
| .enter().append("tr") | |
| rows | |
| .append('th') | |
| .text(function(d) { return d.prompt }) | |
| var contentCell = rows | |
| .append('td') | |
| contentCell.selectAll('div') | |
| .data(function(d) { return d.responses; }) | |
| .enter().append("div") | |
| .text(function(d) { return d }) | |
| .style("background-color", function(d, i) { return i % 2 ? "#eee" : "#ddd"; }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment