documenting my journey learning dynamic visualization on the web: SVG/javascript/HTML/CSS/D3 – step 1 – draw a smily face!

On the advice of several wise people, I’m starting by learning the foundations.  When they get tedious, then I’ll appreciate & understand the ways that d3 makes things easier.  I hear that I’ll probably still curse it sometimes, but hopefully will curse with more appreciation 🙂

[an aside on pedagogy] As a former high school math teacher, one of my greatest critiques of how we teach math is that we don’t spend enough time doing the boring stuff which might help students crave & desire the algorithms that will make things easier instead of hating (and not understanding) those algorithms.  For example, the quadratic formula should be the salvation from tedious ‘completing the square’ rather than being an arbitrary formula that you memorize with a song as a mnemonic.  It’s also a great chance to demonstrate deriving formulas and start building the foundation for proofs. Perhaps if we spent longer on the manual task & then led students to the derivation, then the algorithm would seem less arbitrary and students would experience the mathematics process (of abstraction) and sense of discovery.  One of my favorite days teaching of all time was when I set the stage for three students, who didn’t like math much, to together discover the quadratic formula.  [end of aside]

So, with that background, I’m ready to dive into writing a lot of repetitive code to understand the core of what’s going on with SVG & javascript.

Day #1 goal: create a smily face with SVG elements.

step 1 – worried smiley (background, circles, lines)

worriedsmiley

<!–?xml version=”1.0″ standalone=”no”?>
<svg width=”200px” height=”200px” version=”1.1″ xmlns=”http://www.w3.org/2000/svg“>
  <!– Points –>
  <rect width=”100%” height=”100%” fill=”lightsteelblue”/>
  <circle cx=”100″ cy=”100″ r=”73″ fill=”gold”/>
  <circle cx=”100″ cy=”100″ r=”70″ fill=”yellow”/>
  <circle cx=”120″ cy=”80″ r=”12″ fill=”black”/>
  <circle cx=”80″ cy=”80″ r=”12″ fill=”black”/>
  <path d=”M 80 105 L 110 120″ stroke=”black” stroke-width=”3″/>
<!–svg>
# step 2 – curves!  Now he can smile.  The offset was intended.
screenshot-from-2013-07-19-150458.png

<!–?xml version=”1.0″ standalone=”no”?>
<svg width=”200px” height=”200px” version=”1.1″ xmlns=”http://www.w3.org/2000/svg“>
  <!– Points –>
  <rect width=”100%” height=”100%” fill=”lightsteelblue”/>
  <circle cx=”100″ cy=”100″ r=”73″ fill=”gold”/>
  <circle cx=”100″ cy=”100″ r=”70″ fill=”yellow”/>
  <circle cx=”120″ cy=”80″ r=”12″ fill=”black”/>
  <circle cx=”80″ cy=”80″ r=”12″ fill=”black”/>
  <path d=”M 75 105 C 80 140, 95 150, 115 120″ stroke=”black” stroke-width=”4″ fill = “transparent”/>
</svg>
And… polygons!  With starry eyes!

Screenshot from 2013-07-19 16:08:39

figured out an algorithm for creating a star from 4 variables (x start, y start, and the sides of a right triangle that makes up half of each sticking-out-part of the start).  :).  Will come in handy when I define the variables in javascript (instead of calculating & copying/pasting).  There are probably better algorithms, though :).
—————-
<svg width=”200px” height=”200px” version=”1.1″ xmlns=”http://www.w3.org/2000/svg“>
  <!– Points –>
  <rect width=”100%” height=”100%” fill=”lightsteelblue”/>
  <circle cx=”100″ cy=”100″ r=”73″ fill=”gold”/>
  <circle cx=”100″ cy=”100″ r=”70″ fill=”yellow”/>
  <circle cx=”120″ cy=”80″ r=”12″ fill=”black”/>
  <circle cx=”80″ cy=”80″ r=”12″ fill=”black”/>
  <path d=”M 75 105 C 80 140, 95 150, 115 120″ stroke=”black” stroke-width=”4″ fill = “transparent”/>
  <polygon points= ” 117  70 118  74 121  74 119  76 120  79 117  77 114  79 115  76 113  74 116
  74″ stroke = “transparent” fill = “white” stroke-width = “0”/>
  <polygon points= ” 77 70 78 74 81 74 79 76 80 79 77 77 74 79 75 76 73 74 76 74″ stroke = “transparent” fill = “white” stroke-width = “0”/>
</svg>
next step –> switch from creating svg objects with SVG to creating them with javascript.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s