Knowledge: Tech Blog

Where we share our thoughts on technology and design.

HTML5

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.

Darren Smith

Consumer Driven Contracts using Pact

In this post I will talk about Consumer Driven Contracts in Microservices architectures. I will also give an example of how to use Pact in a modern JavaScript application.

Colin Eberhardt

Semantic Versioning is not enough

A few days ago the roadmap for future Angular releases, starting with v.4 in March 2017, was unveiled. It once again made me re-visit my personal doubts about semantic versioning, the underlying issue being that it is great for computers, but bad for humans. Considering that people are the primary...

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

Colin Eberhardt

Recursive Pattern Matching and Transformation of JavaScript AST

I’ve recently been playing around with the JavaScript Abstract Syntax Trees (AST), with the aim of transforming some JavaScript code into various other languages (Java, C#, Objective-C). As part of my research, I looked at how Babel performs AST transforms. If you’re not familiar with Babel, and the plugins which...

Colin Eberhardt

Six tips for cleaner javascript promises

This blog post shares a few quick tips and patterns that I've been using to structure JavaScript promises; keeping them clean, simple and readable.

Colin Eberhardt

Applying redux reducers to arrays

The redux pattern provides a simple (and strict) pattern for managing state; a single store holds the state while a reducer applies actions, evolving the application state. As your app becomes more complex, you can split up your reducer into separate functions, however, what if you have multiple instances of...

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

Tim Barclay

Static Shock - Using Modern Static Site Generators

This post discusses building a modern single page marketing site using a static site generator

Ali Sheehan-Dare

A Lazy Isomorphic React Experiment

If you've used React and Flux, you'll know how powerful this combination is when building single page applications. But how practical is it when building truly large scale applications with multiple sections?.

Chris Price

A Case for Hot-Reloading

Hot-reloading UI is a hot topic at the moment. I want to take some time to explain why, in the class of applications I typically work on, I believe it to be such an important feature for future UI frameworks to have. Fundamentally it’s about improving the developer workflow, improving...

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

Tim Barclay

Building a Jump Scroll Marketing Page with Meteor and OrionJS

Recently I needed to make a site for a personal project, and although I work on dynamic web apps for a living, I hadn't had to make a proper, honest-to-goodness website for years. There are plenty of well-known options out there for making sites quickly, like Wordpress and Squarespace, but why go for the quick option, I said to myself, when there's a learning opportunity to be had!

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.

Tim Barclay

Creating a Single Page App in Meteor

Meteor seems like a fresh way to work. It makes a lot of things, like CRUD operations and keeping your UI in line with data changes, extremely easy and it adds a lot of nice, clever tricks, like the client-side stubbing of server-side methods.

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.

Luke Page

Aurelia, less2css and bundling

In the second post of my series on the Aurelia framework I walkthrough bundling the less2css project. The result of which significantly reduced the load time, but did uncover a few aspects of the Aurelia bundling process that do not yet feel fully formed.

Luke Page

Creating less2css using Aurelia

This post gives a walkthrough of a project that makes use of the new Aurelia framework. It also take a look at how it compares to Angular 2.0, which is still in development.

Ben Mumford

Introduction to Flight

I’m relatively new to the world of single page applications and have just finished a project built using AngularJS. What we built was impressive but I had the following reservations: The learning curve was steep (it’s not just me right?!). The code was difficult to dive into for new developers....

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.

Andy Lee

HTML5 Mobile - Optimising for older or slower devices

Some lessons I've learned trying to optimise a HTML5 mobile App so that it's fast and responsive even on old or budget phones with limited performance.

Andy Lee

HTML5 Mobile - Long-press to re-order scrollable lists

How to use a long-press to trigger re-ordering a list in Ionic Framework, instead of Ionic’s default implementation, which requires a button to switch modes.

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.

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.

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

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.

James Hill

Porting Scratch To HTML5 From Flash - 2014 Intern Project

We’re the Scott Logic interns for Newcastle in 2014, and our project was to make a mobile-compatible version of the Scratch HTML5 player that allows offline access, and app-like immersion. This blog post is an overview of what we managed to achieve … And just to whet your appetite, here’s...

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.

Andy Lee

Asp.Net bundling of Angular templates

How to use Asp.Net's built-in bundling and optimisation feature to optimise AngularJS templates

Andy Lee

End-to-End testing with Angular and Knockout

Writing end-to-end tests for a Single Page Application (SPA) built with Angular or Knockout, and how to improve the robustness of those tests.

Andy Lee

Single Page Applications - Angular vs Knockout

A comparison of Angular and Knockout in an enterprise scale single page application, by building the same sample application with both tools.

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.

Ilya Lopatkin

Native code + Emscripten + WebGL. Simmer gently.

An emeging recipe that can change the way we make rich web apps.

Adam Morgan

A Developer's intro to WebGL

Recently, I have been starting to get to grips with WebGL. Having little to no real previous experience with 3D graphics, there was a reasonably steep learning curve to overcome. So I thought I’d touch on a few of the basics here and share some resources that I found really...

Colin Eberhardt

HTML5 - It Just Got Real - Slides

A couple of days ago we hosted a one-day conference, HTML5 - It Just Got Real, at the Royal Society buildings in London. As promised, we have made all of our presentations available online.

Colin Eberhardt

HTML5 - It Just Got Real - A One-day Conference in London 14th May

Announcing a one-day conference at the Royal Society, London UK, on the 14th of May. Just a few years back I wrote a white paper titled "Flex, Silverlight or HTML5? Time to decide ..." with the help of a couple of my colleagues, comparing the strengths and weaknesses of the...

Steven Hall

View Inheritance in Backbone

Backbone.js is interesting because it gives you the basic framework of an MVC application without enforcing patterns on you. However, in larger web application it's always important to ensure your structure promotes code reuse and good organization for future development. One such way is through inheritance of views, and in...

Chris Price

Converting an HTML5 App to a Native App with Titanium

In this post Colin Eberhardt's Property Finder app gets another outing, but this time with a native twist. Titanium is a popular open-source framework for building multi-platform native apps in JavaScript. Here I've used it to port the existing MVVM application to iOS and Android whilst trying to maintain as...

Chris Price

You can build feature-rich apps with HTML5, but should you?

HTML5 versus native (iOS:Obj-C, Android:Java) mobile development is a hot topic at the moment, with Facebook's ditching of a hybrid HTML5/Obj-C app in favour of an Obj-C-only app the latest blow to land. However, independent observers will already have noted that the battle, as always, is not without it's fair...

Colin Eberhardt

Property Finder - A Cross-platform HTML5 Mobile App

A while back, when PhoneGap for Windows Phone was still in beta, I created Property Finder, an application for searching UK property listings. This application successfully made its way into the Windows Phone Marketplace, making it the first WP7 PhoneGap app. I recently developed the Property Finder application further in...

Colin Eberhardt

Property Finder - the first HTML5-based Windows Phone 7 Application

Last week I submitted Property Finder, a simple application that searches for properties based in the UK, to the Windows Phone 7 Marketplace. I was happy to receive confirmation that this application had been certified and published just two days later. You can download the application from the marketplace now....

Colin Eberhardt

Developing Windows Phone 7 HTML5 apps with PhoneGap

This article show the step-by-step development of a Windows Phone 7 HTML5 application using PhoneGap. It also looks at how viable this approach is for cross-platform mobile development. Colin Eberhardt is a Scott Logic technical Evangelist and a Technical Architect for Visiblox, suppliers of high-performance WPF and Silverlight charts. Introduction...

Colin Eberhardt

Dart - will Google make HTML5 applications viable?

Just a few weeks ago I wrote a blogpost "Can Microsoft 'fix' JavaScript and make HTML5 applications viable?", where I described some of the issues with JavaScript and how these could be solved by Microsoft if they wrote a C# to JavaScript compiler. Just a couple of days ago it...

Colin Eberhardt

Can Microsoft 'fix' JavaScript and make HTML5 applications viable?

Microsoft's recent change in stance over Silverlight, promoting HTML5 as "the only true cross-platform solution for everything", seems to have sidelined Silverlight as a niche framework. This has understandably caused a great deal of upset and confusion in the .NET development community. Despite this, Microsoft are remaining steadfast and tight-lipped...

Colin Eberhardt

From Silverlight to HTML5 CodeProject Article

I have just published an article on codeproject which describes the differences in development between Silverlight and HTML5. In order to illustrate the differences, I have re-implemented my Windows Phone 7 JumpList control using HTML5/CSS3. You can see this control in action below: (NOTE: this will look best in a...

Steven Hall

A Webapp By Another Name III

My colleague Chris Price covered coming up with a "web-less webapp" in part one of this series, and then went on to talk about wrapping an application for iOS in part two. In part three, I'll explain how we wrapped our web-app for the Android platform. Introduction As explained in...

Chris Price

A Webapp By Another Name II - The many pitfalls of using the application cache on mobile platforms

In part one I discussed my objective to create a "web-less webapp" which could masquerade as a native application on all modern mobile platforms. I covered the gotchas of developing with the cache, but stopped short of discussing the problems that come about when you wrap it up for each...

Chris Price

A Webapp By Another Name - The many pitfalls of using the application cache on mobile platforms

In this first installment, I'll introduce the appcache, talk about some gotchas of using the appcache and hopefully give some helpful hints for debugging it based on my experience. Introduction The appcache is a new DOM feature added in the unholy bundle we call HTML5. It aims to allow your...

Graham Odds

Flex, Silverlight or HTML5? Time to decide...

Building on the experience and expertise within Scott Logic, my colleague, Colin Eberhardt, has produced an excellent whitepaper considering the three big web technologies at the moment: Flex, Silverlight and HTML5. Recent advances in web technologies have resulted in a complex landscape for applicationdevelopers to navigate. Coupled with the recent...

Colin Eberhardt

White Paper: Flex, Silverlight or HTML5? Time to decide...

When meeting current and prospective clients the subject of web technology choice often arises. There has been a great deal of confusion and uncertainty out there, even before Microsoft's perceived change of stance with respect to Silverlight emerged. This white paper is intended to help technology decision makers come to...

Jonathan Cardy

Web Workers Part 4: Wrapping it Up

Update: I have summarised this series of blog posts in a CodeProject article, available here. In this series of posts I showed a sweet way to use Web Workers to improve performance on browsers that support them, without impacting performance on browsers that don't, by using jQuery 1.5 Deferred objects...

Jonathan Cardy

Web Workers Part 3: Creating a Generic Worker

In the previous post we set up a Web Worker helper function that allowed us to create a worker file, and call it using code like this: $.work({file: 'primes.js', args: { from: 1, to: 100000 }}).then(function(data) { //Worker completed successfully console.log(data); }); Now, wouldn't it be nice if you didn't...

Jonathan Cardy

Web Workers Part 1: Performance

The Web Workers API is currently a draft HTML5 specification which defines an API for running JavaScript in a background thread. In this series of blog posts I am going to investigate the practical use of Web Workers. In this first blog post I want to look at the performance...

Jonathan Cardy

Web Workers Part 2: Using jQuery Deferred

The .NET Task Parallel Library is a great advance in parallel programming for the .NET framework. It lets us easily run an anonymous method in another thread without any worries about the actual thread creation. A Task object wraps up a piece of parallel code, and provides a notification of...

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

Does HTML5 mean the end is in sight for Silverlight?

This blog post looks at the fallout after last week's PDC conference where Microsoft were quoted as saying "our strategy on Silverlight has shifted", and the resulting fallout in the developer community. In this post I will describe why I think Silverlight has a future ahead of it and exactly...