Data Visualization Code

Coding data and visualization with Javascript, d3.js, and JSON.

about me

Vida Lab on coding data and visualization

Check out our tool @ vida.io

Connect D3.js Visualization With SQL Database

Supported SQL databases: PostgreSQL, MySQL, MS SQL Server.

D3.js visualizations often use CSV data files that are loaded into browser. In this article, we walk you through how to connect to SQL database on vida.io and use D3.js to visualize the data.

The database contains data for view activities of website. We use calendar heatmap to visualize the frequency during months. The raw data table has 3 columns: views, created_at, and updated_at.

written Read on →

Hacker News Dashboard With vida.io and Google BigQuery

Google BigQuery provides data storage for large datasets. You can store Gigabytes of data and query them in seconds. In this article, we discuss how to connect to Google BigQuery and create a dashboard. We’ll use the Hacker News dataset provided in BigQuery public data repository.

The final dashboard has four charts. Here’s a screenshot of what it will look like:

written Read on →

Using Google Spreadsheet Data in d3.js Visualizations

Google Spreadsheet offers a convenient way to work with data on the web. It is now possible to retrieve live Google Spreadsheet data for d3.js visualizations. In this article, we’ll show you how.

We make use of tabletop.js to abstract data retrieval task. https://github.com/jsoma/tabletop

  1. Publish spreadsheet to the web.
  2. Move d3.js visualization code into a function, e.g. drawChart.
  3. Use tabletop.js to get data and render the visualization.
  4. Copy published spreadsheet URL and replace it in the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1n-PIdnAJnxmHqVp_iE2g1k8UpPf-lEXLm_pu7zxuov4/pubhtml';

function renderSpreadsheetData() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: draw,
                     simpleSheet: true } )
}

function draw(data, tabletop) {
  // draw chart
  drawChart(data);
}

renderSpreadsheetData();

And a live example:

https://vida.io/documents/9eEyB4R74WWyrPXAi

written

Interactive Dashboard With D3.js, Crossfilter, and Dc.js

We have built dashboards with Twitter and Sales data. The process is repetitive at chart level. We often want an easy way to swap in and out chart. A few customers ask us if they can put together dashboard themselves.

We came up with a solution for this problem with Composite Document editor. It is an interactive tool that lets you put together dashboard. You can add d3.js documents to dashboard, resize them to fit the page. If your chart supports crossfilter, they will be linked together.

written Read on →

Visualizing Home Insurance Rates

This tutorial is a guest post from vHomeInsurance.com, a home insurance analytics service, visualized US wide home property prices using Vida.io. The below guide walks through a case study on representing geographical data on a map & how they did it.

written Read on →

D3.js Document Template and GitHub Integration

In this blog post, we want to show you integration between vida.io cloud editor and GitHub. git is a great source control tool to keep track of complex visualization project.

You can import your git repository for instant view and sharing in the cloud.

written Read on →

Making D3.js Reusable With Templates

D3.js is an awesome library for visualization. However, it requires a developer to perform the magic. So far, it has not been so popular with traditional data analysts.

At vida.io, we set out to bring D3.js to less technically savvy users. We want to enable them to create amazing data visualizations with D3.js. Our approach is template.

written Read on →

BigQuery Big Data Visualization With D3.js

How to handle large dataset with D3.js?

It’s a frequently asked question. You can read several discussions on the topic here, here, and here. So far, the best solution is to process data to a smaller dataset. Then use D3.js to visualize.

With carefully crafted data processing, we can get decent story from data. But this solution doesn’t provide a lot of flexibility to experiment with data on the fly. We need a more streamlined workflow. Less friction can spark interesting data innovation.

I recently delved deep into Google BigQuery. It’s a great tool to handle big dataset. It’s definitely going to help us handle big dataset for D3.js.

written Read on →

Coding Visualization Tutorial 2: Functions

Function is a block of code to perform a particular task. You can use function to reduce repetitive code and improve readability. Function can be a separate object or part of another object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// general syntax
function name(variables) {
  // execute task
}

// for example, multiple two numbers
function multiply(n1, n2) {
  return n1 * n2;
}

// this call return 12 and assign to n
var n = multiply(3, 4);

// This function selects div tag with id="canvas-svg"
var canvas_svg = d3.select("#canvas-svg");

// Append svg element to canvas_svg div
var svg = canvas_svg.append("svg");

written Read on →

Coding Visualization Tutorial 1: Variables

In this tutorial, we want to explore Javascript variables. They are important code components. We will review the major variable types that you’ll see in a D3 visualization. Then we will dive into visualization examples and play with variables.

You can declare Javascript variables as below:

(// is comment)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// declare WIDTH variable, the type is integer
var WIDTH = 800;

// declare HEIGHT variable, the type is integer
var HEIGHT = 500;

// declare margin as hash with keys are 4 corners of visualization,
// hash is a key value pair, use key to access value,
// for example, margin.top returns an integer of value 20
var margin = {top: 20, right: 20, bottom: 30, left: 50}

// string variable
var Y_AXIS_LABEL = "Price ($)";

// array variable
var data = [];
// add 2 data points to data array
data.push({x_axis: "1-May-12"}, {y_axis: 582.13});
data.push({x_axis: "30-May-12"}, {y_axis: 583.98});

// boolean variable, 2 values: true or false
var check = true;

// variable can be an object which means it can be anything
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
// think of xAxis as a d3 axis type, it can do some axis magic

written Read on →