JavaScript Visualization
- Gediz GÜRSU
- Apr 24, 2016
- 1 min read
These are javascript visualization examples are written by me using d3.js library. This library is designed for visualizing data flow. On this page I do not provide a streamed data visualization on purpose.
EXAMPLE 1: BLUE MESH
In this example points trajectory are randomized and lines are matched to their motion. So that a dynamic mesh like animation is achieved. Animation is performed by browsers internal timing functions and it consists of native svg elements.
EXAMPLE 2: VIBRATING DOTS
In similar manner, motion of these points are randomized and additionally you can drag and drop them. This Interactivity is provided by d3.js visualization library. Browsers also have native functions of drag and drop and HTML5 provides additional options. However for achieving stable results, its best to combine modernizer and d3.js libraries together.
EXAMPLE 3: UNEASY LOGARITHMIC SINUS
This a logarithmic sine easing in. You can drag and drop randomly vibrating points.
EXAMPLE 4: DISPERSING DOTS
This randomly moving and color changing circles are designed for benchmark purposes. There is no meaningful data behind them.
EXAMPLE 5: DRAG OVER TO COLLIDE
There are certain limitations to d3.js library. Drag over or collusion detections are not supported natively. Instead, you write your own customized solution. In this example try to drag red square over purple one to experiment on collusion detection. Also note that as you hover over red circle color changes. When you move it back in to transparent one also color changes back. These two are drag over and hover detection algorithms tailored for this instance.
Comments