Skip to content

Instantly share code, notes, and snippets.

@deborre
Last active Jan 7, 2016
Embed
What would you like to do?
visualisationsController for custom d3.js viz framework
/*
A dedicated service to load d3.js and all other d3 related dependencies allows us to inject
this service as a dependency into other parts of our application. Further we can use promises
for example to ensure our dependecies have successfully loaded before attempting to make use of them.
*/
d3Service
/*
A common controller can be used with all types and instances of visualisations across the application.
It supplies general methods, functions and processes that we can maintain from one central location.
The main components could include the following:
*/
visualisationsController
/*
Internally we can declare and chain methods for initial setup, data retrieval, build and process.
i.e.
*/
visualisationsController
.setupVariables()
.setupVizElement()
.toggleLoading()
.queryData();
/*
Listeners for events are a great way to respond to user interactions or changes in the environment.
Setting them up in one central location makes them more maintainable and allows us to apply them to
all instances and types of visualisations.
*/
visualisationsController.listeners();
/*
A method for formatting commonly expected data types is a good thing to keep central in order to ensure
uniform and efficient processing.
It internally utilises other methods such as visualisationsController.formatNumber(), visualisationsController.parseDate() etc.
*/
visualisationsController.formatData();
/*
As we chain and invoke methods we can use simple conditionals to make them optional. For example a method invoking
data processing functions that can be defined as a standard in the common controller or overwritten
from modular components if needed.
*/
if( typeof visualisationsController.preprocessData === 'function' )
visualisationsController.preprocessData();
/*
Similarly a setup function that can be defined as a standard in the common controller
or overwritten from modular components if needed.
*/
if( typeof visualisationsController.setupViz === 'function' )
$setupStatus = visualisationsController.setupViz();
/*
And ultimately methods invoking a paint function that is used to actually render the visualisation's relevant elements on the page.
As this is likely to be a very different process for the different visualiation types this would be defined in the particular modules.
*/
if( $setupStatus === true && typeof visualisationsController.paintViz === 'function' )
$paintStatus = visualisationsController.paintViz();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment