HowToGuide/lineGraph.html at master · fitzk/HowToGuide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>Line Graph</title>
    <link rel="stylesheet" type="text/css" href="allStyle.css" />
    <link rel="stylesheet" type="text/css" href="https://codemirror.net/theme/solarized.css" />
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="CodeMirror/lib/codemirror.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
    <script src="lineGraph.js"></script>
  </head>
  <body>
    <aside>
      <ul>
        <li>
          <a href="main.html">Home</a>
        </li>
        <li>
          <a href="start.html">Getting Started</a>
        </li>
        <li>
          <a href="svg.html">SVG</a>
        </li>
        <li>
          <a href="scales.html">Scales</a>
        </li>
        <li>
          <a href="lineGraph.html">Line Graph</a>
        </li>
      </ul>
    </aside>
    <section>
      <header>Creating a Line Graph with JSON Data</header>
      <p>This example will explain how to use D3&#39;s request methods to retrieve asynchronis data and then create a line graph.
      The data will come from Githubs API and will consist of the number of commits by all users in the last 52 weeks on a specific
      library. Some of the code for the line graph was sourced from
      <a href="http://www.d3noob.org/2012/12/starting-with-basic-d3-line-graph.html">d3noob.org</a>, but modified for this example.
      I highly encourage you to take a look at the original graph and the other tutorials on
      <a href="http://www.d3noob.org/2012/12/starting-with-basic-d3-line-graph.html">d3noob</a>.</p>
      <h1>Getting Data</h1>
      <p>Data can be sorced locally or you can retrieve it from an external website by making an ()request. D3 works with many data
      formats and has built in request methods to specifically retrieve certain formats. The data that we will be using in this
      example is a JSON object.</p>
      <div id="isGraph"></div>
      <script src="graph.js"></script>
      <div class="outerDiv">
        <textarea rows="4" cols="20" id="lg1">
		&lt;script&gt;
                var site = &quot;https://api.github.com/repos/mbostock/d3/stats/participation&quot;;

                d3.json(site2, function(error, data) {

                }
        &lt;/script&gt;

               </textarea>
      </div>
    </section>
  </body>
</html>