jamesleesaunders

Random Number Generation - Column Chart

In this simple D3 example we demonstrate 3 possible methods to generate a dataset of random numbers.

• Manual Random Number Generation. This is not really random number generation code but more a demonstration of the structure of the data array which is to be produced.
• JavaScript Random Number Generation. Using a traditional JavaScript for loop and Math.random() function to generate the data array of random numbers.
• D3 Random Number Generation. Using D3's built range / map functions to build the array.

jamesleesaunders

Multi-dimentional Data Array - Column Chart

A simple D3 script showing the use of the d3.range.map function to generate a simple multi-dimentional array. The code then generates a rather odd looking column chart with the bars height and width are set according to the data.

This rudimentary example uses html div's rather than svg rect's to generate the chart columns.

jamesleesaunders

license: mit

jamesleesaunders

Ramdom Colours Using rgb() - Column Chart

In this example we generate another data array of random numbers. Then we generate a basic DIV based column chart using the random number to dictate the column height and colour (note the correct English spelling for colour.. not color!).

Colours can be references in a few different ways:

• #ff0000
• rgb(255,0,0)
• 'red'

jamesleesaunders

Colour Ranges - Column Chart

jamesleesaunders

Colours 3 using Colorbrewer.

jamesleesaunders

DIV Height using Scale / Range

jamesleesaunders

Dispatch

jamesleesaunders

d3-ez : Bar Chart (Vertical) Example

Generated using d3-ez D3 Reusable Chart Library

A bar chart is a chart with rectangular bars with lengths proportional to the values that they represent. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Bar charts provide a visual presentation of categorical data. Categorical data is a grouping of data into discrete groups, such as months of the year, age group, shoe sizes, and animals. These categories are usually qualitative. Bars on the chart may be arranged in any order.

FUNCTION: Comparison; Trend over time

Credit: Data Viz Project

jamesleesaunders

d3-ez : Bar Chart (Stacked) Example

Generated using d3-ez D3 Reusable Chart Library

Grouped Bar Charts are used when two or more data sets are displayed side-by-side and grouped together under categories on the same axis. Basically, it’s the most simple bar chart with two or more graphs.

FUNCTION: Comparison; Part to whole

Credit: Data Viz Project