Background:
Detailed Tutorial of Selections
Data Binding

Update:
Which methods to involve in visualization:

1. select
2. selectAll
3. data
4. enter
5. exit
6. append

I’ve decided that each of these should have rules associated with them for visualization for a couple of reasons. First of all, they are basic things you need to know about d3 from the beginning. Also, they’re often chained together in calls.

Parsing the code to get the lines that involve these methods and are relevant for vis:
Right now I have two approaches to breaking down the code to find things to visualize. The first is overkill and involves using a parser that will break down any snippet of javascript like so:

This output doesn’t really simplify anything so I decided to go about this with a more targeted approach and just look specifically for lines that involved method chaining and then narrow this down to those with the specified methods above, then get the values of the variables/arguments to these calls. I’ve completed all but the last part (getting the values of variables) using regular expressions. Next I need to break this down into a format for visualization.

Additionally, I’ve also begun work on the website so that input to a text box will be taken in, parsed and then visualized. This is in the very beginning steps and I got just the bare minimum done so that I can test different ways of visualizing these lines.

Questions

1.Does it seem helpful to have a visual of what you’re working with as you type code?

2. Which of the tutorials above, if any seem like they actually intuitively explain things?

3. Is this worth the effort/useful/overkill?

Plan:

First I will get a sense of what visual representations are feasible/make sense by manually sketching some based on example code on the d3 website. This is what I am working on now and will give me a sense of the variation and challenges I will have to deal with in parsing and visualizing code consistently.

After this step I should have narrowed the visualization to specific methods/concepts in d3 that I want to clarify and begin to write code that parses those aspects of the code, and consistently visualizes it. I think the starting point for this should be parsing the code, then looking for the methods I’ve decided on focusing on, then generating some text based on that. This is a good way to start writing the code that I will need without getting to stuck on the visualization problems/decisions that will come up.

Then the part of this which is most difficult to delineate steps for in advance is the visualization. Once I have a sense of what my narrowed scope is this will be something that I clarify. As for now, some challenges I think I will come across are figuring out what visual analogy I will consistently use, how much detail is useful to provide in a visualization, the layout of the graphical elements (with respect to each other and the code if that is also displayed with it). Additionally, many of the concepts lend themselves to simple text summaries so I am thinking that would also be useful in conjunction with visual elements. To support this process I’ve been looking at automatic code documentation/summarization to see how they try to get the relevant aspects of code and consistently generate text based on it.