Data Visualization Techniques using JavaScript

There are several data visualization techniques that can be used to represent and communicate data effectively. These techniques can be used through JavaScript libraries.

Table of Contents

There are several data visualization techniques that can be used to represent and communicate data effectively. Below are some commonly used techniques. These examples use the libraries: D3.js, chart.js, vis.js and Plotly.js.

Bar Charts: Bar charts use rectangular bars to represent data values. They are suitable for comparing discrete categories or showing the distribution of data across different groups. Bar Chart using Chart.js:

// HTML: <canvas id="barChart"></canvas>
const ctx = document.getElementById('barChart').getContext('2d');
const data = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [{
    label: 'Data',
    data: [10, 20, 30],
    backgroundColor: ['red', 'blue', 'green']
  }]
};
new Chart(ctx, {
  type: 'bar',
  data: data
});

Line Charts: Line charts connect data points with straight lines, commonly used to visualize trends or changes over time. Line Chart using Chart.js:

// HTML: <canvas id="lineChart"></canvas>
const ctx = document.getElementById('lineChart').getContext('2d');
const data = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [{
    label: 'Data',
    data: [10, 20, 30],
    borderColor: 'blue',
    fill: false
  }]
};
new Chart(ctx, {
  type: 'line',
  data: data
});

Pie Charts: Pie charts display data as proportional slices of a circle, useful for showing the composition or relative proportions of different categories within a whole. Pie Chart using Chart.js:

// HTML: <canvas id="pieChart"></canvas>
const ctx = document.getElementById('pieChart').getContext('2d');
const data = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [{
    data: [10, 20, 30],
    backgroundColor: ['red', 'blue', 'green']
  }]
};
new Chart(ctx, {
  type: 'pie',
  data: data
});

Scatter Plots: Scatter plots use Cartesian coordinates to display individual data points as dots. They are helpful for exploring the relationship between two variables and identifying patterns or correlations. Scatter Plot using D3.js:

// HTML: <svg id="scatterPlot"></svg>
const data = [
  { x: 10, y: 20 },
  { x: 15, y: 25 },
  { x: 20, y: 10 },
];
const svg = d3.select('#scatterPlot');
const width = +svg.attr('width');
const height = +svg.attr('height');
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.x)])
  .range([0, width]);
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.y)])
  .range([height, 0]);
svg.selectAll('.dot')
  .data(data)
  .enter()
  .append('circle')
  .attr('class', 'dot')
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y))
  .attr('r', 5)
  .attr('fill', 'blue');

Area Charts: Area charts are similar to line charts but filled with color, allowing the visualization of cumulative data or the comparison of multiple data series. Area Chart using Chart.js:

// HTML: <canvas id="areaChart"></canvas>
const ctx = document.getElementById('areaChart').getContext('2d');
const data = {
  labels: ['Label 1', 'Label 2', 'Label 3'],
  datasets: [{
    label: 'Data',
    data: [10, 20, 30],
    backgroundColor: 'rgba(0, 123, 255, 0.4)',
    borderColor: 'rgba(0, 123, 255, 1)',
    borderWidth: 1
  }]
};
new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    plugins: {
      fillBetween: {
	above: 'rgba(0, 123, 255, 0.4)',
	below: 'rgba(0, 123, 255, 0)',
	interpolate: true
      }
    }
  }
});

Heat Maps: Heat maps represent data using color gradients on a matrix. They are effective for displaying patterns or correlations within large datasets. Heat Map using D3.js:

// HTML: <svg id="heatMap"></svg>
const data = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const svg = d3.select('#heatMap');
const colorScale = d3.scaleSequential(d3.interpolateBlues)
  .domain([d3.min(data, d => d3.min(d)), d3.max(data, d => d3.max(d))]);
svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 30)
  .attr('y', (d, i) => i * 30)
  .attr('width', 30)
  .attr('height', 30)
  .attr('fill', d => colorScale(d));

Tree Maps: Tree maps use nested rectangles to represent hierarchical data. They are useful for showing the proportions of different categories at multiple levels. Tree Map using D3.js:

// HTML: <svg id="treeMap"></svg>
const data = {
  name: 'Root',
  children: [
    { name: 'Category 1', value: 10 },
    { name: 'Category 2', value: 20 },
    { name: 'Category 3', value: 15 }
  ]
};
const svg = d3.select('#treeMap');
const width = +svg.attr('width');
const height = +svg.attr('height');
const treemap = d3.treemap()
  .size([width, height]);
const root = d3.hierarchy(data)
  .sum(d => d.value)
  .sort((a, b) => b.value - a.value);
treemap(root);
svg.selectAll('rect')
  .data(root.leaves())
  .enter()
  .append('rect')
  .attr('x', d => d.x0)
  .attr('y', d => d.y0)
  .attr('width', d => d.x1 - d.x0)
  .attr('height', d => d.y1 - d.y0)
  .attr('fill', 'blue');

Bubble Charts: Bubble charts use circles to represent data points, with the size of the circles indicating the value of a third variable. They are suitable for visualizing three dimensions of data. Bubble Chart using D3.js:

// HTML: <svg id="bubbleChart"></svg>
const data = [
  { x: 10, y: 20, r: 15 },
  { x: 20, y: 30, r: 25 },
  { x: 15, y: 10, r: 20 }
];
const svg = d3.select('#bubbleChart');
const width = +svg.attr('width');
const height = +svg.attr('height');
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.x)])
  .range([0, width]);
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.y)])
  .range([height, 0]);
const rScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.r)])
  .range([5, 25]);
svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y))
  .attr('r', d => rScale(d.r))
  .attr('fill', 'blue');

Gauge Charts: Gauge charts resemble the dial of a gauge and are commonly used to represent a single value within a defined range, such as progress or performance indicators. Gauge Chart using Chart.js:

// HTML: <canvas id="gaugeChart"></canvas>
const ctx = document.getElementById('gaugeChart').getContext('2d');
const data = {
  labels: ['Label'],
  datasets: [{
    data: [75],
    backgroundColor: ['rgba(0, 123, 255, 0.4)'],
    borderWidth: 0
  }]
};
new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    cutoutPercentage: 80,
    rotation: -0.5 * Math.PI,
    circumference: Math.PI,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    elements: {
      arc: {
        borderWidth: 0
      }
    }
  }
});

Sankey Diagrams: Sankey diagrams visualize the flow of data or resources, with arrows representing the movement or quantity between different stages or categories. Sankey Diagram using D3.js:

// HTML: <svg id="sankeyDiagram"></svg>
const data = {
  nodes: [
    { name: 'Node 1' },
    { name: 'Node 2' },
    { name: 'Node 3' }
  ],
  links: [
    { source: 'Node 1', target: 'Node 2', value: 10 },
    { source: 'Node 2', target: 'Node 3', value: 20 }
  ]
};
const svg = d3.select('#sankeyDiagram');
const width = +svg.attr('width');
const height = +svg.attr('height');
const sankey = d3.sankey()
  .nodeWidth(20)
  .nodePadding(10)
  .extent([[0, 5], [width, height - 5]]);
const { nodes, links } = sankey(data);
svg.append('g')
  .selectAll('rect')
  .data(nodes)
  .enter()
  .append('rect')
  .attr('x', d => d.x0)
  .attr('y', d => d.y0)
  .attr('height', d => d.y1 - d.y0)
  .attr('width', d => d.x1 - d.x0)
  .attr('fill', 'blue');
svg.append('g')
  .attr('fill', 'none')
  .selectAll('g')
  .data(links)
  .enter()
  .append('path')
  .attr('d', d3.sankeyLinkHorizontal())
  .attr('stroke', 'gray')
  .attr('stroke-width', d => Math.max(1, d.width));

Choropleth Maps: Choropleth maps use color shading or patterns to represent data values on a map, typically used to display regional or geographical data. Choropleth Map using D3.js:

// HTML: <svg id="choroplethMap"></svg>
const data = [
  { code: 'US', value: 10 },
  { code: 'CA', value: 20 },
  { code: 'MX', value: 15 }
];
const svg = d3.select('#choroplethMap');
const width = +svg.attr('width');
const height = +svg.attr('height');
const colorScale = d3.scaleSequentialPow(d3.interpolateBlues)
  .domain([d3.min(data, d => d.value), d3.max(data, d => d.value)]);
const projection = d3.geoMercator()
  .fitSize([width, height], { type: 'Sphere' });
const path = d3.geoPath()
  .projection(projection);
svg.selectAll('path')
  .data(world.features)
  .enter()
  .append('path')
  .attr('d', path)
  .attr('fill', d => colorScale(getValueByCode(d.properties.code)));

function getValueByCode(code) {
  const item = data.find(d => d.code === code);
  return item ? item.value : 0;
}

Word Clouds: Word clouds display words or phrases, with the size or color of each word indicating its frequency or importance in a text or dataset. Wordcloud using wordcloud2.js:

<!-- HTML: -->
<div id="wordCloud"></div>

<!-- Include the wordcloud2.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script>

<script>
  // Data for the word cloud
  const words = [
    { text: 'Lorem', weight: 10 },
    { text: 'Ipsum', weight: 7 },
    { text: 'Dolor', weight: 5 },
    { text: 'Sit', weight: 3 },
    { text: 'Amet', weight: 2 },
    // Add more words with corresponding weights as needed
  ];

  // Configuration options for the word cloud
  const options = {
    list: words.map((word) => [word.text, word.weight]),
    fontFamily: 'Arial',
    gridSize: 10,
    weightFactor: 5,
    // Additional customization options can be added here
  };

  // Generate the word cloud
  WordCloud(document.getElementById('wordCloud'), options);
</script>

Box Plots: Box plots summarize the distribution of a dataset, displaying the median, quartiles, and outliers, allowing for a quick understanding of data dispersion. Box Plot using Plotly.js:

// HTML: <div id="boxPlot"></div>
const data = [
  {
    y: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    type: 'box'
  }
];
Plotly.newPlot('boxPlot', data);

Network Graphs: Network graphs display relationships or connections between entities using nodes (representing entities) and edges (representing connections). Network Graph using vis.js:

// HTML: <div id="networkGraph"></div>
const nodes = new vis.DataSet([
  { id: 1, label: 'Node 1' },
  { id: 2, label: 'Node 2' },
  { id: 3, label: 'Node 3' }
]);
const edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 2, to: 3 }
]);
const container = document.getElementById('networkGraph');
const data = {
  nodes: nodes,
  edges: edges
};
const options = {};
new vis.Network(container, data, options);

Radial Charts: Radial charts, such as radar charts or sunburst charts, display data in a circular layout, making it easier to compare multiple variables or categories. Radial Chart using Highcharts:

// HTML: <div id="radialChart"></div>
const data = {
  chart: {
    polar: true
  },
  title: {
    text: 'Radial Chart'
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  series: [{
    type: 'column',
    data: [1, 2, 3, 4, 5]
  }]
};
Highcharts.chart('radialChart', data);