svg basics

Same smiley, but now using javascript with an svg container & “setAttribute” to create the objects. Next goal -> animate the stars so that they “twinkle” in some way 🙂

<html>
<head>
<title>SVG Circles</title>

var circlecenter = 100;
var circler = 70

<!– set eye variables –>
var eyer = 12;
var eyey = 80;
var eyecolor = “black”;
var eyeoffset = 20

<!– set star variables–>
var starfill = “white”
var starstroke = “transparent”

var container = document.getElementById(“svgContainer”);
var mySvg = document.createElementNS(“http://www.w3.org/2000/svg”, “svg”);
mySvg.setAttribute(“version”, “1.2”);
mySvg.setAttribute(“baseProfile”, “tiny”);
<!– why does Firefox require me to set attribute rather than get from style? –>
mySvg.setAttribute(“width”,”200px”);
mySvg.setAttribute(“height”,”200px”);
container.appendChild(mySvg);

var backgroundrect = document.createElementNS(“http://www.w3.org/2000/svg”, “rect”);
backgroundrect.setAttribute(“width”, “100%”);
backgroundrect.setAttribute(“height”, “100%”);
backgroundrect.setAttribute(“fill”, “lightsteelblue”);
mySvg.appendChild(backgroundrect);

var smilyhead = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
smilyhead.setAttribute(“cx”, circlecenter);
smilyhead.setAttribute(“cy”, circlecenter);
smilyhead.setAttribute(“r”, circler + 3);
smilyhead.setAttribute(“fill”, “gold”);
mySvg.appendChild(smilyhead);

var smilyhead2 = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
smilyhead2.setAttribute(“cx”, circlecenter);
smilyhead2.setAttribute(“cy”, circlecenter);
smilyhead2.setAttribute(“r”, circler);
smilyhead2.setAttribute(“fill”, “yellow”);
mySvg.appendChild(smilyhead2);

var eye1 = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
eye1.setAttribute(“cx”, circlecenter + eyeoffset);
eye1.setAttribute(“cy”, eyey);
eye1.setAttribute(“r”, eyer);
eye1.setAttribute(“fill”, eyecolor);
mySvg.appendChild(eye1);

var eye2 = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
eye2.setAttribute(“cx”, circlecenter – eyeoffset);
eye2.setAttribute(“cy”, eyey);
eye2.setAttribute(“r”, eyer);
eye2.setAttribute(“fill”, eyecolor);
mySvg.appendChild(eye2);

var smile = document.createElementNS(“http://www.w3.org/2000/svg”, “path”);
smile.setAttribute(“d”, “M 75 105 C 80 140, 95 150, 115 120”);
smile.setAttribute(“stroke”, “black”);
smile.setAttribute(“stroke-width”, “4”);
smile.setAttribute(“fill”, “transparent”);
mySvg.appendChild(smile);

var star1 = document.createElementNS(“http://www.w3.org/2000/svg”, “polygon”);
star1.setAttribute(“points”, “117 70 118 74 121 74 119 76 120 79 117 77 114 79 115 76 113 74 116 74”);
star1.setAttribute(“stroke”, starstroke);
star1.setAttribute(“fill”, starfill);
mySvg.appendChild(star1);

var star2 = document.createElementNS(“http://www.w3.org/2000/svg”, “polygon”);
star2.setAttribute(“points”, ” 77 70 78 74 81 74 79 76 80 79 77 77 74 79 75 76 73 74 76 74″);
star2.setAttribute(“stroke”, starstroke);
star2.setAttribute(“fill”, starfill);
mySvg.appendChild(star2);
}
</script>
</head>
<body>
<div id=”svgContainer”></div>
</body>
</html>

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)

<!–?xml version=”1.0″ standalone=”no”?>

<!– Points –>

<!–svg>

# step 2 – curves! Now he can smile. The offset was intended.

<!–?xml version=”1.0″ standalone=”no”?>

<!– Points –>

</svg>

And… polygons! With starry eyes!

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 :).

—————-

<!– Points –>

<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.

learning dynamic data viz

a journey in html, svg, css, javascript & d3

learning: #2 – create smiley using javascript to create the SVG objects

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