Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ac-d3 with all npm packages installed. Try it out:

var acD3 = require("ac-d3")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ac-d3 v1.0.13

Audiovisual Charts built with D3

N|Solid

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

N|Solid N|Solid

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');
  1. Create data array
Bubble Chart:
KeyValue datatypeNote
srcstringAccepts paths to HTML5
scalingParameternumberUsed to determine the relative size of each bubble.
v_idstringMust be unique for each video.
typestringEither 'video' (for direct URL path), 'vimeo', or 'youtube'.
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:
KeyValue datatypeNote
srcstringAccepts paths to HTML5
v_idstringMust be unique for each video.
typestringEither 'video' (for direct URL path), 'vimeo', or 'youtube'.
xnumber or date stringUsed to determine the x position of the center of bubble.
ynumber or date stringUsed to determine the y position of the center of bubble.
rnumber or date stringUsed to determine the relative size of each bubble.
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
    }]
  1. Create config object
Bubble Chart Config Options:
KeyValue datatypeNote
chartTypestringType of chart to create (current options are 'bubble' and 'bubbleScatter')
htmlAnchorIDstringID of the div where AC-D3 will append the visualization
diameternumberOverall diameter of the visualization in pixels
zoomnumberZoom level of each of the videos
resolutionThresholdsarrayThis sets the bounds for which video resolution to use depending on height of the video (in pixels)
autoplaybooleanThis specifies whether the videos will begin playing automatically or not
loopbooleanThis specifies whether videos will start over again, every time it is finished
onDoubleClickstringThis specifies which event handler to invoke on dblclick (current options are 'openNewWindow', a function that opens the video in a new window, and 'expandBubble', a function that expands the size of the bubbe to fill the entire visualization)
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:
KeyValue datatypeNote
chartTypestringType of chart to create (current options are 'bubble' and 'bubbleScatter')
htmlAnchorIDstringID of the div where AC-D3 will append the visualization
heightnumberOverall height of the visualization in pixels
widthnumberOverall width of the visualization in pixels
zoomnumberZoom level of each of the videos
resolutionThresholdsarrayThis sets the bounds for which video resolution to use depending on height of the video (in pixels)
autoplaybooleanThis specifies whether the videos will begin playing automatically or not
loopbooleanThis specifies whether videos will start over again, every time it is finished
onDoubleClickstringThis specifies which event handler to invoke on dblclick (current options are 'openNewWindow', a function that opens the video in a new window, and 'expandBubble', a function that expands the size of the bubbe to fill the entire visualization)
dateFormatstringThis specifies the date format used
xIsDatebooleanThis specifies whether the data for the x position is a date
yIsDatebooleanThis specifies whether the data for the y position is a date
rIsDatebooleanThis specifies whether the data for the r dimension is a date
plottableAreaMarginobjectSee example and diagram below
plottableAreaPaddingobjectSee example and diagram below
rLimitsobjectSee example and diagram below
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 }
}

N|Solid

  1. 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();

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free