D3.js-Charts/svg.html at master · shellyscheng/D3.js-Charts · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <style>
      svg {
        background: #f9f9f9;
        display: block;
        margin: 0 auto;
      }

      h1 { margin-bottom: 2rem; }

      body {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }

      h3 { margin-top: 3rem; }

      .container {
        max-width: 46rem;
      }
    </style>
  </head>
  <body>
  <div class="container">
    <h1>First steps with SVG</h1>

    <p>Before we become best friends with our new buddy D3, we need to learn SVG, <strong>Scalable Vector Graphics</strong>. It's the technology that D3 is (kind of, somewhat, mostly) built on.</p>

    <p>There are <strong>multiple hints</strong> for each graphic inside of the <code>hints/</code> directory. Each problem has an associated text file.</p>

    <h3>1. A single circle</h3>

    <p>I don't like this circle very much.</p>

    <p>Make it have a radius of 30, and make it blue instead of pink.</p>

    <svg height="200" width="200">
      <circle cx="100" cy="100" fill="pink" r="30">
    </svg>

    <h3>2. A few little squares</h3>

    <p>I don't like these squares very much, either - they're way too disorganized. Line them up on the <strong>left-hand side of the grey area</strong>, and make them <strong>orange</strong>.</p>

    <svg height="200" width="200">
      <rect x="0" y="5" width="20" height="20" fill="orange"></rect>
      <rect x="0" y="115" width="20" height="20" fill="orange"></rect>
      <rect x="0" y="30" width="20" height="20" fill="orange"></rect>
    </svg>


    <h3>3. A few little rectangles</h3>

    <p>Line these rectangles up evenly across the bottom of the page - one in the bottom left corner, one in the bottom center, one in the bottom right corner. The red one should be the one in the middle. Do <strong>not</strong> let them go off of the page.</p>

    <svg height="200" width="200">
      <rect x="80" y="180" width="20" height="20" fill="darkred"></rect>
      <rect x="0" y="180" width="20" height="20" fill="teal"></rect>
      <rect x="180" y="180" width="20" height="20" fill="teal"></rect>
    </svg>

    <h3>4. A few little circles</h3>

    <p>Line these circles up evenly across the bottom of the page - one in the bottom left corner, one in the bottom center, one in the bottom right corner. Do <strong>not</strong> let them go off of the page.</p>

    <p>Also, make them the color <a href="https://www.google.com/search?q=%23EE599A">#EE599A</a>.</p>

    <svg height="200" width="200">
      <circle cx="20" cy="180" r="20" fill="#EE599A"></circle>
      <circle cx="100" cy="180" r="20" fill="#EE599A"></circle>
      <circle cx="180" cy="180" r="20" fill="#EE599A"></circle>
    </svg>

    <h3>5. Broken circles</h3>

    <p>Below should be a <strong>red circle above a purple circle</strong>. What is wrong with my code? Fix it.</p>

    <svg height="200" width="200">
      <circle cx="100" cy="50" r="30" fill="#ff0000"></circle>
      <circle cx="100" cy="150" r="30" fill="#cc00cc"></circle>
    </svg>


    <h3>6. Spending time at the bar</h3>

    <p>I have a few cities.</p>

    <ul>
      <li>The first city has 5 people in it,</li>
      <li>The second city has 23 people in it,</li>
      <li>The third city has 75,</li>
      <li>and the fourth city has 80.</li>
    </ul>

    <p>Turn the SVG below into a visualization where you relate the <strong>data attribute</strong> of population to the <strong>visual attribute</strong> of bar length.</p>

    <svg height="200" width="200">
      <rect x="0" y="30" width="5" height="20"></rect>
      <rect x="0" y="70" height="20" width="23"></rect>
      <rect x="0" y="110" width="75" height="20"></rect>
      <rect x="0" y="150" height="20" width="80"></rect>
    </svg>

    <h3>7. Spending too much time at the bar</h3>

    <p>You probably didn't use most of the graph area. Do it again, but use more of the width of the graph area.</p>

    <svg height="200" width="200">
      <rect x="0" y="30" width="10" height="20"></rect>
      <rect x="0" y="70" width="46" height="20"></rect>
      <rect x="0" y="110" width="150" height="20"></rect>
      <rect x="0" y="150" width="160" height="20"></rect>
    </svg>

    <h3>8. Walking around in circles</h3>

    <p>I have 3 cities: City One, City Two, and City Three.</p>

    <ul>
      <li>City One has <strong>100 people</strong></li>
      <li>City Two has <strong>200 people</strong></li>
      <li>City Three has <strong>400 people</strong></li>
    </ul>

    <p>The circle on the left is sized appropriately for City One. <strong>Resize the other two circles for the other two cities</strong>. (If you do it correctly, they won't overlap.)</p>

    <svg height="200" width="200">
      <circle cx="50" cy="100" r="10"></circle>
      <circle cx="100" cy="100" r="14.14"></circle>
      <circle cx="150" cy="100" r="20"></circle>
    </svg>

    <h3>9. Labels</h3>
    <p>There are three kinds of pets in the world: cats, dogs and mice.</p>

    <ul>
      <li><strong>1 person</strong> owns a mouse</li>
      <li><strong>5 people</strong> own cats</li>
      <li><strong>10 people</strong> own dogs</li>
    </ul>

    <p>Make a standard bar graph out of this, where the data attribute <strong>count of people</strong> is visually represented by <strong>height of the mark</strong>. I want each bar labeled with the animal it stands for, and I want the longest bar to be 140 pixels tall.</p>

    <p>Make the cats bar and the cats text a dark red color, because I'm partial to cats. Make the other bars grey to just fade them out a bit, too.</p>

    <svg height="200" width="200">
      <text text-anchor="middle" y="15" x="100">Kinds of pets</text>
      <rect x="40" y="156" width="20" height="14" fill="grey"></rect>
      <rect x="90" y="100" width="20" height="70" fill="darkred"></rect>
      <rect x="140" y="30" width="20" height="140" fill="grey"></rect>
      <text x="135" y="190" fill="grey">Dogs</text>
      <text x="85" y="190" fill="darkred">Cats</text>
      <text x="35" y="190" fill="grey">Mice</text>
    </svg>
  </body>
</html>