Initial Exploration of D3

[bastianilso]

In order to start understanding what we can do with D3, we need to grasp possibilities and limitations. Here are some working questions:

• What are the basics of the D3.js syntax?
• How is data loaded into D3.js?
• What integration exists to use D3.js within the R programming language?

[aldsanms]

In order to start understanding what we can do with D3, we need to grasp possibilities and limitations. Here are some working questions:

• What are the basics of the D3.js syntax?
• How is data loaded into D3.js?
• What integration exists to use D3.js within the R programming language?

---

• D3.js Introduction to D3.js :

D3.js is a JavaScript library used to create interactive visualizations in the browser. It permit us to manipulate some elements of a webpage like HTML, SVG or Canvas elements. It is then possible to introduce, delete or modify the elements. It has several advantages like it is flexible, easy to use, fast and supports large datasets.

Download D3.js :

https://d3js.org/

Include D3.js :

or

Data Loaded :

D3 can handle different types of data that it loads from local variables or external files. We can use different types of external data like CSV, JSON, TSV or XML. To use an external file, one can send an http request to the specified URL to download files or data.

-Here is a way to load and print an external csv file with D3 :

It is then possible to change or modify any elements by selecting them. It can be done with « select » or « selectall ».

we can add some new elements at an selected element with « append »

-Here is a way to select elements and and a paragraph whit the text ‘Hello’ inside:

We can also change the style of a selected element like this:

-In order to make a transition we can use «transition» and change the transition time with « duration » :

• *R programming language Introduction to R programming language :

R is a programming language and free software developed by Ross Ihaka and Robert Gentleman in 1993. R possesses an extensive catalog of statistical and graphical methods. It includes machine learning algorithms, linear regression, time series, statistical inference to name a few. Most of the R libraries are written in R, but for heavy computational tasks, C, C++ and Fortran codes are preferred.

Combining the power of R and D3.js

In order to combining R and D3.js it exists two why.

*R does the data and the graph rendering, then exports this as an SVG, onwhich you bind your JavaScript later

or

*R does the data processing and sends this data to JavaScript to create an SVGimage.

---

[bastianilso]

Thanks @aldsanms ! These will be your next steps:

1. For combining R and D3, I think we need to look at how we can leverage the R package R2D3 (see website).
2. I would like you to look into R and R Studio, with the goal that you can run the example they provide in the link above. I think we should upload this example into the git repository and make it a starting point.

3. I would like you to prototype a version of the script above, where you include a background image to the bar chart.
4. After we have this example running, I will upload a concrete case (a specific visualization) and some data that I challenge you to develop a visualization for with D3.

[aldsanms]

Thanks @aldsanms ! These will be your next steps:

1. For combining R and D3, I think we need to look at how we can leverage the R package R2D3 (see website).
2. I would like you to look into R and R Studio, with the goal that you can run the example they provide in the link above. I think we should upload this example into the git repository and make it a starting point.

3. I would like you to prototype a version of the script above, where you include a background image to the bar chart.
4. After we have this example running, I will upload a concrete case (a specific visualization) and some data that I challenge you to develop a visualization for with D3.

---

I managed to change the background image directly from the JS code, and I played with different additional settings.

.js

// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20) // // r2d3: https://rstudio.github.io/r2d3 //

var barHeight = Math.ceil(height / data.length); const backgroundUrl = options.backgroundImage;

svg.selectAll('rect') .data(data)

.enter().append('rect') .attr('width', function(d) { return d width; }) .attr('height', barHeight) .attr('y', function(d, i) { return i barHeight; }) .attr('rx', 10) .attr('opacity', 0.5) .attr('stroke', "red") .attr('fill', options.color);

svg.attr('style', "background: rgb(255, 255, 255);background-image: url("+backgroundUrl+");background-repeat: no-repeat;background-attachment: fixed;background-position: center");

.R

library(r2d3)

r2d3( data=c(0.3, 0.6, 0.8, 0.55, 0.40, 0.20), script = "C:/StageA4/Rstudio/test/backgroundImage/backgroundImageJS.js", options = list( color = "steelblue", backgroundImage = "https://study-eu.s3.amazonaws.com/uploads/university/aalborg-university--aau--1-logo.png" ) )

[bastianilso]

@aldsanms great! Could you please upload the code to this git repository? I will make you some assignments for D3 visualizations we will need for the Whack-A-Mole dashboard.

[bastianilso]

This issue is finished, closing..