IsaKiko / D3-visualising-data

Lesson plans for teaching the basics of HTML, CSS, SVG, JSON, and JS (primarily D3.js), in order to create browser-based data visualisations.
http://isakiko.github.io/D3-visualising-data/
Other
35 stars 35 forks source link

Add a challenge to 07-d3setup #26

Closed Deborah-Digges closed 9 years ago

Deborah-Digges commented 9 years ago

A simple challenge, which will require students to write something like the following code:

<!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    </head>
    <body>
      <div id="example">
        <svg width="100" height="100">
          <circle id = "myCircle" cx="50" cy="50" r="30" ></circle>
        </svg>
      </div>
      <script type="text/javascript">
        var circleDemo = d3.select("#myCircle");
          circleDemo.attr("r", 40);
          circleDemo.style("stroke", "black");
          circleDemo.style("fill", "orange");    
      </script>
    </body>
  </html>
IsaKiko commented 9 years ago

Awesome. We might also need to add an intermediate html file that includes the solution for the lecturer and helpers.

Deborah-Digges commented 9 years ago

@robrkerr : I've made the changes you'd suggested. @IsaKiko I'd be happy to write the solutions for this and other challenges in the lesson.

IsaKiko commented 9 years ago

Perfect, thank you!

And solutions would be great if you have time! :)