d3tutorial/index.html at master · yiinan/d3tutorial · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 tutorial</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </head>
  <body style="background-color: aliceblue; padding:3em;">
    <div class="card card-outline-primary col-10 mx-auto text-center" >
  <div class="card-block">
      <h1 style="font: bold 3em monospace"><a href="https://d3js.org">D3.js</a> Tutorial</h1>
  </div>
</div>

  </body>
  <script>
  path = './solutions/'
  let exercises = [
    {
      title: 'Exercise 1',
      description: 'Print 1,2,3 on a SVG canvas',
      filename: 'exercise1.html'
    },
    {
      title: 'Exercise 2',
      description: 'create a 4x4 half-square with the numbers from 0 to 9',
      filename: 'exercise2.html'
    },
    {
      title: 'Exercise 3',
      description: 'How to make responsive visualizations.',
      filename: 'exercise3.html'
    },
    {
      title: 'Exercise 4',
      description: 'Overview on ENTER, UPDATE and EXIT selections',
      filename: 'exercise4.html'
    },
    {
      title: 'WIP-Exercise 5',
      description: 'Scales and colors schemes, unfotunately incomplete as of now.',
      filename: 'exercise5.html'
    },
    {
      title: 'Exercise 6',
      description: 'Asynchronous operations. External data.',
      filename: 'exercise6.html'
    },
    {
      title: 'WIP-Exercise 7',
      description: 'Visualize the Doodle data as a pie-chart! Coming soon!',
      filename: 'exercise7.html'
    },
  ]

  let main = d3.select('body').append('main')
  let cards = main.selectAll('div').data(exercises).enter().append('div')
      .attr('class', 'card card-inverse col-10 mx-auto')
      .style('background-color', (_,i)=> d3.schemeCategory10[i])
      .style('border-color', (_,i)=> d3.schemeCategory10[i])
  .append('a')
      .attr('href', d=> path+d.filename)
    .append('div')
      .attr('class', 'card-block text-center')

  cards.append('h3')
      .attr('class', 'card-title')
      .text(d=>d.title)

  cards.append('p')
      .attr('class', 'card-text')
      .text(d=>d.description)


  </script>
</html>