d3mo/force.html at main · kaizer1v/d3mo · 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
<!--
This is an experiment on using d3's force layout. I am using our team as the data set.

TODO
1. ✅ ISSUE: the "by-everyone" button does not reset the force layout
2. ISSUE: the "by-alumni" button does not filter the nodes where `quit = true`
3. ISSUE: the "by-joining-date" button does not position the circles based on the joining date without using the force layout
4. ISSUE: the "by-location" button does not position the circles based on the location without using the force layout
2. background images for each category (india map, scm map etc.)
3.

-->
<html>
<head>
  <style>
    body {
      font-family: 'Arial', sans-serif;
    }

    svg {
      /* position: fixed; */
      top: 150;
      width: 90vw;
      height: 90vh;
      border: 1px solid #000;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    </style>
</head>
<body>

  <div>
    <h1>This is SCM UX</h1>
    <button id='by-everyone'>👏 this is us</button>
    <button id='by-hub'>💪 our hubs</button>
    <button id='by-from'>🌏 where they are from</button>
    <button id='by-joining-date'>⏰ since how long have we been here</button>
    <button id='by-interests'>🤔 what we are interested in</button>
    <button id='by-bday'>🥳 our birth months</button>
    <button id='by-alumni'>😔 our alumni</button>

    <!-- <input type="range" id="charge" min="-10" max="100" value="30" step="1" />
    <label for="charge">Radial Charge</label> -->
  </div>

  <div>
    <svg id="playground"></svg>
  </div>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="ux_team.js"></script>
</body>
</html>