d3-project-template/src/scripts/main.js

Template for d3 project

import '../styles/main.scss';
import BarChartRace from './charts/BarChartRace';
import {csv} from 'd3-fetch';
import {autoType} from 'd3-dsv';

const confirmedUrl = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv';
const recoveredUrl = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv';
const deathsUrl = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv';

class App {
  constructor() {
    this.init();
  }

  async init() {
    var datasets = await this.loadData();
    
    this.chart = new BarChartRace({
      container: '#chart',
      data: datasets
    })
    
    this.chart.render();
  }

  async loadData() {
    return Promise.all([
      csv(confirmedUrl, autoType),
      csv(recoveredUrl, autoType),
      csv(deathsUrl, autoType)
    ]).then(resp => {
      return {
        confirmed: resp[0],
        recovered: resp[1],
        deaths: resp[2],
        columns: resp[0].columns
      }
    })
  }

  startPauseAnimation() {
    var animation = this.chart.animation;

    var btn = document.getElementById('start_pause_btn');
    var icon = btn.querySelector('.icon');
    var stopBtn = document.getElementById('stop_btn');
  
    if (animation.state() == 'running') { // stop
        animation.stop();
        icon.classList.remove('pause');
        icon.classList.add('play');
    } else { // start
        animation.start();
        stopBtn.disabled = false;
        icon.classList.remove('play');
        icon.classList.add('pause')
    }
  }
  
  stopAnimation() {
    var btn = document.getElementById('start_pause_btn');
    var icon = btn.querySelector('.icon');
    var stopBtn = document.getElementById('stop_btn');
  
    icon.classList.remove('pause');
    icon.classList.add('play');
    stopBtn.disabled = true;
  
    this.chart.animation.reset(true);
  }

  changeN() {
    var sel = document.getElementById('top_n_select');

    this.chart.updateTopN(+sel.value);

    var animationState = this.chart.animation.state();
    var index = this.chart.animation.currentFrameIndex();

    if (animationState == 'stopped') {
      this.chart.animateFrame(this.chart.keyframes[index], 0);
    }
}
}

window.app = new App();