Overview Examples Documentation Source Contact / Feedback

Visual Sedimentation

Download the beta:

Reseach Project:

This library is part of AVIZ INRIA and IRI research project. We value any comment and suggestion. So please visit our Google Group. We also need your feedback, please take a couple of minute to fill out our questionnaire.

If you want to know more about the design space behind Visual Sedimentation, also read the following paper:

"Towards Visual Sedimentation" Samuel Huron, Romain Vuillemot, Jean-Daniel Fekete, Poster at IEEE Infovis, 2012


@article{huron2012towards,
title={Towards Visual Sedimentation},
author={Huron, S. and Vuillemot, R. and Fekete, J.D. and others},
journal={VisWeek 2012 Electronic Conference Proceedings (2012)},
year={2012}}

#Index

#Introduction

The current version of Visual Sedimentation generates three types of classic visualizations : bar chart, pie char and bubble chart. In a future version, it will support the generation of any chart.

Visual Sedimentation is best used for continuously updated data (data streams), therefore the overall process of running a visualization is a follows:

  1. New data enter the charts under the state of token (similar as particles)
  2. The token is processed by the physical engine and decay over time
  3. Finally the token flocculates (i.e. it disappears) and the chart is updated

Data streams can be Tweets, SVN commits, etc. They can either be coming live, or generated from the dump of a live record. Data can also be a ratio that is reflected by the tokens density.

# Hello World

Hello World is a minimal example to show the library in action. It uses pre-recorded parameters that will be explained later. In the header of the HTML document, add the following:


<script type="text/javascript" src="_VisualSedimentation.js">
</script>
In the body, create a div myDemo to contain the viz, and init the library with the vs() function as follows:

<div id="myDemo">Hello World container</div>
<script>
	var scene =  $("#myDemo").vs().data('visualSedimentation');
</script>

# Settings

To pick up and customize the chart, a parameter object mySettings can be created and added to the library. Below is an overview of the structure of such settings. Look at the examples is the best way to see the possibilities.


mySettings = {

	// view port width and height 
	width:800,
	height:800,

	// chart position x,y, width and height
	chart:{
		x:500,      // chart.x on the schema
		y:206,      // chart.y on the schema
		width:300,  // chart.width on the schema
		height:400  // chart.width on the schema
	},
}

The following charts shows the position parameters of the chart. For the margin convention of the visualization part itself, see d3.js margin conventions.


Look at the source code of the following example for more details and see what can be done with the viewport.

# Chart configuration

Among the many parameters, the most important one is the chart.type that defines which chart is picked up and its properties. The choice of charts are the following:

# Bar Chart

The following configuration creates a simple bar chart with three bars (as in the default example):

chart:{ 
	type:'StackedAreaChart',
	colorRange:d3.scale.category10(),
	scale:d3.scale,
	spacer:5,
	wallColor:"rgba(230,230,230,0)",
	label:true,
},

# Pie Chart

Pie chart type is CircleLayout.

chart:{ 
	type:'CircleLayout',
},

# Bubble Chart

Bubble chart type is also CircleLayout with the addition of treeLayout = true to create it.

chart:{ 
 type:'CircleLayout',
 treeLayout = true
 spacer     = 1000      // space between two bubbles
 column     = 3         // the number of column for the positon setup
},

# Generative Chart (Advanced Users)

You can also create the following cool examples: heap chart, sylo chart, line chart, piechart without bounderies. To do so, the chart layout is setup by a function in the file _vs.chart.[type_name].js, you could make your own file if you want a special physical and visual layout. This file is defined by three functions:


chart:{ 
	type:'StackedAreaChart',
				// - CircleLayout,
				// - StackedAreaChart,
	colorRange:d3.scale.category10(),
	scale:d3.scale,
	spacer:5,
	wallColor:"rgba(230,230,230,0)",
	label:true,
},

# Adding Tokens

In the previous examples, the tokens were added automatically. To manually add tokens, the following settings are to be used :

scene.addToken({
   impulse:{
    angle:95,
    power:10,
    },
   texture:{
    src:'http://images.toocharger.com/img/graphiques/icones/sport/football/football/ballon_de_foot.10450.gif'
    },
   size:30,
   categorie:1
})

Below with the d3.js style:


scene.addToken({categorie:0})
	.attr("x", d3.select("#data1").attr("x"))
	.attr("y", d3.select("#data1").attr("y"))
	.attr("radius", 10)
	.attr("texture", "img/twitter_face.jpg")      
	.attr("strokeStyle", "red")
examples are avilable

# Incoming Point

Incoming points are location from which the tokens appear.

OThey can be customized dimension by dimension (here, three):

sedimentation.incoming.point:[{x:50,y:0},
                              {x:100,y:0},
                              {x:150,y:0}]}

Or into tokens x, y, attributes.

# Attributes

To customize a token, use the following parameters (defaults are in _vs.token.js):

	categorie:0,            // Corresponding to the datamodel (wich column in the data set)
	x:50,y:50,              // Incoming positions of token 

	// Graphical  
	size:10,                // Size (diameter) of the token 
	fillStyle:'#000000',    // FillStyle as an HTML5 canvas Property
	strokeStyle:'#000000',  // StrokeStyle as an HTML5 canvas Property
	lineWidth:0,            // LineWidth as an HTML5 canvas Property
	texture:{src:"URL"},    // Texture     
	shape:'round',          // Not implemented yet
	timestamp:null,         // Not implemented yet
	userdata:{},            // Add some personal information 
	callback:{},            // Interactions callbacks 

	// Physical 
	phy:{ density:10,friction:0,restitution:0},
	targets:[/*{x:null,y:null}*/], // use to a box2d elastic join 
	elbow:{/*x:null,y:null*/} // Not implemented yet 

#Callback for token

Callbacks are automatically executed functions, depending on the state of the token. Six callbacks are triggered :
Exemples are available here.


{
"model":[{label:"Column A"}],
"token":[{
   timestamp:1, 
   categorie:1,
   value: 1,
   userdata:{},
   callback:{
    suspension:function(){},
    accumulation:function(){},
    floculation:function(){}
   }
  }]
}

# Select tokens

To select one or multiple tokens, a selector function is provided:

var myToken = barChart.select('key','value');
Examples are available here for : select a group ,and here for selectAll.

# Easy customization

You can easily customize every single token.

.attr("radius", 10)
.attr("texture", "img/twitter_face.jpg")      
.attr("strokeStyle", "red")

#Decay Function

The decay function is null by default. It could be setup at the initialisation of the chart in the settings :


{
	sedimentation:{
		suspension:{
			decay:{power:1.01}
		}
	}
}

The decay function could also be change with the globalDecay():


.globalDecay()    // to get the decay power (return a float or null)
.globalDecay(1.09)// to setup the decay function at 1.09
.globalDecay(null)   // no decay

#Flocculation

Flocculation is when a token change state to become a part of the agregated area or to change. The physical body presenting the object is deleted. Flocculation is usually automatic du to the decay and the token.size.minimum parameter. But you can also do a flocculation of token selection by yourself with the function flocculate(). Exemple :

tokens = chart.selectAll("categorie",1) //select all token from categorie 1
tokens.flocculate()

Example: sediClock

#Strata

Strata compress aggregated data into a finite set of layers. Each layer represents a temporal interval. For instance, it can be the count of data during the last 30 seconds or last 5 minutes. Therefore the strata value is usually a function rather a fixed number.


	"strata":[
	[
		{value: 10, 
		 text: "first strata", 
		 texture: {url:"../..", size:1}, 
		 color: ..
		},
		...
	], [

The text, textures and color are settings for each strata. Texture images are any image file provided as a url to be mapped to each layer as a tile, and scale according to the size factor.

Fork me on GitHub