D3 Data Representation

Looking forward to class Thursday! Very happy for all of you in the progress you have made thus far.

I may bring cupcakes.

So you know, I expect:

1. 

Project presentation - 

What did you make and how did you get there? 

2.

Share your process: whether it is tricks you figured out in code, work you did on graphic design, metaphor, conceptual, etc.

3. 

Documented process: blog post with the above written up such that anyone could understand and learn from what you have done - the successes and the challenges.

Lucky for you - the blog post will help you organize your process and thoughts such that you are ready to present (see #1)

4. 

Where do you hope to take it next?

Of note:

This is a presentation - be ready to engage us rather than your code and computer screen - be ready to convince and excite us.

We will have several guest critics - follow up email on that later this week.

Best,

1. Bootstrap

http://getbootstrap.com/

2. CartoDB

Illustrator-like application translates automagically to html / css:

http://www.google.com/webdesigner/index.html

Reviewing / introducing html-css:

http://learn.shayhowe.com/html-css/terminology-syntax-intro

Live coding:

http://liveweave.com/GoGhKy

Platform:

1. Storyboard the interactions you want to create. Is it just one view? Are there controls? What is your story? How do you want to guide users through it?

2. Define your aesthetic: font, colors, et. Should all make sense for your specific story.

3. Get some aspect of your data visualization working. A bar chart. Circles corresponding to the data. Something. Or get something "not working" and we can figure it out together.

Fantastic read on drawing and software

A few specific links, and some for all.

Please submit links to the blog if there is something you think another should see! Be on the lookout to help each other out.

Evan

http://www.nytimes.com/projects/2013/china-art-fraud/

Lucas

http://lab.softwarestudies.com/p/cultural-analytics.html

Skylar

http://bldgblog.blogspot.com/2013/11/flywheel-landscapes-energy-reserves-3d.html

Jean

Interesting analogy?

http://blog.cartodb.com/post/53127600321/big-data-deforestation-visualization

Steve

The shop as an organism or human?

http://fathom.info/latest/6796

http://feltron.com/

Projects with Maps

http://fathom.info/indicators

http://stamen.com/projects

Everyone

Datasets:

http://datavisualization.ch/datasets/

Scroll down()

Re-visiting a constantly visited subject in visualizing data:

The data scene:

You set it up with a view: a broad, intriguing, mesmerizing view

Sometimes, you might want to leave it there. And keep the reveal as a "figure it out yourself". This is a point of view that you should be able to back up by your goals in the project and your belief in the method by which the data was gathered, your method of presenting it - 

But often, you want to continue to reveal, to peel away the layers of that first gorgeous view.

You give another layer where you can begin to navigate this broad view.

On this layer, you can make choices that will change the way you see the data -

And instead of the broad, floaty view, you start filtering it down to focus on one idea, or compare two aspects of the dataset.

The new view that you create may toggle the visualization entirely - such that circles are now mapped as rectangles, making the differences more readable as opposed to a vague understanding in the first view.

There are numerous ways to implement these layers.

Connected China does almost all of them.

Toggles within each view -

Toggles for overall view -

You have the outright zoom, a la Google Maps, say.

But there is also the "spreading out" of data - a timescale, for example, 1900-2013 initially spans from the left to right side of the page. But you can "zoom in" on the timeline, and see just 1900-1910 years spread across.

The mouseover to reveal associated content.

You have the choose and filter.

In this gorgeous NYT story, you have:

The automatically animated toggling:

The pre-filtered:

I encourage you to continue to add to this catalog of methods for filtering and interacting with data. (Comment here or on your own blog).

 Finally, the real question is:

1. How many dimensions are you dealing with?

2. How many visualizations do you need to show these dimensions?

3. How can you guide the user through the data, helping them discover the story/tidbits you have found for them as they go? 

4. How can you let them guide themselves rather than having to wait for your preset animations to finish?