From the d3js.org website:
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
A prerequisite for producing D3 visualizations is a working knowledge of JavaScript (which I am lacking). While there are introductory tutorials available for D3 (e.g. https://github.com/mbostock/d3/wiki/Tutorials) , I would need to devote more time to learning JavaScript in order to be able to produce my own visualizations from a data set. Therefore, (to borrow a Bereiter phrase), I will instead use this space to describe my knowledge “about” rather than my knowledge “of” D3.
D3 Visualizations
D3 can be used to produce a wide variety of different visualizations – both interactive and non-interactive (e.g. https://github.com/mbostock/d3/wiki/Gallery). Because they are written in JavaScript, these visualizations can be displayed in any web browser, so users do not need to download any particular software or plugins in order to be able to view or interact with them.
Sunburst D3
One example that I played with is called “Sequences Sunburst.” This type of visualization is similar in function to a tree-map, except it uses a radial layout rather than a linear layout. This particular example depicts a sequence of events (i.e. a summary of users’ navigation paths through a website). Here, a “funnel” (see Figure 1) shows the percentage of users that followed a particular navigational path (e.g. from the home page to a particular product).
Sankey D3
Another visualization that I thought was interesting and potentially relevant to representing curriculum designs was the Sankey diagram. A Sankey diagram is a kind of flow diagram, in which the width of the arrows is shown proportionally to the flow quantity. Sankey diagrams are typically used to visualize energy or material transfers between processes; however I can see them being used to represent different possible learning pathways through a curriculum design – e.g. showing different activity systems, sequences, or student behavioural patterns. In general, Sankey diagrams put a visual emphasis on the major transfers or flows within a system and are helpful in locating dominant contributions to an overall flow.
With most of the visualization examples, the authors have provided the JavaScript code so that other users can copy it and/or modify the code for their own purposes.
This post is part of a series in which I reflect on my experiences as a first-time explorer of various pieces of learning analytics and data mining software applications. The purpose of these explorations is for me to gain a better understanding of the current palette of tools and visualizations that may possibly support my own research in learning analytics within the context of a face-to-face/blended collaborative learning environment in secondary science.
Alisa Acosta 