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.
| <!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"> |
| li{ | |
| font-size:17px; | |
| } | |
| #rect-1 { | |
| fill:blue; | |
| } | |
| .shape{ | |
| opacity:.4; |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } |
| <!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; |
| info: Welcome to Nodejitsu mikefree | |
| info: jitsu v0.14.0, node v0.10.30 | |
| info: It worked if it ends with Nodejitsu ok | |
| info: Executing command deploy | |
| info: Analyzing application dependencies in node plugin/multiplex | |
| info: Checking app availability info343 | |
| info: Creating app info343 | |
| info: Creating snapshot 0.0.0-2 | |
| info: Uploading: [=============================] 100% | |
| npm WARN package.json info343@0.0.0-2 No description |
| error: Error running command deploy | |
| error: Errors occured while starting the application | |
| error: Error output from application. This is usually a user error. | |
| error: | |
| error: module.js:340 | |
| error: throw err; | |
| error: ^ | |
| error: Error: Cannot find module '/opt/run/snapshot/package/plugin/multiplex' | |
| error: at Function.Module._resolveFilename (module.js:338:15) | |
| error: at Function.Module._load (module.js:280:25) |
| # Station test | |
| library(plyr) | |
| library(data.table) | |
| routes <- read.csv('/Users/michaelfreeman/Downloads/Divvy_RouteShapes_ALL-FINAL.csv') | |
| route_stations <- count(routes, c('stationFromId', 'stationFromLat', 'stationFromLong')) | |
| setnames(route_stations, 'stationFromId', 'id') | |
| setwd('/Applications/MAMP/htdocs/divvy-munging/data_from_divvy/2014/Divvy_Stations_Trips_2014_Q3Q4') | |
| station_locations <- read.csv('Divvy_Stations_2014-Q3Q4.csv') | |
| mergeData <- merge(station_locations, route_stations, by=c('id')) | |
| plot(mergeData$latitude, mergeData$stationFromLat) |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #{ | |
| } | |
| </style> | |
| </head> |
| // Histogram adapted from https://bl.ocks.org/mbostock/3048450 | |
| // On load, append chart element | |
| $(function() { | |
| // Select SVG to work with, setting width and height (the vis <div> is defined in the index.html file) | |
| var svg = d3.select('#vis') | |
| .append('svg') | |
| .attr('height', 350) | |
| .attr('width', 900); |