Google SoC Logo

Welcome to the Ideas page for the Google SoC 2011. Here you will find an ideas list of things we find interesting to implement for the JavaScript InfoVis Toolkit. If you are interested in these ideas (or have others that you find interesting to implement in this project) please contact me at nicolas [at] sencha [dot] com. By clicking here you will find a list of things we would like to know about you for you to send as part of the application to the email above.

Implement Voronoi TreeMaps

  • Difficulty: Hard
  • Required Skills: JavaScript, an interest in 2D Graphics.
  • Assigned Mentor: Nicolas Garcia Belmonte.

Currently the JavaScript InfoVis Toolkit has three types of TreeMap layouts: Squarified, SliceAndDice and Strip. Voronoi TreeMaps take a different approach by generalizing node shapes into polygons and not just rectangles. Voronoi TreeMaps are created from Voronoi Tessellations.

We suggest as roadmap

  1. Define the template for a Voronoi TreeMap class (main voronoi class, layout classes, node type classes, etc).
  2. Implement a polygon node type with render and contains methods.
  3. Investigate if this node type and the graph class are good data structures to create a Voronoi Tessellation.
  4. Implement a Voronoi Tessellation in the Voronoi TreeMap class.
  5. Extend the Voronoi Tessellation algorithm into a Voronoi TreeMap layout algorithm.

Resources

Use of Hardware Accelerated Techniques

  • Difficulty: Medium
  • Required Skills: JavaScript, CSS(3), an interest in Graphics.
  • Assigned Mentor: Nicolas Garcia Belmonte.

The JavaScript InfoVis Toolkit uses 2D Canvas for rendering. This is good for certain situations but in some devices other approaches could be better suited. For example, we could use CSS3 transitions and animations to make rectangle based visualizations like the TreeMap and Icicle have smoother animations on mobile devices. Also, a WebGL layer would enable the toolkit to render 3D Graphs. The development of both techniques is currently in progress, but some refinement would be needed before it can actually be shipped in the next version of the toolkit. You can find a CSS3 branch and a post about WebGL in the JavaScript InfoVis Toolkit blog for more information.

We suggest as roadmap

  1. Work on the CSS3 branch to ensure that TreeMap and Icicle visualizations work well with CSS3 labels. Make sure the implementation is cross browser and cross device.
  2. Move the 2D and 3D Canvas implementations to a renderers package and investigate how the 3D canvas renderer is currently used in the toolkit.
  3. Make use of PhiloGL to replace the current WebGL functionality in the toolkit.
  4. Make use of PhiloGL's picking algorithm to implement an easy-to-use event webgl api for the toolkit.

Resources

Implement Charts

  • Difficulty: Medium - Easy
  • Required Skills: JavaScript, an interest in Graphics.
  • Assigned Mentor: Nicolas Garcia Belmonte.

The JavaScript InfoVis Toolkit implements Area, Bar and Pie Charts. Other charts like Line Charts, Scatter Plots and Radar Charts would be a valuable addition to the toolkit. Moreover, the current code in the charts could be decoupled even more from graph-based visualizations.

We suggest as roadmap

  1. Refactor Pie, Bar and Area Charts to use proper layouts and not depend on other graph-based visualizations.
  2. Implement algorithms for layout and rendering Line Charts, Radar Charts and Scatter Plots
  3. Improve the current HeatMap implementation
  4. Refactor and maximize code reuse between charting visualizations

Resources

Implement SVG Rendering

  • Difficulty: Medium - Easy
  • Required Skills: JavaScript, an interest in SVG and Graphics.
  • Assigned Mentor: Nicolas Garcia Belmonte.

The JavaScript InfoVis Toolkit uses 2D Canvas for rendering. In some situations (for example, mobile), having an SVG renderer could be very valuable. SVG has also the benefits of scaling without quality loss, and also being DOM elements, the SVG event system works natively in the browser and is faster than the custom client-code used to create an event system for 2D Canvas elements.

We suggest as roadmap

  1. Move 2D and 3D Canvas classes to a renderer package, and implement a SVG constructor that initializes the main SVG element to be used to draw graphs.
  2. Implement SVG specific rendering for each node on each visualization.
  3. Implement a Graph.Plot.SVG class with concrete plotNode and plotEdge methods to render node and edges in SVG
  4. Adapt or change the current event system to delegate to the native DOM event system when SVG is being used

Resources

How to Apply

These are some of the things we would like to know about you when applying to our project on the Google SoC. Please also include your resume and provide links to projects and code whenever possible. If you have any questions please send them to: nicolas [at] sencha [dot] com.
  • Why are you interested in our Google SoC proposal?
  • Which idea(s) would you like to work on and why? (you can propose new ideas if you want).
  • Why do you think you could contribute to the JavaScript InfoVis Toolkit and the idea you chose?
  • Have you ever worked on an open source project? If so, could you tell us about it?
  • Do you have any experience with JavaScript? Please explain.
  • Please provide us with a JavaScript sample code of your own authorship (even if it's short - If you don't have any, you can hack an example of a sorting function, or merging two arrays)).
  • Please tell us anything you think we would like to know. (For example: Which programming languages have you been using? Are you familiar with design patterns? Are you familiar with graphics? Are you familiar with OO programming? Are you familiar with functional programming?)