| license: mit |
| var SAMPLE_COUNT = 13; | |
| var NAME_AREA_WIDTH = 450; | |
| function initialize(elementId) { | |
| var margin = {top: 150, bottom: 50, left: 25, right: 50}; | |
| var svgWidth = $(elementId).width(); | |
| var svgHeight = $(elementId).height(); | |
| var width = svgWidth - (margin.left + margin.right); | |
| var height = svgHeight - (margin.top + margin.bottom); |
| license: gpl-3.0 | |
| height: 600 |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Nautiloid</title> | |
| <link type="text/css" rel="stylesheet" href="nautiloid.css"/> | |
| <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="./nautiloid.js"></script> | |
| </head> |
| [{"week":8,"length":1.6,"mass":1}, | |
| {"week":9,"length":2.3,"mass":2}, | |
| {"week":10,"length":3.1,"mass":4}, | |
| {"week":11,"length":4.1,"mass":7}, | |
| {"week":12,"length":5.4,"mass":14}, | |
| {"week":13,"length":7.4,"mass":23}, | |
| {"week":14,"length":8.7,"mass":43}, | |
| {"week":15,"length":10.1,"mass":70}, | |
| {"week":16,"length":11.6,"mass":100}, | |
| {"week":17,"length":13,"mass":140}, |
| <!DOCTYPE html> | |
| <html > | |
| <head> | |
| <title>Sierpinski</title> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> | |
| <div class="chart"></div> |
| <!DOCTYPE html> | |
| <html > | |
| <head> | |
| <title>Faces</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="chart"></div> |
| { | |
| "name": "flare", | |
| "children": [ | |
| { | |
| "name": "analytics", | |
| "children": [ | |
| { | |
| "name": "cluster", | |
| "children": [ | |
| {"name": "AgglomerativeCluster", "size": 3938}, |
This example is a slight modification from Mike Bostock's bar chart example.
d3Kit was used to construct the <svg> and setup all the margins.
This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>d3Kit.Skeleton</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="chart"></div> |