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