d3 on Tom Roth

d3 on Tom Rothhttps://tomroth.dev/tags/d3/Recent content in d3 on Tom RothHugo -- gohugo.ioenWed, 24 May 2017 00:00:00 +0000Simulating the multi-armed bandit problemhttps://tomroth.dev/bandit/Wed, 24 May 2017 00:00:00 +0000https://tomroth.dev/bandit/Machine learning can be split up into many subfields. One of these subfields growing in relevance is reinforcement learning. One of the core problems in reinforcement learning is the multi-armed bandit problem. This problem has been well studied and is commonly used to explore the tradeoff between exploration and exploitation integral to reinforcement learning. To illustrate this tradeoff and to visualise different ways of solving the multi-armed bandit problem, I created a simulation using the JavaScript library d3.Force directed graphs: testing groundhttps://tomroth.dev/fdg-testing/Mon, 22 May 2017 00:00:00 +0000https://tomroth.dev/fdg-testing/I’ve written a decent amount of material about force directed graphs. This included posts for each of the forces that the d3-force module comes shipped with. I found that when I read about these forces, text-based explanations never really solidified the concepts for me. To really get a sense of how the forces worked, I had to build lots of force graphs and tweak the parameters manually to see what each of them did.Force directed graph: zoomablehttps://tomroth.dev/fdg-zoom/Thu, 20 Apr 2017 00:00:00 +0000https://tomroth.dev/fdg-zoom/This example builds off the d3-zoom articles to add zoom functionality onto our force directed graph. If you’ve got questions on how zoom works or what this code is really doing, check those articles out! Once you know what’s going on, adding zoom to force directed graph is really simple. Most of the code in the above example (click on the picture to see it) I’ve covered in other articles, so I won’t go over it again.How to combine drag and zoom in d3 version 4https://tomroth.dev/drag-zoom/Tue, 18 Apr 2017 00:00:00 +0000https://tomroth.dev/drag-zoom/Combining drag and zoom should be an easy task, and it is. But only if you do it right. In this article I’ll present two ways to apply drag and zoom to your d3 visualisations. One way is easy and simple, and one way is complicated and difficult, and yet both examples hold key insights. The easy way Link to heading Mike Bostock has written a simple example where he combines drag and zoom.Integrating Javascript and d3 into R notebookshttps://tomroth.dev/r-d3/Thu, 13 Apr 2017 00:00:00 +0000https://tomroth.dev/r-d3/Recently the team over at RStudio released R Notebooks. R Notebooks are really interesting. Here’s why: You can write code in several different languages in one document (including python, bash, dot, ruby, javascript, sql) You can write in Markdown You can write in HTML You can see your code as it runs Writing reproducible code is easier It’s easy to share code results with others It’s the intertwining of languages bit that interests me the most.Zoom in d3 version 4: selective zoominghttps://tomroth.dev/zoom-selective/Fri, 07 Apr 2017 00:00:00 +0000https://tomroth.dev/zoom-selective/Not everything has to enable zoom. You can selectively pick and choose which objects you’d like to enable zoom on. Consider this tale of two circles. We create two circles which we call circle1 and circle2. Circle1 is the circle on the left and circle2 is the circle on the right. Here’s the interesting bit. We define our zoom handler and set what happens when a zoom action is detected.Zoom in d3 version 4: minimal examplehttps://tomroth.dev/zoom-minimal/Mon, 03 Apr 2017 00:00:00 +0000https://tomroth.dev/zoom-minimal/In this post we’ll make a minimal example to demonstrate how zoom works. I’ll use a similar setup to this other example that was used to demonstrate drag - create circles on the screen at random and then see if we can zoom in on them. Nice and simple. Setup Link to heading First we’ll set up a simple scaffold for the example: <!DOCTYPE html> <meta charset="utf-8"> <svg width="960" height="600"></svg> <script src="https://d3js.Zoom in d3 version 4: understanding SVG transformshttps://tomroth.dev/zoom-svg/Wed, 29 Mar 2017 00:00:00 +0000https://tomroth.dev/zoom-svg/Zooming in d3 version 4 isn’t straightforward to pick up. Far from it. Just like force graphs, zoom in d3 has been separated into its own module. Understanding the API documents can be a little…confusing. Things start to make more sense once you realise that zoom is intricately linked to SVG transforms, and that zooming and panning can just be thought of as changing the transforms on SVG elements. So step one to understand zooming is to understand how the SVG transform works.Force directed graph: poppinghttps://tomroth.dev/fdg-popping/Sat, 18 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-popping/This graph exploits the unstable effects of setting the forceCollide strength parameter outside of [0,1]. //High strength value causes unstable effects var collide_force = d3.forceCollide(radius) .strength(10); The result is a kind of “popping effect” as the nodes violently push each other away. Here’s another example. This graph takes out the link force, sets the strength parameter for forceCollide to an unstable value, and implements an attractive force between particles.Force directed graph: bounding boxhttps://tomroth.dev/fdg-bounding-box/Fri, 17 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-bounding-box/In this example we’ll keep the force directed graph constrained inside a box. The nodes won’t be able to go outside. The basic gist of it is that you impose a constraint that takes effect on every tick of the simulation. You can either put this code inside the tick function, or you can define a custom force to do the work for you. Let’s go through both methods. Method 1: use the tick function Link to heading The first method is to put the constraints inside the tick function.Force directed graph: custom forceshttps://tomroth.dev/fdg-custom/Fri, 17 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-custom/There’s two types of forces in the d3-force module – preshipped forces and custom forces. Preshipped forces have already been written for you. Custom forces you write yourself. Here we’ll cover custom forces. What is a custom force? Link to heading A custom force is simply a function that modifies the positions and velocities of nodes. See the d3 API. You write custom forces to achieve effects that aren’t possible by using the preshipped forces.Force directed graph: growing and shrinking nodeshttps://tomroth.dev/fdg-grow/Fri, 17 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-grow/This example was written as a demonstration of custom forces with d3’s force directed graph. The custom forces change the size of the nodes over time. The blue “male” nodes gradually grow larger and the pink “female” nodes gradually grow smaller. Implementing the custom force is simple. On each tick of the simulation, we loop through every node and check to see if its sex attribute is M or F.Force directed graph: splitting nodeshttps://tomroth.dev/fdg-split/Fri, 17 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-split/This is a somewhat silly example of adding custom forces to a forceSimulation. All of the blue male nodes are pulled to the right side and all the pink female nodes are pulled to the left side. There’s also a bounding box effect to stop the nodes receding into the void. The custom force splitting_force() causes this effect. What’s a custom force? Click here for a refresher. // bring all male nodes to right side, all female nodes to left side function splitting_force() { for (var i = 0, n = nodes_data.Force directed graph: driftinghttps://tomroth.dev/fdg-drifting/Thu, 16 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-drifting/This force graph drifts while the simulation is running. What happens is that every tick adds 1 to the x and y position of the centering force forceCenter, so the graph slowly drifts off the screen. Here’s the key bit of code: function tickActions() { //update circle positions each tick of the simulation node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); //update link positions //simply tells one end of the line to follow one node around //and the other end of the line to follow the other node around link .Force directed graph: squashedhttps://tomroth.dev/fdg-squashed/Thu, 16 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-squashed/This example uses a combination of the positioning forces forceX and forceCenter to create a “squashed” aesthetic. The centering force forceCenter keeps the graph in the centre of the svg element, while forceX drags all the nodes towards x-position 400 on the svg element. var force_X = d3.forceX(400) .strength(0.2); var center_force = d3.forceCenter(width/2, height/2); The result is a tall and thin graph. Doing the same with forceY instead of forceX leads to a short and fat graph instead.Force directed graph: collision forceshttps://tomroth.dev/fdg-collision/Wed, 15 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-collision/There’s two types of forces in the d3-force module – preshipped forces and custom forces. Preshipped forces have already been written for you. Custom forces you write yourself. Here we’ll cover the preshipped force that handles collisions between nodes - forceCollide. Using forceCollide will prevent your nodes from rolling right over each other. Its purpose is to stop nodes from overlapping. forceCollide is designed for those many situations where you crave some order in your nodes.Force directed graph: radially expandinghttps://tomroth.dev/fdg-expand/Wed, 15 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-expand/This is an example of the effect you can generate by playing with the forceLink parameters and the forceManyBody parameters. This graph radially expands. Try dragging it around - nodes will stay where you put them but the rest will expand outwards. This effect can be created in two steps: Set the forceLink strength to 0. This removes the link force while maintaining the lines between nodes. Set the charge to a small negative number.Force directed graph: charge forceshttps://tomroth.dev/fdg-charge/Sun, 12 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-charge/There’s two types of forces in the d3-force module. These are preshipped forces and custom forces. Preshipped forces have already been written for you. Custom forces you write yourself. Here we cover a preshipped force - forceManyBody(). This is perhaps the defining force of the force-directed graph. You use this force to simulate the charged-particles model, where every node repels (or attracts) every other node until we reach a stable state.Force directed graph: link forceshttps://tomroth.dev/fdg-link/Sun, 12 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-link/There’s two types of forces in the d3-force module – preshipped forces and custom forces. Preshipped forces have already been written for you. Custom forces you write yourself. In this post we cover the force that links nodes together - forceLink(). This is the force that pushes linked nodes together or pulls them apart. Parameters Link to heading Like the other forces, there’s a number of parameters you can tweak to customise your force directed graph.Force directed graph: positioning forceshttps://tomroth.dev/fdg-position/Sun, 12 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-position/There’s two types of forces in the d3-force module – preshipped forces and custom forces. Preshipped forces have already been written for you. Custom forces you write yourself. Here we’ll cover the three preshipped positioning forces: forceCenter forceX forceY Using positioning forces is easy. There’s not too many parameters to play with and they’re easy to understand! forceCenter Link to heading forceCenter applies a force to all nodes that’ll bring their centre of mass towards a given point.Force directed graph: using node and link attributeshttps://tomroth.dev/fdg-attributes/Wed, 08 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-attributes/We’ve slowly been adding more functionality onto our graph. It’s not quite useable yet, but not far off. Today’s topic: incorporating node attributes and link attributes into our graph. It’ll really bring our graph to life! Attributes Link to heading When you specify data for nodes and links you can put in whatever fields you like. Let’s look at an example. Here’s some data. I’ve taken some of the characters from the fantastic online serial Twig and mapped out some relationships between them.Force directed graph: dragablehttps://tomroth.dev/fdg-dragable/Mon, 06 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-dragable/This is the second of two posts explaining the basics of drag and drop. You can find the first post here. Lets take the minimal working example as a template. We’re going to make the same graph dragable so that we can interact with it. Click on the picture above to see what this looks like! You also need to know how drag and drop works before diving into this article.Force directed graph: sticky nodeshttps://tomroth.dev/fdg-sticky/Mon, 06 Mar 2017 00:00:00 +0000https://tomroth.dev/fdg-sticky/Sticky nodes are where nodes are “stuck” once you’ve finished dragging them. They won’t move again once the mouse has been released - unless you drag them again, of course. Click on the image above for spoilers! It’s super easy to make your nodes sticky. Start with the example here. Scroll down to the drag_end function. It looks like function drag_end(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } Currently it is telling the force directed graph to release the nodes when the mouse is released.Get drag and drop working with d3https://tomroth.dev/drag-example/Tue, 28 Feb 2017 00:00:00 +0000https://tomroth.dev/drag-example/This is the first of two posts explaining the basics of drag and drop. Want the second post? Here it is!. In this post we’ll start to become familiar with the module d3-drag. This module is a useful and flexible one that has many applications. Spending some time understanding the basics of this module can pay large benefits. The best way to learn is through examples - so we’re going to create a simple example to see what exactly is happening.Force directed graph: minimal working examplehttps://tomroth.dev/fdg-minimal/Sat, 25 Feb 2017 00:00:00 +0000https://tomroth.dev/fdg-minimal/The goal of this post is to take what we covered earlier and make a simple working example of a force-directed graph. We’ll start with just getting the nodes working, adding the links afterwards to complete the example. Find what we’ll be building here. So open up a text file in your favourite editor. Fire up a local server. Find yourself a cool drink or two. Ready? Let’s begin. Nodes Link to heading First thing we’ll do is set up a basic skeleton for our force directed graph.Force directed graph: basicshttps://tomroth.dev/fdg-basics/Sat, 18 Feb 2017 00:00:00 +0000https://tomroth.dev/fdg-basics/To create a D3 force directed graph you really only need three things: Nodes A simulation Forces to act on the simulation There’s also some things that are optional, but real useful: Links Node attributes Great. Let’s learn more. Nodes Link to heading What are nodes? They’re an array of objects. Nodes can be anything. Here’s three examples: people in a friendship group telegraph poles in a distributed grid articles on a Wikipedia page Nodes are whatever data objects that you want to visualise.Simple examples with transition chaininghttps://tomroth.dev/transitions/Thu, 02 Jun 2016 00:00:00 +0000https://tomroth.dev/transitions/There are a few explanations and tutorials on the web about how to perform chained transitions on the same element using d3. Also existing are lots of demonstration: see this and this, for example. I couldn’t find any dead-simple tutorial out there, however. This example will be just about as simple as it gets. Let’s create a circle attached to a SVG element and use this as a running example. You can just do this in the console for a browser with d3 activated.The story of d3 and the Start and End event listeners.https://tomroth.dev/event-listeners/Sun, 29 May 2016 00:00:00 +0000https://tomroth.dev/event-listeners/One of the cool things about d3 is that we can “listen” for transition events. These listeners can be very useful things. I’ll go through two of these in this blog post: start, and end. The use of these is best explained through examples. Let’s start with the start listener (ha!). Start listeners Link to heading One use of a start listener is to trigger a function to run at the start of a transition.Dancing madness: fun with mouse events and d3https://tomroth.dev/dancing-madness/Sun, 22 May 2016 00:00:00 +0000https://tomroth.dev/dancing-madness/There’s something oddly satisfying about making things appear through a mouse click. It’s like the webpage has recognised your supremacy over it and is bowing to accommodate your wishes. You are its master. You have power. Are you a person who likes to feel powerful? Read on. We’re going to create something truly amazing. Our task: to click inside a rectangle, and have dancing people appear. Why dancing people, you ask?Graphs 'n stuff: simple line chart with d3https://tomroth.dev/linechart/Sun, 08 May 2016 00:00:00 +0000https://tomroth.dev/linechart/Tennis: a sport almost designed for statistical analysis. You have only two primary variables (players) up against each other - whereas for something like soccer, you have 22 players who can impact the play. Much simpler - yet infinitely more complicated at the same time. With this in mind (and with the aid of the mountains of tennis data available) I decided to trial a simple betting strategy. Simply put, it compares calculated probabilities for the outcome of tennis matches against the odds done by bookmakers.Graphs 'n stuff: simple bar chart with d3https://tomroth.dev/barchart/Sun, 01 May 2016 00:00:00 +0000https://tomroth.dev/barchart/This next introductory example is a simple bar chart with a rollover tooltip. This bar chart uses the d3-tip tooltip capabilities to enhance on the tooltip shown in our scatterplot. It’s a graph of the number of internet users over time, also displaying the percentage of the world’s population as rollover information. The code is here. I’ll be abandoning the Wp-D3 plugin I’ve been using for the moment (it’s just too fiddly for my liking) and instead link directly to the code with the graph.Graphs 'n stuff: simple scatterplot with d3https://tomroth.dev/scatter/Sun, 17 Apr 2016 00:00:00 +0000https://tomroth.dev/scatter/Recently I’ve been learning how to use d3.js (D3), often touted as an incredibly powerful cool for creating graphics. I thought it’d be helpful to any other novices out there to write up my D3 examples as I do them. I come from a statistical background and while I have plenty of experience coding in R, JavaScript is a whole new challenge. I’ll be writing up short explanations on any particular aspect that confuses me with a particular visualisation.