https://tomroth.dev/categories/tech/Recent content in tech on Tom RothHugo -- gohugo.ioenThu, 16 Feb 2023 00:00:00 +0000https://tomroth.dev/compgraph3/Thu, 16 Feb 2023 00:00:00 +0000https://tomroth.dev/compgraph3/This is the third part of a series on creating a computational graph in Python. You can go back to part one and part two. There’s a bit of code in this post. Here is the final code in np_wrapping.py. The module for numpy_autograd is here. In the last post we created computational graphs for a function, but it was a bit hard to use. We also had these problems:https://tomroth.dev/compgraph2/Wed, 15 Feb 2023 00:00:00 +0000https://tomroth.dev/compgraph2/This is the second post in a series on computational graphs. You can go back to the previous post or ahead to the next post. If you’d like to see what we are working towards in these posts, here is the Github link: Last time we looked at computational graphs and their use in autodiff packages. looked at the autodiff problem and the structure of the grad function in autograd showed how Python breaks down expressions to create computational graphs created a simple graph manually using a simplified Node class How do we automatically create a computational graph for a function?https://tomroth.dev/compgraph1/Tue, 14 Feb 2023 00:00:00 +0000https://tomroth.dev/compgraph1/This is the first post in a series on computational graphs. You can go to the next post or skip ahead to the third post. If you’d like to see what we are working towards in these posts, here is the Github link: Computation graphs have many uses. Here I’ll be presenting it as they used for autodifferentiation. For this post, I’ll assume you have some familiarity with backpropagation and autodifferentiation (also known as autodiff).https://tomroth.dev/weight_tying/Fri, 07 Oct 2022 00:00:00 +0000https://tomroth.dev/weight_tying/Weight-tying is where you have a language model and use the same weight matrix for the input-to-embedding layer (the input embedding) and the hidden-to-softmax layer (the output embedding). The idea is that these two matrices contain essentially the same information, each having a row per word in the vocabulary. The concept seems to be first mentioned by Press and Wolf in 2016. Below we illustrate this with a RNN. This post assumes that you are somewhat familiar already with how a RNN works.https://tomroth.dev/pytorch-cnn/Wed, 14 Apr 2021 00:00:00 +0000https://tomroth.dev/pytorch-cnn/Find the code for this blog post here: https://github.com/puzzler10/simple_pytorch_cnn We will build a classifier on CIFAR10 to predict the class of each image, using PyTorch along the way. This is basically following along with the official Pytorch tutorial except I add rough notes to explain things as I go. There were a lot of things I didn’t find straightforward, so hopefully this piece can help someone else out there. If you’re reading this, I recommend having both this article and the Pytorch tutorial open.https://tomroth.dev/invariance/Fri, 06 Mar 2020 00:00:00 +0000https://tomroth.dev/invariance/Sensitivity-based adversarial attacks Link to heading Neural networks are vulnerable to adversarial attack, and there’s a lot of talk about this. There are many definitions of an adversarial attack, but let’s go with this one: an input to a model designed to produce an incorrect output. Models can run on many different types of data (text, audio, tabular) but let’s use images as a working example. The most well-known kind of adversarial attack is to add some kind of perturbation to an image to make a classifier mislabel it.https://tomroth.dev/deepfool/Thu, 27 Feb 2020 00:00:00 +0000https://tomroth.dev/deepfool/Paper: Deepfool: a simple and accurate method to fool deep neural networks. (Moosavi-Dezfooli et al, 2016). Idea: If you want to find an adversarial example to an image, look for the closest decision boundary, and then move the image towards a linear approximation of the decision boundary by orthogonally projecting it onto the boundary. Once it crosses the boundary it will be an adversarial image. Background Link to heading Affine functions.https://tomroth.dev/exploding_vanishing_gradients/Wed, 19 Feb 2020 00:00:00 +0000https://tomroth.dev/exploding_vanishing_gradients/The following code explores how gradients explode or vanish when backpropagating through a neural network. It depends on the type of activation function you are using and how many layers you have in the network. Observations for some activation functions: sigmoid tends to lead to vanishing gradient sometimes with relu you get a lot of zeros in the gradient. I didn’t see any vanishing gradient with relu, but there was exploding gradient.https://tomroth.dev/decorators/Tue, 11 Feb 2020 00:00:00 +0000https://tomroth.dev/decorators/Decorators without arguments Link to heading Decorators modify functions. They can also modify classes, but they’re mainly used with functions. Decorators are just a way to simplify syntax. Here’s an example of a decorator at work. @some_decorator def add(x,y): return x + y This is the same thing as def add(x,y): return x + y add = some_decorator(add) Without the decorator, we’d call some_decorator on add and assign the answer back to add.https://tomroth.dev/ten-failed-detectors/Mon, 20 Jan 2020 00:00:00 +0000https://tomroth.dev/ten-failed-detectors/Some rough notes of this paper. Paper link: Adversarial examples are not easily detected: Bypassing ten detection methods. (Carlini and Wagner, 2017) In brief: Adversarial defences are often flimsy. The authors are able to bypass ten detection methods for adversarial examples. They do so with both black-box and white-box attacks. The C&W attack is the main attack used. The most promising defence evaluated the classification uncertanity of each image through generating randomised models.https://tomroth.dev/intdim/Tue, 07 Jan 2020 00:00:00 +0000https://tomroth.dev/intdim/The paper in one sentence. The Pareto principle for neural networks: what’s the least number of parameters needed for to achieve most of the results? Structure of this article. I give an introduction to objective landscapes and talk about how to define solutions. I use these concepts to describe the subspace training method. Finally, I summarise the key results of the paper. Objective landscapes Link to heading For every combination of neural network architecture and dataset, the shape of the objective/loss function is fixed.https://tomroth.dev/backprop-toposort/Sun, 01 Dec 2019 00:00:00 +0000https://tomroth.dev/backprop-toposort/Neural networks need to update their weights with respect to a loss function. Rather than compute these weight updates manually, today we usually use automatic differentiation packages and tools. We call these autodiff systems. To do their job, autodiff systems construct computational graphs of the function they’re trying to find the gradient of. These computational graphs are key to backpropagation. I won’t go into how these graphs are constructed here.https://tomroth.dev/responsive-images/Fri, 22 Nov 2019 00:00:00 +0000https://tomroth.dev/responsive-images/Let’s start by introducing some of the HTML/CSS you’ll find when dealing with images. The <img> tag: The most common and probably easiest option for displaying an image. It’s a tag you’ve probably seen before. Use the src attribute to link to the image you’d like to show. But you can also use srcset and sizes to specify responsive images. More on that later. <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.https://tomroth.dev/progressive-enhancement/Sat, 16 Nov 2019 00:00:00 +0000https://tomroth.dev/progressive-enhancement/When you build a website, it should work everywhere. Websites should work with new browsers, but also with old browsers. They should work for users using speech-navigation software, and for those with slow mobile connections. Websites should also work for agents who don’t use them visually, like a web crawler. You’d love to show your awesome website properly to every user. Unfortunately, in real life that’s often not possible. So go for second best: provide some core functionality to everyone, and then give the enhancements to the browsers that can handle it.https://tomroth.dev/react-sound/Mon, 04 Nov 2019 00:00:00 +0000https://tomroth.dev/react-sound/One Link to heading Get the sound file you want (e.g. sound.mp3) and put it somewhere in your src directory. Two Link to heading Add this to your webpack.config.js file. Make sure you have file-loader installed (run npm install --save-dev file-loader if you don’t.) { test: /\.mp3$/, loader: 'file-loader', query: { name: 'static/media/[name].[hash:8].[ext]' } } Three Link to heading Import the file at the top of your JavaScript file. Put the path relative to the JavaScript file you are loading the sound from.https://tomroth.dev/dvrl/Thu, 17 Oct 2019 00:00:00 +0000https://tomroth.dev/dvrl/Data Valuation using Reinforcement Learning Link to heading Paper link: https://arxiv.org/pdf/1909.11671.pdf At a glance Link to heading Machine learning models use data for training. But not all data points are equally valuable. A data point can be low-quality for a variety of reasons, such as incorrect labelling, noisy input, being too common, or it’s not from the same distribution as the test set. Whatever the case, removing bad datapoints tends to increase model performance.https://tomroth.dev/dpr/Fri, 27 Sep 2019 00:00:00 +0000https://tomroth.dev/dpr/From the fundamentals Link to heading The viewport of a device is the size of the screen area. This doesn’t include the space the browser window takes up with its menu, bookmarks etc. Different devices have different viewport sizes. Laptops and monitors have larger viewports than smartphones do. A website will display on the viewport of the device. This is where HTML and CSS code is displayed. Web developers use CSS to style and position elements.https://tomroth.dev/css-pixels/Tue, 17 Sep 2019 00:00:00 +0000https://tomroth.dev/css-pixels/Let’s start off with px and pt Link to heading You’ve probably seen the units px and pt before in CSS. If you didn’t know, px stands for pixel unit and pt stands for point. The units px and pt are related. 1px is always equal to 0.75pt, just like how 1 inch is always equal to 2.54 cm. Also, 1pt is equal to 1/72nd of 1 inch, meaning that 1px ends up about 0.https://tomroth.dev/alphad3m-grammar/Thu, 27 Jun 2019 00:00:00 +0000https://tomroth.dev/alphad3m-grammar/There’s this lovely little paper called Automatic Machine Learning by Pipeline Synthesis using Model-Based Reinforcement Learning and a Grammar. It’s by Drori et al (ICML workshop 2019), and here’s the paper link: https://arxiv.org/pdf/1905.10345.pdf But, what is AlphaD3M? Don’t know? Read this summary before continuing, brave adventurer. I won’t give you an overview of this paper here (but the title kind of already does). So, what’s interesting about it? The takeaways? Give it to me nice and straight, you cry, and don’t you dare waste words on frivolous sentences.https://tomroth.dev/alphad3m/Sun, 23 Jun 2019 00:00:00 +0000https://tomroth.dev/alphad3m/Heard about AlphaD3M? Want to know what it is? You’re in luck! Overview Link to heading What is AlphaD3M? It’s an AutoML system. It was first shown at the ICML 2018 AutoML Workshop. For a given dataset, and a given task, AlphaD3M builds a machine learning pipeline. Confused? Here’s an example of how this could work. Dataset: Iris Task: Multiclass classification of the species column Metric: Log loss Pipeline: Create new column: | e.https://tomroth.dev/seq2sql/Thu, 20 Jun 2019 00:00:00 +0000https://tomroth.dev/seq2sql/Seq2SQL: Generating structured queries from Natural Language using Reinforcement Learning (2017) Link to heading Paper link: https://arxiv.org/pdf/1709.00103.pdf Authors: Victor Zhong, Caiming Xiong, Richard Socher Here’s my notes from this paper. Seq2SQL uses the Seq2Seq model as a starting point The output of the seq2seq model is unnecessarily wide for SQL queries. In other words, the paper is only interested in a small subset of the seq2seq output space. As a result, the output of Seq2SQL is limited to the union of words in the question, SQL commands and table headers The paper created its own datasets.https://tomroth.dev/speech-beta/Sun, 26 May 2019 00:00:00 +0000https://tomroth.dev/speech-beta/It’s a straightforward two-step process. One: make sure you have version 1.0.0 or later of google-cloud-speech (use !pip freeze | grep google-cloud-speech) Two: Instead of importing the client libraries like from google.cloud import speech from google.cloud.speech import enums, types import them like from google.cloud import speech_v1p1beta1 as speech, storage from google.cloud.speech_v1p1beta1 import enums, types The beta features should now be available for you to use.https://tomroth.dev/plotly-theme/Thu, 18 Apr 2019 00:00:00 +0000https://tomroth.dev/plotly-theme/I made a scatter plot with plotly_express. It didn’t look good. So I wondered how to change the theme. It took me way too long to figure out. First I looked through the documentation here. I didn’t seem to see any relevant source code. Instead was a bunch of stuff about creating a new theme. Not useful. Finally I found code like fig.layout.template = 'plotly_dark' buried in an image. Turns out that’s how you do it.https://tomroth.dev/aginity-snippets/Sat, 23 Mar 2019 00:00:00 +0000https://tomroth.dev/aginity-snippets/The Aginity code snippets function is a good time-saver. To use code snippets, type in some combination of letters and hit Alt-C. Those letters then expand into a SQL statement. By default you have sf (select * from <blank> limit 1000), and sfw (select * from <blank> where <blank> limit = 1000). But you can add your own, which is where they really shine. Use them for things you type again and again.https://tomroth.dev/sql-stats/Sat, 26 Jan 2019 00:00:00 +0000https://tomroth.dev/sql-stats/I worked with a large table, with a thousand numeric columns, and some of them were dodgy and I wanted to know which. It would help to find basic summary statistics, like the min, max and mean of each column, so let’s do that now. What to do? Link to heading I really didn’t want to do this: select min(c1), max(c1), mean(c1), min(c2), max(c2), mean(c2), min(c3) -- and so on for 1000 columns from xyz The alternate idea: write SQL, that generates SQL!https://tomroth.dev/gcp-docker/Tue, 27 Nov 2018 00:00:00 +0000https://tomroth.dev/gcp-docker/I set up a new virtual machine using the Google Cloud Platform and wanted to install Docker. Although I couldn’t get the official instructions to work, I found this tutorial for installing Docker using Debian 9, which worked since GCP virtual machines use Debian as their Linux distribution. Here’s how to do it. Start up a new virtual machine using GCP. Then ssh into the box (with gcloud compute ssh xxxx or something similar) and copy paste this into the terminal prompthttps://tomroth.dev/dqn-nnet/Thu, 01 Nov 2018 00:00:00 +0000https://tomroth.dev/dqn-nnet/After building the basic DQN, I started trying some different neural network architectures. I found vastly different results between them. Spoiler: more complex doesn’t equal better. Almost the opposite. Here are some results for the rewards obtained in each episode. I trained these models on cartpole-v1. Each was trained for 1000 episodes. Disclaimer: I did only one run with each architectures. I kept other hyperparameters the same as the previous post, but there are likely some interaction effects unaccounted for.https://tomroth.dev/dqn-simple/Wed, 31 Oct 2018 00:00:00 +0000https://tomroth.dev/dqn-simple/Click the image above to see the source code. Last time, we established some theory for our DQN. Now it’s time to implement it. We won’t build a full DQN from the DeepMind paper, not yet. Instead we’ll build a simplified version. I call it the basic DQN. The basic DQN is the same as the full DQN, but missing a target network and reward clipping. We’ll get to that in the next post.https://tomroth.dev/dqn-basics/Tue, 23 Oct 2018 00:00:00 +0000https://tomroth.dev/dqn-basics/In February 2015, Google Brain published a paper combining deep neural networks and reinforcement learning for the first time - called DQN (deep q-network). It was a landmark moment. DQN was the first algorithm that could successfully play a wide range of Atari games. Other algorithms at the time could perform well at a single game but couldn’t generalise across games. Impressively, DQN was able to perform above human level at a range of Atari games using only the screen pixels as input.https://tomroth.dev/gym-play/Sat, 13 Oct 2018 00:00:00 +0000https://tomroth.dev/gym-play/Ever wanted to play the games that your reinforcement agents are learning? OpenAI have a keyboard agent to let you try out the gym environments yourself. Here’s how to set it up. First, if you haven’t already, install the gym package with pip install gym, or by following the instructions here. Then: Go to this link. Click “raw”. Copy the text and save it to a file called keyboard_agent.py Open up a shell prompt and navigate to where you saved the file.https://tomroth.dev/sarsa-qlearning/Mon, 08 Oct 2018 00:00:00 +0000https://tomroth.dev/sarsa-qlearning/In this post, we’ll see how three commonly-used reinforcement algorithms - sarsa, expected sarsa and q-learning - stack up on the OpenAI Gym Taxi (v2) environment. Note: this post assumes that the reader is familiar with basic RL concepts. A good resource for learning these is the textbook by Sutton and Barto (2018), which is freely available online. Sarsa, Expected Sarsa and Q-Learning Link to heading So, what are these algorithms?https://tomroth.dev/effective-learning/Sun, 22 Jul 2018 00:00:00 +0000https://tomroth.dev/effective-learning/Want to squeeze the most out of each hour studying? Want to make your learning time as efficient as possible? The first thing is to use good study methods. They will give you the biggest opportunities for improvement. The second thing is to read this article. Here are six ways to get the most from your learning time. 1.Alternate between focused and diffuse thinking Link to heading Trying to solve a problem?https://tomroth.dev/policy-eval/Sun, 27 May 2018 00:00:00 +0000https://tomroth.dev/policy-eval/Today, we explore policy evaluation. We’ll explain it by example. Given a policy, policy evaluation aims to find the value of each state $ v_\pi (s) $. That’s what we’ll be doing with the equiprobable random policy. The scenario Link to heading Taken from the textbook “An Introduction to Reinforcement Learning” (Sutton and Barto), Gridworld is the following scenario. There is a grid with sixteen squares. The top left and the bottom right square are terminal squares.https://tomroth.dev/keras/Mon, 06 Nov 2017 00:00:00 +0000https://tomroth.dev/keras/Building models in Keras is straightforward and easy. If you’re reading this, you’re likely familiar with the Sequential model and stacking layers together to form simple models. But what if you want to do something more complicated? Enter the functional API. For complex models the functional API is really the only way to go - it can do all sorts of things that just aren’t possible with the Sequential model. Models with multiple inputs and outputs, models with shared layers - once you start designing architectures that need these things, you will have to use the functional API to build your model.https://tomroth.dev/nearest-neighbour/Sat, 26 Aug 2017 00:00:00 +0000https://tomroth.dev/nearest-neighbour/The nearest neighbour classifier is a very simple algorithm for image classification. While not used much in practice, it is simple to implement and it helps to gain a deeper understanding of the problems in image classification. Just like other classifiers, if we give the nearest neighbour classifier an image, it’ll try and find its closest match. We “train” the classifier by giving it a large collection of images that it allowed to search through to find matches.https://tomroth.dev/seaborn/Mon, 17 Jul 2017 00:00:00 +0000https://tomroth.dev/seaborn/Seaborn. A wrapper on top of matplotlib. Used to make plots, and to make them quicker, easier, and more beautiful. Thank you for your service, matplotlib. Despite your flaws, you’ve guided us this far. But it’s time to step aside. Types of Seaborn plots Link to heading sns.boxplot() | generic boxplot sns.distplot() | histogram and kernel density estimate (KDE) plotted together sns.distplot(rug=True) | rugplot sns.kdeplot() | kernel density estimate plot sns.https://tomroth.dev/pip-conda/Fri, 14 Jul 2017 00:00:00 +0000https://tomroth.dev/pip-conda/Seemingly ubiquitous in the Python world, the distribution Anaconda comes with over 200 Python packages installed. Anaconda also comes with a package manager called conda. Besides its utility for installing and managing packages, conda also possesses the ability to create virtual environments which make sharing and reproducing analyses much easier. These virtual environments are created without any Python packages preloaded into them. Installing Python packages into the virtual environment is often straightforward.https://tomroth.dev/pandas/Fri, 14 Jul 2017 00:00:00 +0000https://tomroth.dev/pandas/Pandas is your best friend for your data needs. It is the king of data manipulation in the Python empire. Any data scientist intending to use Python as their tool of choice must master Pandas. It is compulsory, like learning to walk before you run. So here is a quick reference list of functions, just for you. But reading written material is no substitute for repeated practice. And hence, you should not expect to remember the functions below.https://tomroth.dev/numpy/Sun, 25 Jun 2017 00:00:00 +0000https://tomroth.dev/numpy/Have you heard about the Python package numpy? Probably. But maybe you’re looking for an easy reference of useful numpy functions. Maybe that’s why you’re here. Well, you’re in luck! Get started by opening up a editor. First, we’ll import the numpy package: import numpy as np. Now cast your eye over these functions. In no particular order: np.__version__ | Return the version of numpy you have loaded. np.shape(x) | return the shape of an array x.https://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.https://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.https://tomroth.dev/kadane/Tue, 09 May 2017 00:00:00 +0000https://tomroth.dev/kadane/There is something called the maximum subarray problem, and it goes something like this. You are given an array of numbers: something like 3,5,-2,-1,5,3,1,-4,-6,5. Your job is to come up with the subarray with the highest sum. For this example it would be the subarray [3,5,-2,-1,5,3,1], which has a sum of 14. No other subarray gives a higher sum. Let’s look at a few more: The sequence -3,-3,-2,-4,-2,-5,-4 has the highest sum being -2, given by the subarray [-2].https://tomroth.dev/median/Wed, 03 May 2017 00:00:00 +0000https://tomroth.dev/median/Pretend you wish to get an idea of the average value of your dataset. You’ve got a few choices available to you, of which the most common three are the mean, median and mode. You might argue that the mode is a better choice than the median and the mean, mostly based on the below graphic. But the mode suffers from other problems. It will fail you on an exponential distribution, or on a log distribution.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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 .https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://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.https://tomroth.dev/decomp/Sun, 11 Dec 2016 00:00:00 +0000https://tomroth.dev/decomp/In the confusing world of matrix decompositions, three of the most useful are $A = LU$, $A = U^T U$ (the Cholesky decomposition) and $A = QR$. Here’s some R code to explore these useful beasts. 1. A = LU Link to heading Present in every textbook in linear algebra, performing LU decompositions in R is quick and painless. The easiest way to do this is to use the lu function in the Matrix package.https://tomroth.dev/logistic/Wed, 05 Oct 2016 00:00:00 +0000https://tomroth.dev/logistic/Ever wondered how logistic regression really works? You’re not alone. It’s confusing. This post drills down into the mechanics of logistic regression. We’ll go through the mathematical aspects and also construct our own logistic regression function in R. Exciting! What is logistic regression? Link to heading In linear regression the dependent variable $Y$ takes continuous values, like house prices for an area or the income of a individual. Logistic regression differs in that it is used for modelling categorical data.https://tomroth.dev/regression/Sun, 07 Aug 2016 00:00:00 +0000https://tomroth.dev/regression/As humans, we’re drawn to cause and effect. Even when it’s wrong of us to do so. When it gets hot, it’s not necessarily because of global warming. An increase in homeless people will not definitively cause an increase in crime rates. Male drivers crash more than female drivers, but maybe this isn’t because of their increased testosterone levels. We’ve all heard the correlation vs causation argument before. Our System 2 conscious mind knows that cause and effect isn’t always correct.https://tomroth.dev/js-methods/Sat, 09 Jul 2016 00:00:00 +0000https://tomroth.dev/js-methods/Javascript contains objects, which are things like a document, a window or a frame. Objects can also be something that you define yourself. This is an object: var cricketer = {firstName:"Ricky", lastName:"Ponting", age:41, batAvg: 51.85}; A method is a function that is performed on an object. Methods belong to objects. Here’s the object from earlier, this time with a method called getSummary attached: var cricketer = {firstName:"Ricky", lastName:"Ponting", age:41, batAvg: 51.https://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.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.https://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?https://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.https://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.https://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.