appendix-d

appendix D Exercise solutions

 

D.1 Solutions chapter 1

D.1.1 Build an SVG graphic

Listing D.1 Building an SVG graphic (index.html)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Exercise | D3.js in Action</title>
</head>
<body>
  <div style="width:100%; max-width:400px; margin:0 auto;">
    <svg viewBox="0 0 400 400" style="border:1px solid black;">

      <rect x="100" y="100" width="200" height="200" fill="transparent" 
       stroke="black" stroke-width="5" />

      <circle cx="200" cy="200" r="100" fill="plum" />

      <line x1="100" y1="100" x2="300" y2="300" stroke="black" 
       stroke-width="5" />
      <line x1="100" y1="300" x2="300" y2="100" stroke="black" 
       stroke-width="5" />

      <text x="200" y="90" text-anchor="middle" style="font-size:18px; 
       font-family:sans-serif">SVG is awesome!</text>

    </svg>
  </div>
</body>
</html>

D.2 Solutions chapter 6

D.2.1 Build a pyramid chart

D.2.2 Append axes to the violin charts

D.2.3 Add the interquartile ranges and the mean values to the violin plots

D.3 Solutions chapter 7

D.3.1 Create the axis and append the circles to the scatterplot

D.3.2 Create a tooltip

D.4 Solutions chapter 8

D.4.1 Bar chart

D.4.2 Ranking badges

D.5 Solutions chapter 9

D.5.1 Change the orientation of the bar chart on mobile

D.6 Solutions chapter 10

D.6.1 Create SVG patterns

D.7 Solutions chapter 11

D.8 Solutions chapter 12

D.9 Solutions chapter 13

D.10 Solutions chapter 14

D.11 Solutions chapter 15