current page

history

user

Lecture on Tues, Oct 18, 2011.

Tutorial by Vadim Ogievetsky

Readings

  • Required

    • D3: Data-Driven Documents. Bostock, Ogievetsky & Heer. InfoVis 2011. (html)

  • Optional

    • Declarative Language Design for Interactive Visualization. Heer & Bostock. InfoVis 2010. (html)

    • Software Design Patterns for Information Visualization. Heer & Agrawala. InfoVis 2006. (html)

Materials

Comments

ardakara wrote:

I played around with D3 a little bit for the first assignment before deciding to use Tableau Public. It seemed to me like the skills you need to create visualisations in D3 are the same set of skills you need to design a modern web application plus some D3-specific syntactic sugar in Javascript. This is a mixed blessing. On the positive side, it lets you use (or learn) the same set of skills you need for other web development anyway, and offers a great amount of freedom in what you can do. On the not so good side, if the user isn't already familiar with web development, there might be a steeper learning curve, and because it offers so much freedom, it's also harder to sample different designs easily. A button press in Tableau to change the format of the graphic now requires changing, potentially significant, amounts of code.

bbunge wrote:

I have also played around with d3. I am excited about the possibilities of the framework. At the same time, I agree that simple visualizations are harder to achieve; you need to use geometry to figure out where things should be laid out relative to each other. A point of comparison is something like flot js that has a lot of baked in defaults that can be extended if wanted. The "better" framework depends on the use case. For something more quick, flot would be a good choice. On the other hand, the trade-off is expressive power. The types of visualizations on the d3 example page are of a completely different caliber. While the same effect might be possible in both, the intention of the frameworks differ. D3 seems so much more powerful. I'd compare it to using JQuery UI (a set of prebuilt components for jQuery) versus building one's own with straight jQuery and CSS. You are using the same language to manipulate what is rendered for the user. But, in the latter case, the result is something much more tailored, effective, and designed, rather than "out-of-the-box".

dbrody wrote:

Coming from using Tableau first, I am excited to use D3. While tableau was helpful with importing data and getting quick visualizations with just a few clicks of the button, I like freedom. In going through the first few tutorials of D3 I see the great possibility of creative, interactive and custom visualizations as well as adding the benefit of making them interactive. However, I do agree with some of the other posts in how it can be much more work to get a visualization to look right than compared with Tableau. However, I think the incredible power of taking D3 with a database such as MySQL is worth the extra work to get the foundations off the ground. I think my workflow will be to use Tableau to quickly get a sense of the data and the information I want to present. Then switch to D3 to make an interactive, custom display of the data as I want it. It is more work, but the payoff of the user experience will be much better.

joshuav wrote:

@ardakara My inclination after using Tableau and playing around with D3 is that data exploration is much easier in Tableau and D3 is a power tool for creating custom visualizations on the web.

Both have their place as @bbunge pointed out and I think that is what the class is intended to convey.

From the tutorial, I am looking forward to the animation lecture and thinking about how incorporating animation can improve visualization design.

Thanks for helpful tutorial Vadim!

jojo0808 wrote:

I haven't played around with D3 yet, but after reading the paper and seeing the demo in lecture I'm excited to get started! I do agree that D3 seems a little lacking in quick-and-easy ways to create simple, common visualizations, and I think that would definitely be a valuable addition to D3 (is this what Layouts are supposed to try to provide? I'll have to play with those). At any rate, the power and flexibility D3 provides in creating visualizations for the web is impressive. I really like the idea of binding data to SVG elements and using the enter/exit metaphor to efficiently render changes in a graph.

mbarrien wrote:

In case you're wondering (as I was) about the standard that Microsoft "tried to shove down our throats": http://en.wikipedia.org/wiki/Vector_Markup_Language . It was the only vector format IE used until IE9 started supporting SVG. However, it apparently is still used internally in Microsoft's file formats.

It's also interesting to see how much work went into D3's predecessor ProtoVis during the last 2 years to try to support VML: http://code.google.com/p/protovis-js/issues/detail?id=15

rc8138 wrote:

The demo and the video last shown in class today got me very excited about D3. I think Tableau is extremely useful for building quick static visualizations but animation and interactive visualization is still on the way. D3 complements this shortfall. The concept of "staging" (i.e. entering/exiting objects) discussed today made programming for animation much more concrete. On the other hand, the time it takes to build a visualization in D3 is considerably longer because of the coding required.

As a result, when choosing tools for visualization, we have to consider the purpose of the visualization as well as the time constraints for creating the visualization. If we are interested in quick and dirty exploratory data analysis, Tableau could be a great choice. On the other hand, if our objective is to create beautiful animated visualization to make a point, it might be worthwhile to spend the time coding in D3.

ifc wrote:

First, nice lecture Vadim. I too have a hatred for IE despite only recently becoming a web developer. Given the issues I've had with IE7&8 I can only imagine what having to support IE6 was like.

Second I have mixed feelings about D3. I was expecting it to be a high level visualization platform that made interaction and translation easier. Perhaps there are plugins that do this for you, but from the demo it seemed more like jQuery for geographic shapes (selectors, attributes, transitions, etc.) with an added 'actor' model. To me it just seems a little too low level, though perhaps after developing with it for a significant time I will change my mind. Certainly it would be ideal to create complex custom interactive visualizations. Good plugins would be a giant plus for me.

Also I worry about a changing visualization libraries. ProtoVis was used two years ago and I think another before it. Hopefully the language they have developed is expressive/rigorous/etc enough they can just make backend changes in the future. If anyone has a quick breakdown of the differences/direction of the evolution, I would be interested.

yeyleo wrote:

Like the posters above, I really enjoyed Vadim's lecture on D3 today. The library and animations (especially the cool sorting one) look very powerful but as others have pointed out, it does seem like D3 requires quite a bit of low-level coding to get started. On the plus side, you can probably come up with any visualization you can imagine. But on the other hand, it seems like it might take a while to do easy tasks (such as positioning the bars of a bar graph correctly). It seems like a tool such as Tableau or flot is more straightforward, though obviously less powerful. Will have more to say once I try it out myself. Also I did not get a chance to ask this in class, but does D3 play well with JQuery or are there some integration issues to watch out for if including both libraries?

stubbs wrote:

As someone who has programmed a bit of graphics in Javascript, I certainly understand the need for low-level vector graphics tools. However, my previous experience with Raphael (mentioned in the paper) was frustrating and sent me running back to Flash/ActionScript/jQuery. Like @ifc, I'm hoping that D3's slick jQuery-esque interface will make for less low-level coding. After the lecture and reading the paper, I'm still unclear what the advantage (besides performance) of the select.enter()/exit() paradigm will be? I really like the attribute protocol, "(d,i)" model and the universal scaling functions. Plus, the demos look amazing (best vector stuff I've ever seen).

Take note: “The key [to] learning D3 at this stage seems to be to study the SVG spec, and to inspect the SVG generated by D3 [emphasis added]. After a few iterations it all begins to make perfect sense.”

Side note: I first learned of D3 at a recent conference when a CS student from the east coast said to me: "Check out D3. It makes me want to quit what I'm doing to start working on data viz"

mlchu wrote:

I like the exit/entrance analogy that Vadim made about rendering. Before this class, I thought of visualization as less dynamic process. But think of graphic visualization like one of the ppt/visual presentations we made, it is really about story-telling and convincing the audience by getting them to follow the logic of your presentation. The use of D3 enables us to program and visualize the presentation logic. More interestingly, D3 supports the generation of interactive visualization which opens up much more dimensions for visualization on a flat screen. However, for data exploratory purpose, I would still think that Tableau does a better job for its instant generation of graphs and the easiness to produce meaningful graphics without much manipulation.

jsadler wrote:

Can we have our cake and eat it too?

Many of the comments here note that D3 has big payoff but a steep learning curve - especially when compared with Protoviz, or even Tableau ( which we have all have become intimately aquatinted with in the last 24 hours).

I like the thinking presented behind D3 - and the cool flashy animated interactive visualizations "shown in theory" but i wish that the tool was more accessible to the unfamiliar inexperienced coder...

Quiet bluntly D3 is just too hard for the beginner.

Consider that In lecture demo today we took over and 30 minutes to explain the details of how to make a bare bones bar chart. With well over 40 lines of code just to setup the initial data. I would agree with others above that the main gains of D3 are not for simple static visualization but I would propose it as a design challenge to see if we could have the best of both worlds i.e. it would be great if we could have a D3 mode for basic quick and dirty data exploration ( as fast a tableau) as well the "power" mode.

Bostock's D3 paper talks about factors of "visibility of internal structures" and "accessibility" when creating the visualization - but the D3 approach seems to sacrifice much for the gains of novel structure, precision control, modularity and synthesis of modern interactive techniques. i.e. if all you need is a bar chart in the next 30 seconds - this is probably not the right tool.... not yet at least

I'm looking forward to learning D3 as a new tool - AND I am fantasizing about a hypothetical tool with:

  1. the transparency of internal structure and simplicity in excel

  2. the speed of exploration of tableau

  3. the data flexibility, interactive power, and precise control in D3.

Is this feasible?

arvind30 wrote:

While I agree with above comments that D3 doesn't provide as many opportunities for data exploration (especially for beginners) as say a tool like Tableau, I'm not sure that that was the purpose it was built for, and I can't find it as a stated goal in the paper either. Rather, as I understand it, the goals of D3 were to provide a powerful and performant visualization framework that utilized existing paradigms - jQuery syntax - to make building visualizations more accessible - with accessibility probably being defined for web developers/those familiar with jQuery. It definitely has the same learning curve (perhaps a little steeper given the added visualization layer) as jQuery, but once you're proficient in it, as I suspect any web developer worth their salt will be, I think rapidly prototyping visualizations will become much easier and more satisfying given the power and animation.

I also really like @jsadler's hope to have and eat cake (I like cake!) but in the meanwhile, like everyone else, I'm looking forward to getting my hands dirty with D3.

bsee wrote:

I think that @jsadler made a good point user-friendliness and flexibility and control.

Personally, I feel that most programs right now seem to suggest that you can't both have the cake and eat it. For example, Apple products seem to be super user friendly at the expense of flexibility and control. Even a visualC++ hides menus for novice users to make the options look less daunting. I think the best that any designers can do is the offer the option of having less control but more guided use (and thus more user-friendly), and the option of having more control but less guidance.

Ultimately, it boils down to what audience group is the design for? It seems to me that D3 is meant for experienced user in the academic field. The syntax seems highly similar to javascript, and so for experienced users, the learning curve is probably not as steep as it seems. Also, unlike products on the market, D3 does not need to present itself as a user-friendly tool. Like many of the APIs I've seen, it seems to expect the user to take time and learn.

I also found the same problem with Tableau. I took a long time figuring out how to use it. However, once I got the hang of it, I could iterate through very quickly.

I like cake too.

awpharr wrote:

I really liked how simple it was for Vadim (and eventually me) to create such beautiful, smooth animations with D3. I feel like the capacity for creativity is higher in D3 than other visualization tools that we have used so far. It seems that there probably is a much higher learning curve as others have mentioned, but Vadim made it clear that the syntax makes it seem much more difficult that it actually is.

@jsadler: I think having a quick and dirty mode as you propose will make it easier for those who have difficulty going through such dense, confusing code. However, there seem to be enough visualization platforms out there that do exactly (and only) that, such as Tableau as you mentioned. D3 seems much more geared towards those who want to take some exploratory and artistic license with their visualizations and have the coding know-how to do so. The ideal tool you have describe does not seem too far out of our reach, but definitely something that will take a lot of man-hours to accomplish.

ajoyce wrote:

From what I've seen of D3, it appears to be a powerful toolkit that can flexibly cater to the needs of a highly diverse set of visualization requirements. At the same time, as others have said, it's not going to provide a Tableau level of rapid visualization. From my perspective, D3 is not suited to exploratory data analysis at all. You really need to at least have a good idea of the structure and makeup of the data before delving into displaying it through D3.

Another inherent requirement in using D3 seems to be that you need to decide upon a visualization paradigm before implementing your graphic. The amount of time to implement a specific visualization, while less than it would be with raw Javascript or hand-drawing, is still significant enough that you can't go out and create five different visualizations before settling on your favorite. Instead, you need to first commit to a visual structure and then translate that into a Javascript implementation, perhaps making minor tweaks along the way.

jkeeshin wrote:

I think D3 seems to be a very interesting and powerful library. From the demo in class and some exploration of the APIs, it seems like when you understand the library, it makes it very easy to create rich and powerful data visualizations.

However, having said that, I think some of the semantics of D3 are a little bit difficult to understand at first. I think the ideas of enter() and exit() are not quite intuitive (the way that we are really operating on diffs between the graph object list and data list), but I think after playing with the library it will make more sense to me.

I am excited to learn the new API.

phillish wrote:

As someone who has just recently started using web technologies (HTML5, CSS, JS) this past summer, I enjoyed the D3 talk today. I worked on a lot of front-end development and am glad to see that much of the code presented was very similar to CSS styles and jQuery-style animations.

That said, D3 does indeed seem to have a steep learning curve. For the casual user who needs a basic graph to add to a story, a visualization created in Tableau or even Excel should work just fine. Even a programmer with some front-end web development experience found the code a bit lengthy and non-user friendly to get the end result.

That said, for web-rich interactivity D3 is a promising framework for creating visualizations that are specifically suited for the web (e.g. using SVG graphics, transition animations, etc.).

schneibe wrote:

As we heard during class, SVG is a xml-based file format to represent 2D graphics. Interestingly, there is a similar xml standard for 3D representations called X3D: http://en.wikipedia.org/wiki/X3D This file format allows you to create 3D graphics directly in the browser. I was wondering whether D3 supports or will support 3D representations...?

Apart from that, I really enjoyed Vadim's demo and I am looking forward to learning D3!

aliptsey wrote:

As a non-cs person, I am fairly intimidated by the seemingly steep learning curve of D3, but it does seem like a pretty cool tool for interactive visualizations. Although Vadim mentioned that it is good for exploratory data analysis, it took us a fairly long time in class to make even a simple bar graph. Tools like Tableau are great because they actually do allow for rapid iterative analysis - i just don't see the same benefits from D3.

That being said, I'm still excited to learn the new framework!

luyota wrote:

After today's introduction to D3, I feel that the class is envolving again. At the beginning of this quarter, we were doing very simple visualization as a warm up, and then it was the exploratory data vizualization, and then D3. While the static design works very well on the environment like books and posters, jumping out from static design, the interactive visualization design makes the data even more interesting and informative, and it enables more freedom and creativity. It is great to have such a tool that facilitates creation of the interactive visualization. Looking forward to the assignment!

mkanne wrote:

I actually used D3 over the summer to create some interactive web visualization and absolutely loved how easy it was to declare styles and animations for the elements. Also, I found a very interesting article here on web data visualizations (mentions Tufte!): http://www.guardian.co.uk/news/datablog/2011/oct/17/data-visualisation-visualization

vulcan wrote:

As someone with no web programming or graphics experience, I was a little intimidated by how much prerequisite knowledge one seems to need need to pick up D3. But I've started going through the tutorials, and that has to an extent alleviated some of that initial concern.

I did think it was pretty cool that D3 automatically "interpolate numbers as well as colors, matrices, paths and percentages" when constructing animations. http://christopheviau.com/d3_tutorial/

junjie87 wrote:

I've been looking forward to this part of the class as I think the ability to add animations enables a whole new dimension for data visualization that we previously could not do. For example, parallel coordinates looked scary, but once we could interact with the visual and filter out unwanted lines it became much more useful. Of course, this added dimension also means there is a greater risk of creating a visualization so complex that it becomes ugly.

I tried some of the interactive examples on my iphone and found that D3 does not (yet!) support touch interactions well, but I believe it is just a matter of time before touch functionality gets added on.

yangyh wrote:

The demo Vadim presented yesterday was impressive. Especially when it came to the last example (bar graph sorting), I was amazed to see how different factors affected the transition animation with only a slight change. I think D3 offers great flexibility for presenters to effectively convey their ideas with visually appealing effects.

I had some prior experience with OpenGL. After seeing the demo yesterday, I found that the design paradigm of both graphics library are intrinsically different, which is reasonable since D3 is mainly used to create data visualizations, while OpenGL has more general applications.

I would be willing to spend some time learning D3 as a new tool to create visualizations. I hope in the future, I can integrate D3 in all my presentations and impress everyone!

stojanik wrote:

I like the design approach of D3 in that it leverages the shared DOM model and the existing ecosystem of tools that web developers are familiar with; adopting the W3C Selectors API, W3C DOM API, HTML5, and CSS goes a long way in eliminating the barriers to adoption. For web developers this represents an incremental shift in the learning curve since you only have to familiarize yourself with some of the helper functions and not be bogged down with some tool-kit specific nomenclature. But I can see how someone who is interested in quick data modeling and is not particularly "technical" might be overwhelmed by the code and learning curve. That is where Tableau and other data modeling software might be more attractive to non-developers and developers alike.

I was somewhat on the fence about which visualization library to work with and feel that the presentation pushed me a bit closer to D3. I like the notions of "sticky" data in reducing overhead, transition scheduling and timer queue (it would interesting to explore an abstracted timeline-based editing interface for transitions that's higher up in the stack, something similar to video editing and Flash interfaces), and the future path towards integrating the statistical modeling strengths of R through the form of add-on modules. I'm just wondering if the development communities behind jQuery, jQuery UI, and jQuery Mobile might not address their weaknesses in data-binding/high-level data-joins and roll out jQuery Vis.

It's worth playing with. I still want to see how processing.js compares and follow the maturing HTML 5 Canvas.

jneid wrote:

I also worked on an interactive browser-based visualization this summer, but hadn't heard of D3. If I had used D3, the process would have been much easier, and the result much nicer. For example, D3 would have helped me avoid the cross-browser compatibility issues that I ran into. It also would have made transitioning between views so much easier and prettier! It's just 1 function call! A propos the debate of Tableau vs. D3, I think one of the major differences is the amount of control you have. It's analogous to comparing Java and assembly, but at a much higher level. Tableau lets you create visualizations quickly and easily, but they may not come out exactly how you want them. D3, on the other hand, lets you customize exactly how you want the visualization to appear, down to the pixel, but requires more work. S I would agree that Tableau is great for speedy, iterative data exploration, while D3 is best for creating a single presentable visualization tailored perfectly to its information-portraying purpose.

pcish wrote:

Near the end of the demo, Vadim mentioned a fact that I found very interesting - that having all the bars move at the same time is nowhere near as effective as having the bars move at staggered intervals. Putting a reasonable delay between movements seems to allow our brain to track the movements better, and be better able to appreciate what we are being presented with. That said, D3 seems to be an incredible framework to be able to produce these kinds of complicated animated / interactive visualizations using a web browser. That strength is also a weakness though, as it is more time-consuming and difficult to code up a visualization - having to code all the details explicitly, and as has been mentioned in several comments above, makes D3 unsuitable for data exploration - it is more of a data presentation tool.

olliver wrote:

I think the next step is to get browsers to use gpu acceleration for the SVG format. I know svg is not implemented the same way on all browsers, but webGl is potentially much faster for visualizations with a lot of graphics demand, but has no support for vector graphics. Perhaps an implementation of the SVG format in gl shaders would be the future of D3 and web visualizations in general. I find D3's enter/exit stage-like implementation baffling but extremely useful in certain situations, because it links the graphics object directly with the pointer to a data object, and automatically calls the necessary functions when the data is changed and the page is re-rendered. There is a lot going on under the hood in D3 that Vadim did not elaborate on. In my personal opinion, D3 is just a little bit too limiting to be the general purpose graphics tool, but for this class I'm very excited to switch to it away from Tableau (especially because my license is going to expire any day now)

wtperl wrote:

I think arvind30 makes a really good point; Tableau and D3 shouldn't be directly compared, because although they're both tools to make visualizations they do it very differently. A coding-based tool like D3 will inherently be less exploration-friendly than a GUI-based one like Tableau. But that doesn't mean Tableau is the better overall tool, just better at exploring data rapidly. D3 is obviously better at creating animated visualizations, and to me seems to have a much easier learning curve (at least for people that already know JavaScript) than Tableau's complex (if powerful) interface. Just because the two tools are both used to make visualizations doesn't mean they take the same approach or emphasize the same features. Some projects will be better suited to Tableau and others to D3, but I don't think we can say that one is definitively better or worse than the other.

crfsanct wrote:

D3 uses paradigms that I have not been exposed to much before, particularly because I have not programmed much for interaction and animation for web. I appreciate being exposed to these techniques in lecture and in the paper. I particularly like the stage metaphor and grouping elements by entering, current, and exiting. This is a meaningful division of elements for animation, that lets us provide different animations for different elements while not having to define animations for each one.

Just from looking at tutorial code, there seems to be a lot of code setting up objects. For animation, though I do appreciate GUI editors, like Flash, where you can see your objects before making them move, so I have a better understanding of the visual space. I realize that this would be hard for large data. I wonder if there is a way for Tableau and D3 to work together for this purpose.

jessyue wrote:

I also think D3 is interesting because it directly does all the visualization in the browser. The benefit of using D3 is the ease of adding in animation and interaction. I haven't started playing with it but was inspired of how much it can do from yesterday's demo, and from reading the paper and looking online at D3 examples. I can't wait to use it for Assignment 3/4.

jessyue wrote:

I also think D3 is interesting because it directly does all the visualization in the browser. The benefit of using D3 is the ease of adding in animation and interaction. I haven't started playing with it but was inspired of how much it can do from yesterday's demo, and from reading the paper and looking online at D3 examples. I can't wait to use it for Assignment 3/4.

mkanne wrote:

I actually used D3 over the summer to create some interactive web visualization and absolutely loved how easy it was to declare styles and animations for the elements. The use of svg is also interesting and caused some confusion at the beginning as I was not sure what styles it would except and how they differed from CSS styles. However, like much of CS, the answers eventually became clear through experimentation. The tutorial in class was very helpful and I can't wait to get started creating with D3!

Also, I would like to link to a very interesting article here on web data visualizations that's been making the rounds on the design kids mailing list (mentions Tufte and Playfair!): http://www.guardian.co.uk/news/datablog/2011/oct/17/data-visualisation-visualization

abless wrote:

I have toyed around with D3 just a tiny bit over the summer, but it's freaking awesome. I am definitely looking forward to using it for the assignment/project. I think one great advantage of D3 is that it leverages the power of Javascript, and is similar in syntax to JQuery, so lowers the entry barrier to learning the framework. That being said, I think there certainly are some unfamiliar concepts (the "stage" analogy), and I think it was useful to have Vadim come and explain this in person.

kchen12 wrote:

While Tableau was really good at generating visualizations quickly and presentably, I often struggled with trying to portray the relationship between dimensions exactly how I wanted it, probably because I hadn't spent enough time with Tableau to be considered an advanced user. Within my data exploration, I often had to "settle" for the suggested visualization for the data quantities, which was admittedly frustrating. I'm looking forward to using D3 to learn a document-binding language with which I can code into animation exactly what I have in my mind.

Vadim's theatrical metaphor for describing selection.enter, selection, and selection.exit made a lot of sense to me, and I think that director-like power is something we as developers/designers will be able harness with D3.

ashtona wrote:

Thanks for the nice lecture Vadim. It was great to see D3 in action. D3 does seem a bit lower-level than I expected (as pointed out by others), and if it is "much simpler" than what was required in previous versions of the course as Vadim mentioned, I'm curious to find out what that was! In any case, it's not super low-level -- there seem to be lots of things abstracted out for us, since the example Vadim walked us through in class was quite the involved visualization. It would certainly require far more code to make that from scratch than it did with D3. One comment about the structure of the lecture: I would've liked to have seen an example fully worked out to the end product (what we had at the end of the class missed labels, etc.). Not a big deal, but it would've given us a better sense of what it takes to go from an empty screen to a completed visualization.

blouie wrote:

I'm likewise really excited to pick up D3 given how powerful it looks. Not to sound really cliché, but the fact that D3 is so powerful comes with the warning that with great power comes great responsibility. I agree with above comments about how it might not provide much in the way of getting a visualization of the ground, and I think that the wealth of opportunities provided by D3 may make it too easy to get lost in the data. As a result, I think that one important thing looking forward will be to think carefully about how I want the data to be represented before I get my feet wet with D3. Maybe that's not an approach that will make sense for everyone, but I think that could be valuable.

chamals wrote:

I really enjoyed using Tableau for exploration of data. IT was very easy to manipulate the data in many ways to uncover interesting things abou the data. There were times, however, where I knew what I wanted to visualize, but Tableau's interface got in the way, and I settled on a visualization that was easier to make.

Now with d3, I have incredible control over the data and visualizations. I am no longer limited to Tableau's built-in visualizations, leading to similar looking visualizations from everyone. I am really excited to see what people in the class will build with d3.

daniel89 wrote:

Having played with Protovis and Graphviz (for network analysis), I'd say that my first try with D3.js was great. I first heard of it while in Boston over the summer, and had attended a Meetup called "Boston Artists + Coders". It was an amazing introduction to D3.js, from an artistic perspective. There was a guy who visualized the stock market indices, and projected it onto the wall of a neighboring building, animating it with real-time data. It was an immediate hit, with people stopping in the street to see it before the police stepped in.

  • Many people have touched on the animation (.transitions) being built in into the library, and to me that was one of the "wow" points of the library. Also, the ability to integrate so closely with HTML (you just put in a <svg> tag) opens up a world of interactive possibilities right out of the browser.

A few users have been saying that D3 is difficult, and doesn't match Tableau's "easy prototyping" for exploration. I'd be really interested to build a "D3 on rails" (really bad analogy) that takes usual constructs/paradigms, that would generate very general prototypes that can be customized by diving into the d3 code.

daniel89 wrote:

Having played with Protovis and Graphviz (for network analysis), I'd say that my first try with D3.js was great. I first heard of it while in Boston over the summer, and had attended a Meetup called "Boston Artists + Coders". It was an amazing introduction to D3.js, from an artistic perspective. There was a guy who visualized the stock market indices, and projected it onto the wall of a neighboring building, animating it with real-time data. It was an immediate hit, with people stopping in the street to see it before the police stepped in.

  • Many people have touched on the animation (.transitions) being built in into the library, and to me that was one of the "wow" points of the library. Also, the ability to integrate so closely with HTML (you just put in a <svg> tag) opens up a world of interactive possibilities right out of the browser.

A few users have been saying that D3 is difficult, and doesn't match Tableau's "easy prototyping" for exploration. I'd be really interested to build a "D3 on rails" (really bad analogy) that takes usual constructs/paradigms, that would generate very general prototypes that can be customized by diving into the d3 code.

jessyue wrote:

I also think D3 is interesting because it directly does all the visualization in the browser. The benefit of using D3 is the ease of adding in animation and interaction. I haven't started playing with it but was inspired of how much it can do from yesterday's demo, and from reading the paper and looking online at D3 examples. I can't wait to use it for Assignment 3/4.

zhenghao wrote:

The D3 tutorial was awesome and it was interesting to hear Vadim talk about why D3 was designed in a particular way.

It was interesting to observe the kind of data access paradigms used. In particular, the binding of data elements to display elements really reminded me of the concept of having a taxonomy relating data to retinal elements directly. It was definitely very cool to have a declarative syntax for expressing things like "let this quantity of this object be represented as that property of this visual element". At the same time, I wonder if the selection based approach in D3 is one most suited to the manipulation of the kinds of multi-dimensional data we encounter today.

ashtona wrote:

Thanks for the nice lecture Vadim. It was great to see D3 in action. D3 does seem a bit lower-level than I expected (as pointed out by others), and if it is "much simpler" than what was required in previous versions of the course as Vadim mentioned, I'm curious to find out what that was! In any case, it's not super low-level -- there seem to be lots of things abstracted out for us, since the example Vadim walked us through in class was quite the involved visualization. It would certainly require far more code to make that from scratch than it did with D3. One comment about the structure of the lecture: I would've liked to have seen an example fully worked out to the end product (what we had at the end of the class missed labels, etc.). Not a big deal, but it would've given us a better sense of what it takes to go from an empty screen to a completed visualization.

zgalant wrote:

I also agree that it's difficult to get started. Many of the commands are not that intuitive, and I didn't get a good feel of how to do anything besides exactly what was shown in class. It looked very powerful and easy to use if you know it, but I feel like I'd need to rely heavily on documentation to know what's available.

Overall, it looks really cool to use, so I'm looking forward to getting over that hump.

bgeorges wrote:

I had taken a quick look at D3 before yesterday's lecture and I have to agree with the classmates that pointed out that its a bit hard getting started. Vadim's lecture was extremely helpful, and I specifically found the "actors entering and exiting a stage" analogy to capture the the most important concepts underlying D3 very well and really aided my understanding of how to use it. I would suggest featuring this analogy prominently on the D3 webpage, since I imagine I'm not the only one for whom it really clarified things.

cmellina wrote:

@schneibe, I'm glad you raised the issue of 3d, as that was something I was wondering about as well. After considering the advantages of D3 over Protovis as outlined in the paper, I think that the D3 is the right sort of architecture for a visualization framework (this opinion will be susceptible to revision as I work with D3 of course). The stage abstraction, to me, is non-obvious, but quite powerful when you understand why it was designed that way. I think that leaves the goals of further development toward extending it in various ways rather than pursuing further variation on the basic model. Of course, I'm sure Jeff could clue us in to future directions of development that he finds promising and important...

blakec wrote:

I was very impressed with the capabilities of D3. It seems like there are many things you can do with it and the language is very expressive and powerful. One thing that strikes me about the language is that it isn't very intuitive. There are many functions that seem to do mysterious amount of things behind the scene when called. For example, by just looking at the code it was no way apparent that 'append' would go through all then new data ready to enter the stage and create a certain rectangle for it. Coming from other languages, I at first 'append' as adding one new rectangle to the screen. I think the idea behind this syntax and way it is used is very novel, but to me it seems unintuitive and hard to read if you have never worked with D3 before.

babchick wrote:

After poking around the examples it seems like it would be an interesting experiment to try and devise some kind of game using D3. Perhaps a character that is maneuvering through randomly morphing divs on the page and trying to make his way down to scroll to the bottom?

In general I really like how this framework was designed to complement and integrate seamlessly with the DOM while keeping all the functional goodness that its predecessor Protovis had. Like most others have expressed, it seems like this gives the programmer absolute control over the display/"stage" he/she is creating, but at the same time makes very simple, routine visualisations a bit more tedious to achieve cold turkey. Some kind of D3 plugin system might make sense in the future with something akin to Protovis being a capstone example of a library people could utilize without having to define their marks from scratch.

elopez1 wrote:

Like many of the above posters, I, too, played around with D3 for a little bit. I like the fact that the framework lives in the browser, so it's an easy transition for someone who is familiar with web development and Javascript. However, in terms of exploratory analysis, I don't think D3 is very adequate, for creating visualizations in D3 takes too much time. Meanwhile, Tableau is great for rapidly iterating and exploring different types of visualizations. Tableau allows one to easily and quickly find trends in the data and good ways to express those. Thus, I think that a combination of Tableau (in the earlier, exploratory stages of data visualization) and D3 (in the later stages, once you have a clear message and visualization idea to transmit it) is perfect.

sakshia wrote:

Vadim's demo was interesting, and I liked the way he tried to explain the D3 paradigm - although I have to say, I did get a bit lost. It was helpful to try to edit and follow the code on my laptop as he was going through it, but I'll have to go and play around with it more to really get the feel of it. As I read the paper, the goals and conceptual grounding of D3 seem sound, however, perhaps some of the nuances are lost for me because of limited experience with document transformers. I like the ideas behind the tool, and the examples we see of uses in the paper and the show reel are testament to its capabilities. Hopefully the 'accessibility' level is manageable; because Tableau was great for accessibility, but one could feel constraints at times. I'm glad to see that there is an acknowledgement of the users in the last section of the paper, feedback and observations. It would be great to see more accessibility-related feedback and measurement, albeit difficult of course, and to see how this can concretely translate into help documentation /tutorials (or even mean design amendments). In any case, looking forward to trying D3 out for myself.

fcai10 wrote:

After seeing the pretty visualizations in class, and reading the D3 paper, I am excited to try out D3. I especially like the emphasis on making D3 easy to debug; making, and fixing mistakes is one of the best ways for me to learn a language because I am constantly refining my understanding of the language by rooting out misunderstandings. I have taken a quick look at the D3 tutorials, and having a bevy of examples will be very helpful. After reading some of the postings above, I am interested to see for myself how steep the learning curve is -- and how a steep learning curve can made easier to climb with convenient debugging and elucidating examples. On another note, I am excited to play around with interaction and animation -- a visualization that changes with time has a whole other dimension for me to work with.

tpurtell wrote:

I would have liked to know more about SVG primitives, but hammering home the main principle of d3, the actors, was helpful and correct my mindset about the toolkit. Thanks Vadim!

angelx wrote:

I found the tutorial to be very helpful in understanding the principles behind D3. D3 looks to be very powerful, but I did not find it to be particularly intuitive to use at the beginning. I think D3 would benefit from integrating with a GUI that allows you to specify simple starting objects with common types of graphics and animations. I've always liked tools that had both a UI for simple tasks, but a well defined language that I can later manipulate directly once I'm more familiar with what the tool can do.

blouie wrote:

I'm likewise really excited to pick up D3 given how powerful it looks. Not to sound really cliché, but the fact that D3 is so powerful comes with the warning that with great power comes great responsibility. I agree with above comments about how it might not provide much in the way of getting a visualization of the ground, and I think that the wealth of opportunities provided by D3 may make it too easy to get lost in the data. As a result, I think that one important thing looking forward will be to think carefully about how I want the data to be represented before I get my feet wet with D3. Maybe that's not an approach that will make sense for everyone, but I think that could be valuable.

jhlau wrote:

The tutorial got me very excited about how easy it is to start using D3. I like that is is a web-ready framework built on Javascript, rather than a java applet or something like that. I do notice, though, that some of the exploratory visualizations I do in Tableau are exactly what I'm trying to achieve in D3, and it seems to be a little redundant to have to completely re-code the visualization. I wish there was a way to integrate the creation of interactive visualizations in Tableau in a way that translated seamlessly over to D3. Nonetheless, D3 looks extremely powerful and as always I am appreciative of having to consciously add every pixel I want to my visualization. Thanks for a great tutorial, Vadim!

insunj wrote:

D3 is really cool!!!! I can't believe it came from this class's project and it's really a great tool for developers to implement web data visualizations. The tutorial was helpful but I think I got my head around d3 through really using it. As I was using it, few things that I liked and wished. First, I liked the basic charts that were given. I think it represented fundamental charts we used. I also liked the examples that were online. It was definitely flexible and I think that was the power of D3. I also wished that better documentation for d3. I didn't know what the function meant or most of the times I had hard time getting data because it seemed little inconsistent what to call based on the functionality. As an extension for that, I think if there was better, more thorough tutorial, I think that will be very helpful.

Leave a comment