AC-D3 / Ac D3

AC-D3 is a Javascript Library for building Audiovisual Charts in D3.

• Build predefined visualizations
• Use AC-D3 methods to add audiovisual elements to your D3 visualization

Installation

$ npm install ac-d3 --save

Using AC-D3

HTML

1. Create div with specific ID (Used in config object later)

<div id='vis1'></div>

Javascript

1. Require in library

const acd3 = require('ac-d3');

2. Create data array

Bubble Chart:

const bubbleChartData = [
      {
        "src": 'https://www.youtube.com/embed/F-eMt3SrfFU',
        "scalingParameter": 36,
        "v_id": "vid1",
        "type": "youtube"
    },
    {
        "src": "https://player.vimeo.com/video/12868296",
        "scalingParameter": 12,
        "v_id": "vid2",
        "type": "vimeo"
    },
    {
        "src": "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv",
        "scalingParameter": 24,
        "v_id": "vid3",
        "type": "video"
    }]

Bubble Scatter Chart:

const bubbleScatterChartData = [
      {
        "src": 'https://www.youtube.com/embed/F-eMt3SrfFU',
        "v_id": "vid4",
        "type": "youtube",
        "x": "18-Dec-09",
        "y": 425000000,
        "r": 2783918982
    },
    {
        "src": "https://player.vimeo.com/video/12868296",
        "v_id": "vid5",
        "type": "vimeo",
        "x": "24-May-07",
        "y": 306000000,
        "r": 2058662225
    },
    {
        "src": "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv",
        "v_id": "vid6",
        "type": "video",
        "x": "6-Nov-15",
        "y": 425000000,
        "r": 2783918982
    }]

3. Create config object

Bubble Chart Config Options:

const bubbleConfig = {
  chartType: 'bubble',
  htmlAnchorID: 'vis1',
  diameter: 600,
  zoom: 1.5,
  resolutionThresholds: [250, 500],
  autoplay: false,
  loop: false,
  onDoubleClick: 'expandBubble'
}

Bubble Scatter Chart Config Options:

const bubbleScatterConfig = {
  chartType: 'bubbleScatter',
  htmlAnchorID: 'vis2',
  height: 600,
  height: 900,
  zoom: 1.5,
  resolutionThresholds: [250, 500],
  autoplay: false,
  loop: false,
  onDoubleClick: 'openNewWindow',
  dateFormat: '%d-%b-%y',
  xIsDate: true,
  yIsDate: false,
  rIsDate: false,
  plottableAreaMargin: { top: 0, right: 0, bottom: 30, left: 65 },
  plottableAreaPadding: { top: 120, right: 100, bottom: 80, left: 60 },
  rLimits: { lower: 20, upper: 120 }
}

4) Create a new chart instance and invoke the createBubbleChart or createBubbleScatterChart method

const chart1 = new acd3(data, config);
chart1.createBubbleChart();
const chart2 = new acd3(data, config);
chart2.createBubbleScatterChart();