Chart Design Guidelines at City Intelligence

At the City Intelligence unit at City Hall almost anyone can create a data visualisation. To keep everyone in line they created Data Design Guidelines:

Effective communication of evidence and data through information design and data visualisation, is obviously important to help inform policy internally, but it is also just as important to help boroughs and individual Londoners better understand their city.

With this in mind, over the past year, we have been thinking more about how we can improve the clarity, consistency and accessibility of our data visualisation output.

The guidelines, which focus principally on chart design, cover the following areas:

  • Design Principles
  • Practical Steps
  • Styling & Layout
  • Using Colour
  • Categorical Colour Palettes
  • Find & Test Your Own Colours
  • Introducing GGLAPlot
  • Chart Examples
  • Further Reading

Nice!

City Intelligence Data Design Guidelines →

Via Janne Aukia on Twitter

Frappé Charts

GitHub-inspired simple and modern charts for the web with zero dependencies.

The typical Github monthly activity map is also possible:

import Chart from 'frappe-charts/dist/frappe-charts.min.esm';

const heatmap = new Chart({
    parent: "#heatmap",
    type: 'heatmap',
    height: 115,
    data: heatmap_data, // object with date/timestamp-value pairs
    start: start_date, // A Date object (default: today's date in past year)
    legend_colors: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'], // Set of five incremental colors
});

Frappé Charts →

dimple – A simple charting API for d3 data visualisations

dimple

The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.

dimple →
dimple Examples →

MetricsGraphics.js

metricsgraphics

MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled, consistent and responsive way. The library currently supports line charts, scatterplots and histograms as well as features like rug plots and basic linear regression.

MetricsGraphics.js →

Chartist – Simple responsive charts

chartist

/* Add a basic data series with six labels and values */
var data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  series: [{
      data: [1, 2, 3, 5, 8, 13]
  }]
};

/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
  axisX: {
    labelInterpolationFnc: function(value) {
      return 'Calendar Week ' + value;
    }
  }
};

/* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */
var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];

/* Initialize the chart with the above settings */
Chartist.Line('#my-chart', data, options, responsiveOptions);

Chartist – Simple responsive charts →

SketchInsight

SketchInsight is an interactive whiteboard system for storytelling with data by using real-time sketching. Creating personalized, expressive data charts becomes quick and easy. The presenter simply sketches an example, and SketchInsight automatically completes the chart by synthesizing from example sketches.

SketchInsight: Natural Data Exploration and Presentation through Sketch-based Interaction →

(via teusje)