Data Visualization (Data Viz)

Start with the question you're trying to answer.

example: How many people visited on a given day?

Then consider how you would like to present that data.

Use whatever tool is available to you.

There are a few basic charts / layouts that are common for a reason. It helps to understand how they map to data.

Pie chart.. you count some number of things in different categories. You want to show it.

Just pass those numbers to a PieChart object... it should be able to do the rest.

So defining those series becomes important.
the key is really in creating series

Summarize your data.

Consider the basics. What data do you want to show?

The trick seems to be in getting the data converted into a format that works well for the visualization.
javascript prepare data for visualization at DuckDuckGo
Data Visualization with JavaScript
Edward Tufte: Books - The Visual Display of Quantitative Information
Data visualization with Python and JavaScript | by Veronika Rovnik | Python in Plain English


Many libraries to help with the visualization side. (especially in Javascript)
visualization ยท GitHub Topics ยท GitHub


Compare and contrast Plotly vs. Echarts vs Apex Charts vs Vega-Lite

weight of library + dependencies (download size)
ease of configuration options
work with vue?
API similarities and differences and pros and cons

Plotly / D3 / VisX

Plotly is built on top of D3 and has a high level API for common charts.

npm install plotly.js-dist 
yarn add plotly.js-dist
import Plotly from 'plotly.js-dist'
GitHub - plotly/plotly.js: Open-source JavaScript charting library behind Plotly and Dash
Plotly JavaScript Graphing Library | JavaScript | Plotly
Fundamentals | JavaScript | Plotly
Setting Graph Size | JavaScript | Plotly
Responsive / Fluid Layouts | JavaScript | Plotly
Configuration Options | JavaScript | Plotly
Axes | JavaScript | Plotly
Horizontal Bar Charts | JavaScript | Plotly
Bar Charts | JavaScript | Plotly
Plotly JavaScript Graphing Library | JavaScript | Plotly
Configuration Options | JavaScript | Plotly
plotly vue at DuckDuckGo
How To Use Plotly In Vue ~ Random Problems
GitHub - statnett/vue-plotly: A vue wrapper for plotly.js chart library
GitHub - David-Desmaisons/vue-plotly: ๐Ÿ“ˆ vue wrapper for plotly.js
D3.js - Data-Driven Documents
GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML.
Learn D3: Introduction / D3 / Observable
A High-Level Grammar of Interactive Graphics | Vega-Lite
Bar Chart Race / D3 / Observable
GitHub - airbnb/visx: ๐Ÿฏ visx | visualization components
d3 at DuckDuckGo


Very highly starred on githup
GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browser Basic Concepts Overview
Documentation - Apache ECharts

Apex Charts

Looks nice!
GitHub - apexcharts/apexcharts.js: ๐Ÿ“Š Interactive JavaScript Charts built on SVG
GitHub - apexcharts/vue-apexcharts: ๐Ÿ“Š Vue.js component for ApexCharts

Vega / Vega-Lite
GitHub - vega/vega-lite: A concise grammar of interactive graphics, built on Vega.
GitHub - bokeh/bokeh: Interactive Data Visualization in the browser, from Python

Interactive JavaScript charts for your webpage | Highcharts

Highcharts has good documentation. A paid license is required for commercial projects.

Reading the Highcharts documentation helps illustrate components common to charts and data visualization.


Disable chart title


I stash this at the top of the options

      pieChartOptions: {
        credits: {
          enabled: false,

        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',


Consider starting with a new component so you can group all of the logic in with the chart... may want to include it elsewhere

    <highcharts :options="usersChartOptions"></highcharts>

import { Chart } from 'highcharts-vue'

export default {
  name: 'UsersChart',
  components: {
    highcharts: Chart,

  data() {
    return {
      items: [],
      pointStart: null,
      usersChartOptions: {
        credits: {
          enabled: false,
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          // did not seem to have any effect
          // displayErrors: true,
        title: {
          text: 'Users Per Day',
        xAxis: {
          type: 'datetime',
        series: [
            name: 'Number of Users',
            // colorByPoint: true,
            type: 'line',
            pointInterval: 24 * 3600 * 1000, // one day
            data: [],

  computed: {},

  methods: {
    getItems() {
      this.$http.get(`${this.$config.api}/users/all`).then((response) => {
        this.items =
        console.log('Stats -> Items', this.items)
        this.usersChartOptions.series[0].data = this.usersPerDay()
        this.usersChartOptions.series[0].pointStart = this.pointStart
    usersPerDay() {
      let lookup = {}
      let day = ''
      let ts = 0
      for (var item of this.items) {
        console.log('Checking item', item)
        day = item.createDate.substring(0, 10)
        ts = Date.parse(day)
        // console.log('Timestamp: ', ts)
        if (, ts)) {
          lookup[ts] += 1
        } else {
          lookup[ts] = 1
      console.log('Lookup', lookup)

      let dayInMS = 24 * 3600 * 1000
      let series = []
      // these should be in milliseconds
      let keys = Object.keys(lookup).sort()
      console.log('lookup keys', keys)
      this.pointStart = Number(keys[0])

      let dates = this.range(keys[0], keys[keys.length - 1], dayInMS)
      console.log('dates range', dates)

      // keep track of a running total
      let tally = 0
      for (ts of dates) {
        // console.log('checking for', ts)
        if (, ts)) {
          tally += lookup[ts]
      console.log('Users Chart Series', series)
      return series
    range(start = 0, end = undefined, step = 1) {
      // console.log('range called with', start, end, step)
      start = parseInt(start)
      end = parseInt(end)
      step = parseInt(step)

      let result = [start]
      while (start < end) {
        start += step
        if (start <= end) {
      return result
  mounted() {

highcharts vs d3 at DuckDuckGo
HighCharts vs D3 charts. Our quick analysis of HighCharts & D3โ€ฆ | by Sanket Sahu | Admin & Dashboard Themes | Medium

Custom formatting

Trying to format a tooltip with custom markup.

It turned out to be more difficult than expected. I ended up updating the data that is used to generate the graph to be in the desired format from the beginning. Then adjusting labels is easier to do.

Other Libraries


G2 looks like a nice solution.
Grammar of Graphics | G2
GitHub - antvis/G2: ๐Ÿ“Š A highly interactive data-driven visualization grammar for statistical charts.
GitHub - antvis/G2Plot: An interactive and responsive charting library

javascript data visualization library at DuckDuckGo
14 JavaScript Data Visualization Libraries in 2021
D3 is not a Data Visualization Library | by Elijah Meeks | Medium
joelburget/d4: Data-Driven Declarative Documents
TVJS: Advanced charting & trading systems. - TVJS
Vue Chartkick - Create beautiful JavaScript charts with one line of Vue
vue data visualization open source at DuckDuckGo
Data Visualization with Vue and D3 โ†
Data visualization libraries for Vue.js in 2020 | by Veronika Rovnik | DailyJS | Medium
Pivot table - Wikipedia
dc.js - Dimensional Charting Javascript Library

Dashboards / Analytics / Business Intelligence

This space has heavy overlap with different tools for working with data.

Open Tableau alternatives
charts ยท GitHub Topics ยท GitHub
GitHub - metabase/metabase: The simplest, fastest way to get business intelligence and analytics to everyone in your company
GitHub - getredash/redash: Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.
GitHub - keen/dashboards: Responsive dashboard templates ๐Ÿ“Šโœจ
Dashboards by Keen IO


If you have a python API available, Pandas library can help with this.