Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Add a hydrograph to your website
How to use:
- Include d3 and this file in the header.
<script src="lib/d3/d3.min.js"></script> <script src="src/graph-scatterChart.js"></script>
- Create a
<div>element in your html to place the chart inside. You can set its size here, or programmatically.
- In a script, select the div and assign a reference to it.
var graphDiv = d3.select("#graph_div");
- Create an instance of the scatterChart
var myChart = scatterChart();
- Create your dataset. It should be an array of timeseries. Each timeseries should be an array of measurements. Each measurement should be an array with a Date object and the stream discharge.
var time = new Date(2017, 0, 1); var discharge = 45.1; var meas = [time, discharge]; var timeseries = [meas, meas, meas, meas]; var dataset = [timeseries, timeseries]; var myData = [[[time, 45], [time.setDate(time.getDate()+1, 32], [time.setDate(time.getDate()+2, 87], [time.setDate(time.getDate()+3, 95]]];
- Assign some data to your div using the datum method if you plan to have a static graph.
- Call the graph function on the div. It will return a chart object that you can modify later on.
Take a look at example-hydrograph.html for a working copy!