EotW - Final Char Appear by Chap

THIS IS FINAL GRAPH TO PUT IN WEBSITE. Need to clean up refresh code.

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 style="padding-bottom: 10px">
    <div>Not including chapters without character appearances:<br/>
        <input type="radio" name="wot" id="one" value="one" />no. of new characters in chapter<br/>
        <input type="radio" name="wot" id="two" value="two" />cumulative no. of new characters in chapter
    </div>
    <div style="padding-top: 15px">Including chapters without character appearances:</br>
        <input type="radio" name="wot" id="four" value="four" checked />no. of new characters in chapter<br/>
    <input type="radio" name="wot" id="three" value="three" />cumulative no. of new characters in chapter
    </div>
</form>

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"},
    {"val":6,"key":"1"},
    {"val":7,"key":"2"},
    {"val":4,"key":"3"},
    {"val":1,"key":"4"},
    {"val":0,"key":"5"},
    {"val":0,"key":"6"},
    {"val":2,"key":"7"},
    {"val":2,"key":"8"},
    {"val":2,"key":"9"},
    {"val":0,"key":"10"},
    {"val":1,"key":"11"},
    {"val":0,"key":"12"},
    {"val":6,"key":"13"},
    {"val":4,"key":"14"},
    {"val":4,"key":"15"},
    {"val":2,"key":"16"},
    {"val":3,"key":"17"},
    {"val":0,"key":"18"},
    {"val":0,"key":"19"},
    {"val":0,"key":"20"},
    {"val":0,"key":"21"},
    {"val":0,"key":"22"},
    {"val":0,"key":"23"},
    {"val":1,"key":"24"},
    {"val":1,"key":"25"},
    {"val":1,"key":"26"},
    {"val":0,"key":"27"},
    {"val":0,"key":"28"},
    {"val":0,"key":"29"},
    {"val":4,"key":"30"},
    {"val":4,"key":"31"},
    {"val":4,"key":"32"},
    {"val":9,"key":"33"},
    {"val":2,"key":"34"},
    {"val":1,"key":"35"},
    {"val":0,"key":"36"},
    {"val":0,"key":"37"},
    {"val":0,"key":"38"},
    {"val":2,"key":"39"},
    {"val":6,"key":"40"},
    {"val":1,"key":"41"},
    {"val":0,"key":"42"},
    {"val":0,"key":"43"},
    {"val":0,"key":"44"},
    {"val":0,"key":"45"},
    {"val":1,"key":"46"},
    {"val":6,"key":"47"},
    {"val":0,"key":"48"},
    {"val":0,"key":"49"},
    {"val":0,"key":"50"},
    {"val":2,"key":"51"},
    {"val":0,"key":"52"},
    {"val":0,"key":"53"}
];

//Create SVG element
var svg = d3.select("#wot-graph")
    .append("svg")
    .attr("id","chart")
    .attr("width", w)
    .attr("height", h + 40)
    .attr("viewBox","0 0 " + w + " " + (h + 40))
    .attr("perserveAspectRatio","xMinYMid");

var xScale,yScale;

var tooltip = d3.select("body")
      .append("div")
        .attr("class", "tooltip")
        .style("position", "absolute")
     ...