blooming-data/index.html at master · joefhall/blooming-data · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blooming data - Who funds which user-led organisations? - 360 Giving data visualisation challenge</title>
  <meta name="title" content="Blooming data - Who funds which user-led organisations? - 360 Giving data visualisation challenge">
  <meta name="description" content="A beautiful way to visualise which funders are supporting the growth of user-led charities and groups">
  <link rel="canonical" href="http://52.56.180.213/blooming-data/" />

  <meta name="twitter:title" content="Blooming data - Who funds which user-led organisations? - 360 Giving data visualisation challenge">
  <meta name="twitter:description" content="A beautiful way to visualise which funders are supporting the growth of user-led charities and groups">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="http://52.56.180.213/blooming-data/img/share.jpg">
  <meta name="twitter:site" content="@joefhall">
  <meta name="twitter:creator" content="@joefhall">

  <meta property="og:type" content="website" />
  <meta property="og:title" content="Blooming data - Who funds which user-led organisations? - 360 Giving data visualisation challenge" />
  <meta property="og:description" content="A beautiful way to visualise which funders are supporting the growth of user-led charities and groups">
  <meta property="og:url" content="http://52.56.180.213/blooming-data/" />
  <meta property="og:image" content="http://52.56.180.213/blooming-data/img/share.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link href="https://fonts.googleapis.com/css?family=Kanit:100" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/nice-select.css">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  <script src="js/flowers.js"></script>
  <script src="js/funding.js"></script>
  <script src="js/jquery.nice-select.js"></script>
  <script src="js/loading.js"></script>
  <script src="js/piecharts.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/user-agents.js"></script>
  <script src="js/video.js"></script>
</head>
<body class="bg-black">

  <div class="container-fluid h-100">

    <div class="row w-100 h-100 justify-content-center align-items-center">
      <div id="vis-holder" class="col-xs-12 visualisation position-relative">
        <div id="loading" class="position-absolute visualisation">
          <div class="container-fluid h-100">
            <div class="row w-100 h-100 justify-content-center align-items-center">
              <div id="loading-message">
                <h1 class="text-center text-white">
                  Loading
                </h1>
                <img src="img/loading.gif" alt="Loading">
              </div>
              <div id="start">
                <button id="start-button">
                  Start
                </button>
                <span id="warning"></span>
              </div>

            </div>
          </div>
        </div>
        <div id="controls" class="position-absolute">
          <div id="controls-title">
            User-led organisations
          </div>
          <div id="controls-themes" class="mb-3">
            led by
            <div class="d-inline-block">
              <select id="themes">
                <option value="">anyone</option>
              </select>
            </div>
          </div>
          <div id="controls-funders" class="mb-4">
            funded by
            <div class="d-inline-block">
              <select id="funders">
                <option value="">anyone</option>
              </select>
            </div>
          </div>
          <div id="controls-buttons">
            <button id="update-button">
              Play this
            </button>
            <button id="autoplay-all-button" class="highlighted">
              Autoplay random
            </button>
          </div>
        </div>
        <div id="audio-controls" class="position-absolute">
          <button id="audio-button" class="highlighted">
            Background music
          </button>
        </div>
        <video id="video" muted="true" class="visualisation position-absolute" poster="" playsinline>
          <source src="video/flowers-blooming.mp4" type="video/mp4" poster="data:image/gif,AAAA">
        </video>
        <div id="chart-holder" class="position-absolute">
          <canvas id="chart"></canvas>
        </div>
        <div id="chart-tooltip" class="position-absolute">
          Tap or hover over flower graph to see details
        </div>
      </div>

      <div id="credits" class="px-2">
        Visualisation by Joe Hall, licensed under Creative Commons Attribution 4.0, <a href="https://github.com/joefhall/blooming-data" target="_blank">find code on GitHub.</a>
        2017 data, grants in British Pounds, from <a href="http://grantnav.threesixtygiving.org/" target="_blank">360 Giving Grant Nav</a> searching for 'user-led' + key words 'asylum refugee', 'children', 'disab', 'elderly', 'ethnic', 'mental', 'women'.
        Creative Commons video clips thanks to <a href="https://www.youtube.com/watch?v=izMp_lb0fp4" target="_blank">GalaxyMikeDE</a>,
        <a href="https://www.youtube.com/watch?v=Ffum95408aM" target="_blank">anastasia moraiti</a>,
        <a href="https://www.youtube.com/watch?v=v0vBV6YjA7E" target="_blank">TheChokAAA</a>,
        <a href="https://www.youtube.com/watch?v=x9dfbFbGCdA" target="_blank">Awesome Video</a>.
        Creative Commons 'Relaxing Piano Music' thanks to <a href="https://incompetech.com/music/royalty-free/index.html?collection=27" target="_blank">Kevin MacLeod / Incompetech</a>.
      </div>
    </div>

  </div>

  <audio id="background-music" autoplay loop preload="none">
    <source src="audio/background-music.mp3" type="audio/mpeg">
  </audio>

</body>
</html>