All Posts

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 →

Extract Web Data With import.io and Create D3 Visualization

With vida.io, you can quickly create new data visualizations. But how would you collect the data? There are now powerful and easy to use tools for this task. In this article, I will show you how to use import.io to extract web data and create d3 map visualization.

written Read on →

Embed d3.js Visualization to Blog

I recently got a question from our user on how to embed d3.js visualization into their blog. A quick search returns several solutions like bl.ocks.org or Wordpress D3 plugin. The first solution requires programmer intervention each time content owner needs to update the site. Wordpress D3 plugin requires installation of plugin.

There comes vida.io embed. Our site provides simple solution. Blog content owner can update post without programmer’s intervention. In case of visualization update, he/she can use vida.io editor to quickly make change.

written Read on →

Experiment With d3.js in the Cloud

bl.ocks.org is a popular tool within D3 community for sharing data visualization. While it is great to be able to share visualization, bl.ocks.org is not easy to experiment with your visualization.

We are building a new offering at vida.io to enable cloud experimentation. You can quickly import and play with the visualization. There are two ways to import d3.js block into vida.io. The first way is directly from gist. The second way is to create a reusable template document.

Import gist or block

Video demo:

  1. Copy Gist (Block) URL
  2. Login to vida.io and select Gists (Blocks) menu
  3. Click on Import button and paste in the URL
  4. Click Create button

Create a resuable template document from gist or block

Video demo:

In this post, we’ll use this bl.ocks.org example for d3noob:

Basic Directional Force Layout Diagram

written Read on →