Knowledge: Tech Blog

Where we share our thoughts on technology and design.

D3

Colin Eberhardt

Interactive and Responsive Small Multiples with D3

Small multiples repeat the same basic chart, typically with the same axes, to display different slices of a dataset. They are an excellent way of showing rich multi-dimensional data, without becoming a dense mess of lines. This post looks at how to implement small multiples with D3 and d3fc.

Colin Eberhardt

Visualising London Marathon Training Data From Strava

I downloaded an analysed the training data for 1,000 athlete who ran the London Marathon in 2016. From this data I've learnt that people put in ~30% less mileage than popular plans suggest, Sunday mornings are a firm favourite for long runs, and that Saturday morning parkruns are very popular!

Colin Eberhardt

Visualising London Marathon Strava Data

I recently downloaded run data for the 7,190 athletes who recorded their London Marathon on Strava, a popular platform for runners and cyclists. This blog post visualises and analyses the data in various interesting ways.

Chris Price

Efficient SVG layout with d3

When creating d3 visualisations it's common to want some form of responsive layout. However, SVG and canvas don't provide a native way to do this. Most examples found online either use fixed dimensions or resort to some form of manual layout to achieve the required effect. This post introduces an alternative approach using CSS and custom elements.

Chris Price

Using d3-force to control a massive tiny display

This post describes my entry into one of the hack events at JSConf.IS which challenged us to take control of the Northern Lights. It hopefully also serves as a nice introduction to creating visualisations with d3-force.

Chris Price

Building Components with D3 Data Join

This post quickly introduces data join before moving on to some of the edge cases we've run into when building components on top of data join. It covers how you can solve them with vanilla D3 and why you might find our d3fc-data-join component useful.

William Ferguson

Web Audio API Part 2: Moving to Electron

Back in January, I blogged about using the Web Audio API with D3, creating an app using Knockout and RequireJS. I’ve since expanded on that application, migrating it to Electron and adding new functionality along the way – like MP3 tag extraction and recursive folder searching. Migrating to Electron In...

Chris Price

ES6 Iterators, RxJS, IxJS and the Async Iterators proposal

A quick walk through ES6 iterators and iterables. It covers extending d3fc’s random data component to implement the required protocols and how this can lead to greater interoperability with utility libraries like RxJS/IxJS. The d3fc-random-data stochastic generator d3fc contains a component for generating random data series based on stochastic processes....

Ali Sheehan-Dare

D3FC ❤ Canvas

Along with the modularisation of code, D3 version 4 also brings new support for canvas drawing, thanks to the d3-path package introduced in version 4. There are performance advantages to using canvas over svg for drawing complex charts (however canvas is not necessarily always better). You can read more about...

Chris Price

d3-path - what is it good for?

This post introduces a new feature of D3 version 4: the d3-path package. d3-path is an abstraction over SVG path creation which uses the canvas element’s Context2D interface. Previously creating path generation code involved a lot of concatenating SVG path commands like M0,0 or L2,2, and the somewhat more cryptic...

Chris Price

Deconstructing a tweet-sized D3 creation

I recently created a site which I’m proud to say now hosts an impressive collection of tweet-sized D3 creations from the hugely creative people of the internet. In this post I’ll talk through deconstructing one or two of those creations with the aim of giving any aspiring artists a starting...

Ali Sheehan-Dare

D3v4 is on the way!

The next version of D3, the data visualisation library, is on the way. As we maintain D3FC (a charting library built on top of D3) we want to stay on top of those changes, to make sure that the library makes appropriate use of any new functionality and to embrace...

William Ferguson

Exploring the Web Audio API with D3

In this post, I investigate the HTML5 Web Audio API, using it with D3 to perform real-time audio visualisation.

Colin Eberhardt

Rendering ASCII Charts with D3

A few days ago Bloomberg published their list of 50 companies to watch in 2016, and for some reason they decided to publish the entire report in ASCII! I thought it would be a bit of fun to see if I could use D3 to create my own ASCI charts

William Ferguson

Sampling Large Datasets in d3fc

Libraries like d3 and d3fc do a fantastic job at making interactive charts. However, when the data size is in the hundreds of thousands, performance suffers. In this post, I'll have a look at some sampling techniques recently implemented in d3fc, and show them off with a demo.

Chris Price

Improving D3 Performance by Embracing the Flux

While d3fc (a toolkit of charting components built in the d3 style) embraces the philosophy of simplicity over performance, there’s no point in creating a chart with lousy performance. In this post I’ll run through some of the tips and tricks for squeezing the best performance out of d3fc without...

Nicholas Wolverson

Building D3-inspired charts with React

A foray into generating simple charts in a fashion inspired by D3 using React as a rendering engine.

Chris Price

An Adventure in SVG Filter Land

I’ve been working on an open-source charting library called d3fc. And following Colin’s lead, was looking for a creative example to replicate: I think I found it… Once upon a time The story starts with Coinbase, a well-known(/funded) Bitcoin company. I was hunting for a freely available streaming data feed...

Colin Eberhardt

Creating a Yahoo Finance chart with D3 and d3fc - Part Two

Most charting libraries are monoliths. The more features they support, the more unwieldy their APIs tend to become. With the d3fc project we have been exploring an alternative approach, constructing charts from a set of small components, using the D3 library.

Colin Eberhardt

Creating a Yahoo Finance chart with D3 and d3fc

Most charting libraries are monoliths. The more features they support, the more unwieldy their APIs tend to become. With the d3fc project we have been exploring an alternative approach, constructing charts from a set of small components, using the D3 library.

Colin Eberhardt

SVG layout with Flexbox for simpler D3 charts

This blog looks at how CSS flexbox layout can be applied to SVG in order to simplify the task of constructing charts with D3. This approach has been made possible by the JavaScript flexbox implementation that Facebook recently open sourced to support ReactJS Native.

Mark Jose

An RSI component for D3 charts

An RSI (Relative Strength Index) D3 component which can be added to a D3 chart. In the blog I've also tried to explain a little bit about RSI and it's uses in calculating risk when trading markets.

Andy Aiken

A Fibonacci fan component for D3

In this article I'm going to create an interactive Fibonacci fan D3 component, and show you how to add it to a chart in just 6 lines of code.

Andy Aiken

An interactive crosshairs component for D3

In my last article I put together an interactive chart that could be panned and zoomed, but there was one obvious omission - crosshairs. In this article I'm going to create a D3 crosshairs component, and show you how to add it to a chart.

Tom Simmons

An interactive Stock Comparison Chart with D3

Comparison charts, as their name suggests, are great for comparing the percentage price change of multiple stocks in time. In this post, we'll make one using D3.

Tom Simmons

D3 SVG chart performance

In this post, we'll take a look at some of the performance issues you might encounter when making interactive charts using SVG, and how you might go about fixing them.

Andy Aiken

Creating an interactive chart with D3

Recently I've been looking at various D3 components, which has been a fun project. I haven't yet had the chance to develop an interactive, dynamic component though, which has meant that the resulting charts have been sadly static. For this article I wanted to use what I've learned to build a fully interactive chart - something that wouldn't look out of place on a financial app.

Andy Aiken

A Bollinger Bands Component for D3 Charts

In my last article (on line annotation components for D3 charts), I created a D3 component which calculated and displayed a moving average. As promised, I'm now turning my attention to Bollinger Bands.

Andy Aiken

Two Reusable Line Components for D3 Charts

In this article I'm going to create two simple, reusable D3 components for adding line annotations to charts.

Tom Simmons

An OHLC Chart Component for D3

An open-high-low-close chart is a type of financial chart used to show price movements in a financial instrument over time. In this post, we'll make a reusable D3 component for an OHLC chart series.

Dan Gorst

Functional Reactive Programming with Bacon.js and D3

Reactive programming is a paradigm which allows you to better represent a work flow where changes in one part of your data model propagate down to other parts of the model. This blog post demonstrates an example of this, by listening for updates to Wikipedia and reacting accordingly.