This variation of a donut chart demonstrates how to update values. Clicking on the radio buttons changes the displayed metric.
Next: Animation
| <!-- | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software | |
| * distributed under the License is distributed on an "AS IS" BASIS, | |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| {"nodes":[ | |
| {"x":80, "r":40, "label":"Sam","info":"Developer"}, | |
| {"x":200, "r":60, "label":"Pam","info":"Programmer"}, | |
| {"x":380, "r":80, "label":"Ram","info":"Senior Programmer"} | |
| ]} |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" | |
| xml:lang="en-US" | |
| lang="en-US"> | |
| <head profile="http://www.w3.org/2005/10/profile"> | |
| <title>My Force Directed Graph</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> | |
| <meta name="Description" content="This page tries to mix charts with html formatting and layout constructs." /> |
This variation of a donut chart demonstrates how to update values. Clicking on the radio buttons changes the displayed metric.
Next: Animation
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Timeline - Proof-of-concept</title> | |
| <!-- That's my local d3 path. When working locally, use your local path. --> | |
| <!--<script src="../../../lib/d3/d3.v3.js"></script>--> |
| /* | |
| d3.phylogram.js | |
| Wrapper around a d3-based phylogram (tree where branch lengths are scaled) | |
| Also includes a radial dendrogram visualization (branch lengths not scaled) | |
| along with some helper methods for building angled-branch trees. | |
| d3.phylogram.build(selector, nodes, options) | |
| Creates a phylogram. | |
| Arguments: | |
| selector: selector of an element that will contain the SVG |
| { "title": "MBTI_3.json", | |
| "name": "MBTI", | |
| "children": [ | |
| { | |
| "name": "E", | |
| "children": [ | |
| { | |
| "name": "EN", | |
| "children": [ |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>Sunburst with Text</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script> | |
| <style type="text/css"> | |
| svg { | |
| font: 10px sans-serif; | |
| } |
See demo http://bl.ocks.org/4241973 for the original
[ Launch: just another inlet to tributary ] 4572769 by biovisualize