How To Guide:
Intro to Visualizations

About D3

What is it?

D3 stands for Data-Driven Documents. It’s a JavaScript library used to create visualizations from data. It uses HTML, SVC and CSS to do so.

D3 was developed at Stanford and was the successor to Protovis.

The main technical aspects of D3 include selections, transitions, and data binding. I will not be covering transitions here since that is a more advanced aspect of D3 and is not crucial to implementation. If you would like to learn more about transitions, this is a great resource.

What makes it unique?

Data Formats Supported

There are built in methods for parsing JSON, CSV, text, html, tsv, and xml.

Official Website

https://d3js.org/

Usage

To use D3, it should be included in your page with this link. Updates are posted to the website when a new version comes out, but the old ones remain available.

<script src="https://d3js.org/d3.v4.min.js"></script>

Why do I care about D3?

This guide was written as an assignment for Oregon State's CS 290 course. I selected this topic because I am a business intelligence developer working with SAP's platforms including BOBJ (BusinessObjects). My team is fairly new within the company and we are quickly learning our limitations for graphical representations. I plan to leverage what I learned from researching and writing this in development of extensions for use with Design Studio. For those who are unfamiliar, Design Studio makes heavy use of CSS and JavaScript.

Image