| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <meta name="description" content="Lecture 4 exercise 4" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .axis path, .axis line { | |
| fill: none; |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } |
| li{ | |
| font-size:17px; | |
| } | |
| #rect-1 { | |
| fill:blue; | |
| } | |
| .shape{ | |
| opacity:.4; |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Class Exercise 1" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <!-- Create a div with an id of "top-div"--> | |
| <div id="top-div"> |
Click on any arc to zoom in. Click in the center to zoom out.
A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.