our-project-starter-d3/index.html at master · marguerrrite/our-project-starter-d3 · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <!-- Setting the viewport enables you to control the width and scaling of the viewport ie. for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Title and description are important for SEO. And <title> is what is rendered in the browser tab name. -->
    <title>D3.js Starter</title>
    <meta name="description" content="The site for our project!">
    <link rel="icon" type="image/png" href="images/oscar-icon.png">

    <!-- Styles and scripts -->
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <div class="container">
        <div class="content">
            <h1>
                Hello world!
            </h1>
            <h2>
                Huzzah! We’re up and running with <a href="https://d3js.org/">D3.js</a>.
            </h2>
            <p>
                <h4>
                    Awesome D3.js resources:
                </h4>
                <ul>
                    <li>
                        <a href="https://www.newline.co/fullstack-d3"
                            target="_blank"
                            rel="noopener noreferrer">
                            Fullstack D3</a> book by Amelia Wattenberger
                    </li>
                    <li>
                        <a href="https://www.newline.co/fullstack-d3"
                            target="_blank"
                            rel="noopener noreferrer">
                            How to learn D3.js</a> article by Amelia Wattenberger
                    </li>
                    <li>
                        <a href="https://bl.ocks.org/"
                            target="_blank"
                            rel="noopener noreferrer">
                            D3 Block</a> Examples
                    </li>
                    <li>
                        <a href="https://alignedleft.com/work/d3-book-2e"
                            target="_blank"
                            rel="noopener noreferrer">
                            Interactive Data Visualization for the Web</a> book by Scott Murray
                </ul>
            </p>
            <div class="download-link">
                <a href="https://github.com/margueriteroth/our-project-starter-d3" target="_blank"
                    rel="noopener noreferrer">
                    <button>
                        Download this starter from Github
                    </button>
                </a>
            </div>
        </div>
        <div class="chart">
            <div id="wrapper">
                <div id="tooltip"></div>
            </div>
        </div>
    </div>
</body>
<!-- Linking your scripts.js here after the DOM has loaded to allow element targeting with d3. -->
<script src="lib/d3/d3.min.js"></script>
<script src="scripts.js"></script>
</html>