| body { | |
| font: 10px sans-serif; | |
| margin-top: 20px; | |
| } | |
| svg { | |
| margin-top: 40px; | |
| margin-left: 10px; | |
| } |
| svg { | |
| font-size: 14px; | |
| } | |
| #header { | |
| position: absolute; | |
| z-index: 1; | |
| display: block; | |
| } |
| [ | |
| { | |
| "class": "RegEnrollment", | |
| "Function3": "Enrollment", | |
| "name": "ACE - Batch Enrollment", | |
| "resourceCosts": 728576, | |
| "swCosts": 37500, | |
| "projectCosts": 0, | |
| "tco": 766076 | |
| }, |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-"Type"" content="text/html; charset=utf-8"/> | |
| <title>Table sort example in D3</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
| <style type='text/css'> | |
| caption { |
| key | value | date | |
|---|---|---|---|
| UnsubsidizedLoan | 0.00 | 07/24/12 | |
| UnsubsidizedLoan | 0.00 | 07/25/12 | |
| UnsubsidizedLoan | 0.00 | 07/26/12 | |
| UnsubsidizedLoan | 0.00 | 07/27/12 | |
| UnsubsidizedLoan | 0.00 | 07/28/12 | |
| UnsubsidizedLoan | 0.00 | 07/29/12 | |
| UnsubsidizedLoan | 0.00 | 07/30/12 | |
| UnsubsidizedLoan | 0.00 | 07/31/12 | |
| UnsubsidizedLoan | 0.00 | 08/01/12 |
| feeType | name | color | |
|---|---|---|---|
| Charges | Room & Board : Feb | #deb900 | |
| Charges | Room & Board : Jan | #deb900 | |
| Charges | Laundry/Dining Debit | #deb900 | |
| Charges | Room & Board : Dec | #deb900 | |
| Charges | Laundry/Dining Debit | #deb900 | |
| Charges | Laundry/Dining Debit | #deb900 | |
| Charges | Room & Board : Nov | #deb900 | |
| Fees | Transit : Class Pass Fee | #08306B | |
| Fees | Berkeley Campus Fee | #08306B |
| key,value,date | |
| ACADEMIC,0,02/02/12 | |
| ACADEMIC,0,02/02/12 | |
| ACADEMIC,0,02/02/12 | |
| ACADEMIC,2,02/03/12 | |
| ACADEMIC,2,02/03/12 | |
| ACADEMIC,2,02/03/12 | |
| ACADEMIC,2,02/03/12 | |
| ACADEMIC,2,02/03/12 | |
| ACADEMIC,2,02/03/12 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>CFV Issue Breakdown</title> | |
| <style> | |
| @import url(sankey.css); | |
| </style> | |
| <body> |
This example leverages a few interesting techniques with D3.js to illustrate the "dilemma" component of a strategic planning framework:
This example leverages a some techniques with D3.js to illustrate the "strategy space" component of a strategic planning framework: