data visualization
sarc5400
Technical Exercise

Due - Tuesday March 22, 2016

see the article

This is a technical exercise, intended for you to experiment, test, try out, and explore visual HTML structures.

Using Brackets and the HTML, SVG, CSS techniques that we have covered in class, reproduce as best as you are able the "Land guzzlers" visual of the New Scientist article on ecological footprints.

http://www.good.is/posts/is-owning-a-dog-worse-than-owning-an-suv/

There are many different techniques and approaches that could be used for this, and there is not a single one that is "right", but I strongly suggest that you approach this through writing SVG elements, attributes, and CSS style classes to achieve the most complete and flexible vector graphics output possible.

Try to get the sizes right. Using rectangular area, find a scaling mechanism to convert the numbers in Hectares into an appropriate rectangular size to get the scales visually effective. There is a data file in the Collab site > Resources > Examples to help with the numbers.

It is NOT required that you approach this procedurally. Though we have been looking at some procedural techniques (D3) toward drawing from data, at this stage you can simply plug in the numbers manually. If you want to challenge yourself, though, feel free to produce this in D3. You might want to try it first manually, and then procedurally. This is an exercise - intended to "exercise" your code skills.

You will need to use a combination of HTML and SVG objects, and best practice is to also use CSS styles and classes (for things which are similar). Consider what might be the best way to organize this visual. Structure an approach to how you can concisely describe its elements and layouts through style classes and definitions. Is there a single class that you can create and apply to many objects for all text of a certain type. Can you find certain parameters of the rectangular areas that are common and could become a class (like the white border)? Other unique properties can be controlled individually.

You do not need to get this perfect, but try to get it as close as you can.

As you are working through this, you might take advantage of the web design reference site w3schools: www.w3schools.com, which has an excellent set of references and tutorials to help you through the language and object syntax. Take advatage of the SVG Tutorial and the HTML Tag Reference, as well as the CSS Tutorial.

Remember that all examples from class are also on the Collab site for your reference.

Turn this in as an HTML file within the Collab assignment submission for this assignment. We will not be reviewing these in class, but instructors will look at them. Your effort on this exercise is part of the 10% technical exercises grade. This exercise also will not be peer reviewed.

Do this as well as you are able. Experiment and lookup challenges in the reference documentation and on the web, and please do ask questions! Come to the extra-help workshops.

BONUS: If you're able to create the Land Guzzlers visual easily, and procedurally, then challenge yourself to replicate a part or strategy of your work from Assignment III through these same techniques.