ac-d3

Release 1.0.13

Audiovisual Charts built with D3

Homepage npm JavaScript Download

Keywords
bubble-chart, chart, charts, d3, data, data-visualization, javascript, javascript-library, multimedia, multimedia-library, scatter-plot, video, vimeo, vimeo-api, visualization, visualizations, visualize-data, youtube, youtube-api
License
MIT
Install
npm install ac-d3@1.0.13

Documentation

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:
Key Value datatype Note
src string Accepts paths to HTML5 supported file types and Vimeo and YouTube embedded URL links.
scalingParameter number Used to determine the relative size of each bubble.
v_id string Must be unique for each video.
type string Either '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:
Key Value datatype Note
src string Accepts paths to HTML5 supported file types and Vimeo and YouTube embedded URL links.
v_id string Must be unique for each video.
type string Either 'video' (for direct URL path), 'vimeo', or 'youtube'.
x number or date string Used to determine the x position of the center of bubble.
y number or date string Used to determine the y position of the center of bubble.
r number or date string Used 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:
Key Value datatype Note
chartType string Type of chart to create (current options are 'bubble' and 'bubbleScatter')
htmlAnchorID string ID of the div where AC-D3 will append the visualization
diameter number Overall diameter of the visualization in pixels
zoom number Zoom level of each of the videos
resolutionThresholds array This sets the bounds for which video resolution to use depending on height of the video (in pixels)
autoplay boolean This specifies whether the videos will begin playing automatically or not
loop boolean This specifies whether videos will start over again, every time it is finished
onDoubleClick string This 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:
Key Value datatype Note
chartType string Type of chart to create (current options are 'bubble' and 'bubbleScatter')
htmlAnchorID string ID of the div where AC-D3 will append the visualization
height number Overall height of the visualization in pixels
width number Overall width of the visualization in pixels
zoom number Zoom level of each of the videos
resolutionThresholds array This sets the bounds for which video resolution to use depending on height of the video (in pixels)
autoplay boolean This specifies whether the videos will begin playing automatically or not
loop boolean This specifies whether videos will start over again, every time it is finished
onDoubleClick string This 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)
dateFormat string This specifies the date format used
xIsDate boolean This specifies whether the data for the x position is a date
yIsDate boolean This specifies whether the data for the y position is a date
rIsDate boolean This specifies whether the data for the r dimension is a date
plottableAreaMargin object See example and diagram below
plottableAreaPadding object See example and diagram below
rLimits object See 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 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();

Stats

Dependencies
1
Dependent packages
2
Dependent repositories
0
Total releases
14
Latest release
First release
Stars
74
Forks
4
Watchers
1
Contributors
3
Repository size
16.6 MB
SourceRank
9

Development practices

Source repo 2FA enabled
TEXT!
Package manager 2FA enabled
TEXT!
Is security responsive
TEXT!
Dependencies are managed
TEXT!
Issue-free release available
TEXT!
Succession plan available
TEXT!

The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.

Learn more →

Releases

1.0.13
1.0.12
1.0.11
1.0.10
1.0.9
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
See all 14 releases

Contributors

Luke Michals Jacob Worrel John Nunns


See all contributors

Login to resync this project