Robust D3

Welcome to Robust D3 HomePage

Robust D3 follows the simplified approach of data visualization found in Python and R without trying to remove the signature visualization power found in D3. This is currently in beta and Robust D3 only has 2 plots - barplots and scatterplots. The code below shows how easy it is to create the first barplot.

Only 3 steps are required to create a plot:

1. Create Canvas: canvas(canvasID, width px, height px, appendTo )
2. Create Plot: canvas.plotName()
3. Graph Features: canvas.featureFunction()

//institution type = "character" | score type = "numeric"
//canvas(id, width, height);
var horizontalBarPlot = canvas("HorizontalbarPlot", 600, 600, "#main_plots"); 
horizontalBarPlot.updateMargin("right", .17);
horizontalBarPlot.updateMargin("left", .20);
horizontalBarPlot.barPlot(data2015, "score", "institution");


//The rest of the code are features to make visually pleasing graphs
horizontalBarPlot.createTips("country");
var colorArray1 = ["#1F77B4", "#D62728", "#9467BD", "#FF7F0E", "#2CA02C", "#8C564B", "#FF6666", "#F8CA40"];
var countryScale = d3.scaleOrdinal().range(colorArray1);
horizontalBarPlot.colorBy("country", countryScale, true);
horizontalBarPlot.updateDesc("Score", "", "Top 25 World Ranked Institution ");

Robust D3's main objective is to simplify plot attributes. Using the same approach we are able to create scatter plots and Time Series lines.

//Scatter Plot
//Create Canvas
var SP = canvas("scatterPlot", 600, 600, "#main_plots");
SP.updateMargin("left", .10);
SP.updateMargin("right", .17);

//Scatter Plot
SP.scatterPlot(getTopEmployment, "world_rank", "alumni_employment");

//Scatter Plot Properties
SP.updateDesc("World Ranking", "Alumini Employment Ranking", "Alumni Employment Ranking Impact on World Ranking");
SP.colorBy("country", countryScale, true);
SP.createTips("year"); 

The example below creates an identical verision of Mike Bostock Multi-Series Line Chart https://bl.ocks.org/mbostock/3884955 using Robust D3 approach.

//Line Plot
//Create Canvas
  var timeSeriesPlot = canvas("timeSeriesPlot", 1220, 500, "#main_plots");  
  
//Plot Path
timeSeriesPlot.timeSeries(data, 'date', 'Amount', 'City');

//Attributes
timeSeriesPlot.updateMargin("left", .1);
timeSeriesPlot.updateMargin("right", .17);
var colorArray1 = ["#1F77B4", "#D62728", "#9467BD"],
CitiesColor = d3.scaleOrdinal().range(colorArray1);
timeSeriesPlot.colorBy("City", CitiesColor, true);
timeSeriesPlot.updateDesc("Date", "Temperature, ºF", "Multi-Series Line Chart");