EotW - Final Char Appear by Chap
THIS IS FINAL GRAPH TO PUT IN WEBSITE. Working on list of chars...
by Nivaldo
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<h1>The Eye of the World <span style="font-size: 12px">(by Robert Jordan)</span></h1>
<h3>- New Character Appearance By Chapter</h3>
<div id="wot-graph"></div>
<form>
<input type="radio" name="wot" id="one" value="one" />new characters in chapter<br/>
<input type="radio" name="wot" id="two" value="two" />cumulative no. of new characters<br/>
<input type="radio" name="wot" id="four" value="four" checked />new characters in chapter (all chapters)<br/>
<input type="radio" name="wot" id="three" value="three" />cumulative no. of new characters (all chapters)
</form>
<h4 style="padding-top: 0px">Total of 90 characters.</h4>
CSS
body {
font: 11px sans-serif;
background-color: antiquewhite;
}
svg {
background-color: antiquewhite;
}
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
div.tooltip {
position: absolute;
text-align: left;
padding: 8px;
font: 10px Verdana;
background: lightsteelblue;
border: 1px solid;
border-radius: 8px;
box-shadow: 5px 5px 2.5px #888888;
pointer-events: none;
}
JavaScript
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = 900 - margin.left - margin.right;
var height = 120 - margin.top -margin.bottom;
var w = width;
var h = height;
var data = [
{"val":1,"key":"Pr","children":[{"name":"Ishamael"}]},
{"val":7,"key":"1","children":[
{"name":"Mistress al'Donel"},
{"name":"Cenn Buie"},
{"name":"Daise Congar"},
{"name":"Matrim Cauthon"},
{"name":"Rand al'Thor"},
{"name":"Tam al'Thor"},
{"name":"Wit Congar"}
]},
{"val":7,"key":"2","children":[
{"name":"Adan Alcaar"},
{"name":"Alsbet Luhhan"},
{"name":"Dag Coplin"},
{"name":"Ewin Finngar"},
{"name":"Marin al'Vere"},
{"name":"Moiraine"},
{"name":"Rowan Hurn"}
]},
{"val":4,"key":"3","children":[
{"name":"Egwene al'Vere"},
{"name":"Padan Fain"},
{"name":"Nynaeve al'Meara"},
{"name":"Perry Aybara"}
]},
{"val":1,"key":"4","children":[
{"name":"Thom Merrilin"}
]},
{"val":0,"key":"5","children":[]},
{"val":0,"key":"6","children":[]},
{"val":2,"key":"7","children":[
{"name":"Berin Thane"},
{"name":"Calder"}
]},
{"val":2,"key":"8","children":[
{"name":"Bandry Crawe"},
{"name":"Lem Thane"}
]}
,
{"val":2,"key":"9","children":[
{"name":"Paet Alcaar"},
{"name":"Wil Alcaar"}
]},
{"val":0,"key":"10","children":[]},
{"val":0,"key":"11","children":[]},
{"val":0,"key":"12","children":[]},
{"val":6,"key":"13","children":[
{"name":"Avin"},
{"name":"Fitch"},
{"name":"Heran Adan"},
{"name":"Kari Thane"},
{"name":"Lara Ayellan"},
{"name":"Mutch"}
]},
{"val":4,"key":"14","children":[
{"name":"Ara"},
{"name":"Cinda"},
{"name":"Mari"},
{"name":"Min Farshaw"}
]},
{"val":4,"key":"15","children":[
...