D3 new Team Member Training Plan

Day 1
Introduction
The nature of the business is the property maintenance. There are different kinds of
dashboards related to different aspects of property maintenance such as finance,
facility management, beyond green and so on. The report datasets are extracted
from a data warehouse. The dataset is provided as a csv file; it is not normalized.
The dashboard reports are hosted in uView which is a SharePoint portal. They are
hosted as SharePoint web parts. There are different clients who access the
particular portal and each client is given a unique client id. The report
configurations differ based on the given client id.
Dashboard go through will be taken place using the D3 standalone web application.
Exercise - D3.js self-study - http://d3js.org/
The purpose of this task is to let the new comer visit D3 official web site and
understand the basics of D3.js. And also he will be able to identify what is possible
with D3 by going through the examples done by Mike Bostock (the founder of D3.js)
and others.
Day 2
Understanding the basics of data visualization such as svg element, binding data to
elements and so on.
http://bost.ocks.org/mike/circles/
Exercise Start an induction project which contains an exercise for each day. Later
this project can also be used in training new comers.
Day 3
Data manipulation basics will be discussed.
Reading csv files with Queue.js Discussing the common problems with csv files i.e.
file corruption and large dataset related issues. In case the csv file is corrupted due
to missing commas, it can be corrected by opening the csv file as a comma
delimited file with Microsoft Excel.
Data manipulation with Crossfilter.js - http://blog.rusty.io/2012/09/17/crossfiltertutorial/
Crossfilter dimensions and groups
Exercise Creating a Crossfilter group for a given dataset.
Create a Crossfilter object, dimension and group for the given dataset and check the
data arrangement of key value pairs in group all().
Filter the dataset using another dimension and re-check the data in group all().

Try out some small examples of using the functions: reducecount, reduceSum, top,
and size.
Day 4
Exercise - Create a simple bar chart with x, y axis and tooltips using D3.js
The previous dataset can be used here as well; grouping is needed before feeding
the dataset to bar chart.
http://bost.ocks.org/mike/bar/
http://bost.ocks.org/mike/bar/2/
http://bost.ocks.org/mike/bar/3/
Day 5
Learn about other useful libraries. DC.js and NVD3.js
Exercise Create two interactive charts using DC.js and NVD3.js for a particular
scenario for a given dataset. Here it is required to create a month slider (bar chart)
using DC.js representing months of the dataset. Its y axis value should be the
variance which can be derived by subtracting the actual value from budget value.
All the values have to be rolled up by month.
There has to be NVD3 chart representing the budget values for each month. When
we slide the month slider NVD3 chart has to be redrawn.
Day 6
Geographic Visualization
Leaflet.js, Topojson.js, D3 map and Google map - http://bost.ocks.org/mike/map/
Exercise Draw a D3 map with circles for a given dataset. The topojson file
containing the lat long values is also given. According to the topojson dataset D3
map can be drawn. As the other dataset contains sample property details with the
corresponding building lat long values, those buildings can be marked on top of the
map as circles. The circle radius represents a financial value of the related building
(e.g. budget value)
Day 7
Animations and effects
Exercise Force layout implementation can be done for a give dataset. The new
comer can go through the previous examples prior to the exercises.
Day 8, 9 and 10
Exercise Sample dashboard creation containing a bar chart (slider), map and some
other control with a given dataset. The purpose of this exercise is to give a basic
understanding of the nature of a sample dashboard. He can select the libraries
according to the requirements and his preference.