Knowledge: Tech Blog

Where we share our thoughts on technology and design.

Charting

Graham Odds

Change, Presented Two Ways

Inspired by a recent dot chart visualisation focusing on the change of a value in different circumstances, this blog post presents the same data visualised using a slopegraph and compares and contrasts the two forms.

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.

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....

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...

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.

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.

Chris Grant

Creating a Telemetry Application using Silverlight, Visiblox and Custom Controls

Introduction About a month ago, I was using the MoTeC i2 Data Analysis software to look through some telemetry data that I had exported from a popular racing simulator game. Although MoTeC is feature rich and a great tool for motor racing professionals and enthusiasts, I had the idea to...

Chris Grant

Creating an Earthquake Monitoring Application with Visiblox

This post describes how to develop an Earthquake Monitor application based on live data from the USGS, using Silverlight, the MVVM Pattern, Visiblox and the Silverlight Bing Maps Interactive SDK.

Mark Rhodes

Ext JS 4 Stock Charts

I've been working with Ext JS 4's pure Javascript charting package for a while now and due to the lack of decent real-world examples (i.e. those that don't just use almost all default settings) and a few undue omissions in the documentation, it's not always been plain sailing. In an...

Colin Eberhardt

Adding Error Bars to Visiblox Silverlight Charts

Having spent a number of years studying Physics at university, I have had the importance of error bars well and truly drummed into me! Within physics, or any experimental science, there are always going to be errors in the measurements you make. The more repeat measurements you make, the more...

Nicholas Wolverson

Plotting user functions with Visiblox

Some time ago I wrote about plotting mathematical functions with Visiblox Charts, and Jesse responded by showing how to wrap a function in a data series to feed into a chart. I'm going to show how to take this idea a bit further, generating additional data on interaction, and allowing...

Graham Odds

A Critique of Radar Charts

This article presents a critique of radar charts, a chart type commonly used to display multivariate data, higlighting how they are poorly designed to effectively communicate information in the underlying data, and presents a number of more effective alternatives.

Colin Eberhardt

Visiblox MVP Giveaway

Readers of my blog will probably have noticed that I have a keen interest in both charting and performance. My friends over at Visiblox have combined these both to create what is one of the fastest charts for WPF, Silverlight and Windows Phone 7, see my recent benchmark blog post...

Nicholas Wolverson

Mathematical-style plots: Retemplating Visiblox Charts

This post demonstrates how to re-template a Visiblox Chart to render data with mathematical-style "on-chart" axes. Mathematical charts are usually drawn around the zero point, with the X and Y axes crossing at 0,0, and the plot drawn on top of the axes. In other fields, quantities which are never...

Graham Odds

Updating Flex Sparkline to Flex 4

In a previous post I presented a library of sparkline implementations for Flex 3. I have finally gotten round to updating it for Flex 4. The new source code, documentation and pre-compiled swf (namespace: http://www.scottlogic.com/sparkline) can be obtained from here. As before, the components are being made available under the...

Colin Eberhardt

MVVM Charting - Binding Multiple Series to a Visiblox Chart

This post describes a method of using attached properties to bind a ViewModel which contains multiple data series to a Visiblox chart without any code-behind. The Visiblox chart supports databinding in both WPF and Silverlight, where the X and Y values for each datapoint are bound to properties on an...

Colin Eberhardt

A Navigator Control For Visiblox Time Series Charts

In this blog post I will describe the creation of a simple range selector UserControl, which can be used alongside a Visiblox chart to create an interactive navigator for time series data. Whether you are studying finance, politics, meteorology or sociology you are sure to encounter time series data. Time...

Colin Eberhardt

Visiblox Charts vs. amCharts Quick Charts

Around one week ago I published an article which compared the performance of Visibox charts to a few of its competitors. The results indicated that Visiblox was the fastest chart, with DynamicDataDisplay coming in a very close second. UPDATE: I have published a more up-to-date and extensive test of WPF...

Colin Eberhardt

Visiblox, Visifire, DynamicDataDisplay - Charting Performance Comparison

A few weeks ago I published a blog post which compared the performance of the Visiblox charts and the Silverlight Toolkit charts. The results indicated that the Visblox charts are considerably faster than the Toolkit charts, however Microsoft's David Anson did point out that the Toolkit charts were not designed...

Chris Price

HTML5 Charts vs Flex Charts vs Silverlight Charts - a Test of Performance

This post follows on from the comparisons by Colin, of two Silverlight chart libraries, and Graham, of Flex and Silverlight chart libraries. In this post I add an HTML5 chart library into the mix. The results show that the HTML5 Charts perform easily as well as the others in HTML5...

Colin Eberhardt

Adding a Smoothed Line Series (Bézier curve) to a Visiblox Chart

In this blog post I look at how to add a new series type to the Visiblox charts by creating my own series type which renders a smoothed line using a Bézier curve. This blog post describes how to create a new series type for the Visiblox charts, a spline...

Graham Odds

Flex Charts vs Silverlight Charts - a test of Performance

This post follows on from the comparison of two Silverlight chart libraries produced by my colleague, Colin Eberhardt, by adding an implementation of the simple image processing tool in Flex using the Flex Charting library to the comparison. The results show that the Flex Charts perform easily as well as...

Colin Eberhardt

Visiblox Charts vs. Silverlight Toolkit Charts - a test of Performance

This blog post compares the performance of the Visiblox and Silverlight Toolkit charts using a simple image processing tool to test and illustrate their differences in performance. The results show that the Visiblox charts are approximately 50 - 100 times faster that the Silverlight Toolkit charts. UPDATE: I have published...

Graham Odds

Flex Sparkline

Sparklines are described by their inventor, Edward Tufte, as "data-intense, design-simple, word-sized graphics". They are an ideal tool for displaying trends for single entries within large data sets, for example stock prices. As well as the standard miniature line series, Tufte's original specification introduces a ternary sparkline, a.k.a. win-loss sparkline,...

Graham Odds

Microsoft apply for "Sparkline in the grid" patent

Microsoft have recently submitted US patent application 20090282325, entitled Sparklines in the Grid. My initial reaction, like many others in the data visualisation community, was one of anger at what appeared a blatant attempt by Microsoft to abuse the US patent system. However, I decided to examine the application more...

Graham Odds

Missing values in Flex charts

An oddness in default behaviour that can throw those new to Flex Charting is that segments in charts that should correspond to a data point are missing. By this I mean charts like those in the following example: When what is actually desired is the following: This is achieved by...

Graham Odds

Custom data tips in stacked Flex charts

The number of frustrating decisions in Flex's charting API is minimal, but high up on my list is a strange decision that prevents developers from accessing information that is frequently desirable for custom data tips in stacked area, bar and column charts. The default data tips for stacked charts display,...

Colin Eberhardt

Adding a Location Crosshair to Silverlight charts (again!)

Silverlight is moving fast. Really fast. The recent MIX09 conference saw the release of Silverlight 3 (Beta) and also a new release of the Silverlight Toolkit. All this change is making it hard for us bloggers to keep up! Just over a month ago I posted an article on this...

Graham Odds

Save Flex chart as image

The ability to allow a user to save a Flex chart, or in fact any Flex UI component, as an image has popped up on my radar several times over the last few years. Solutions to the problem have generally involved producing a pop-up window with the UI component as...

Colin Eberhardt

Adding a Location Crosshair to Silverlight Charts

UPDATE - The March09 update of the Silverlight toolkit is incompatible with the code detailed below. For an up-to-date version see the following blog post. This blog post describes how to add a location crosshair to your Silverlight charts as shown below: The chart itself is rendered using the charting...