Added axis considerations, data loading via picklist and styles.
Pulled a lot of great animation functionality from this blog post
http://big-elephants.com/2014-06/unrolling-line-charts-d3js/
xxxxxxxxxx<html> <head> <title>D3 Timeseries</title> <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript" src="data.js"></script> <link rel="stylesheet" type="text/css" href="lineGraph.css"/> </head> <body> <div id="graph-title">Basic Updatable D3 Timeseries</div> <div id="graph-picklist-wrapper"> <text>View</text> <select id="graph-picklist-y" class="graph-picklist" onchange="refreshGraph()"> <option value="numberOfThings" selected>Number of Things</option> <option value="percentageOfThings">% Utility</option> <option value="priceOfThings">Cost Of Things</option> </select> <text>By</text> <select id="graph-picklist-x" class="graph-picklist" onchange="refreshGraph()"> <option value="weekly" selected>Week</option> <option value="monthly">Month</option> <option value="quarterly">Quarter</option> </select> </div> <div id="graph-container"></div> </body> <script type="text/javascript" src="lineGraph.js"></script></html> https://d3js.org/d3.v3.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js