ac-d3 - npm Package Compare versions
Comparing version 1.0.3 to 1.0.4
| { | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/AC-D3/AC-D3.git" | ||
| }, | ||
| "_args": [ | ||
@@ -17,3 +21,3 @@ [ | ||
| "_from": "ac-d3@latest", | ||
| "_id": "ac-d3@1.0.3", | ||
| "_id": "ac-d3@1.0.4", | ||
| "_inCache": true, | ||
@@ -24,3 +28,3 @@ "_location": "/ac-d3", | ||
| "host": "s3://npm-registry-packages", | ||
| "tmp": "tmp/ac-d3-1.0.3.tgz_1497913949293_0.07374315382912755" | ||
| "tmp": "tmp/ac-d3-1.0.4.tgz_1497913949293_0.07374315382912755" | ||
| }, | ||
@@ -46,3 +50,3 @@ "_npmUser": { | ||
| ], | ||
| "_resolved": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.3.tgz", | ||
| "_resolved": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.4.tgz", | ||
| "_shasum": "7a3836bf55cbe98854127d867745dd66726a0384", | ||
@@ -61,3 +65,3 @@ "_shrinkwrap": null, | ||
| "shasum": "7a3836bf55cbe98854127d867745dd66726a0384", | ||
| "tarball": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.3.tgz" | ||
| "tarball": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.4.tgz" | ||
| }, | ||
@@ -78,3 +82,3 @@ "license": "ISC", | ||
| }, | ||
| "version": "1.0.3" | ||
| } | ||
| "version": "1.0.4" | ||
| } |
@@ -8,4 +8,2 @@ [](https://nodesource.com/products/nsolid) | ||
| ### Installation | ||
@@ -17,21 +15,45 @@ *** | ||
| ### Using AC-D3 | ||
| *** | ||
| #### Pre-built visualizations | ||
| To include a complete visualization to your site, you need to feed a data object and a config object into the ac-d3 library. | ||
| ##### HTML | ||
| 1. Create div with specific ID (Used in config object later) | ||
| ```html | ||
| <div id='vis'></div> | ||
| ``` | ||
| 2. Add script tags | ||
| ```html | ||
| <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script> | ||
| <script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script> | ||
| <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> | ||
| ``` | ||
| ##### Javascript | ||
| 1. Require in library | ||
| ```javascript | ||
| const acd3 = require('acd3'); | ||
| const acd3 = require('ac-d3'); | ||
| ``` | ||
| 2. Create data object | ||
| | Key | Value datatype | Note | | ||
| | :-- | :-- | :-- | | ||
| | src | string | Accepts paths to HTML5 <video> 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. Can't be a string of a number ('21'). | | ||
| | type | string | Either 'video' (for direct URL path), 'vimeo', or 'youtube'. | | ||
| ```javascript | ||
| const data = { | ||
| "children": [ | ||
| { | ||
| "src": 'https://www.youtube.com/embed/F-eMt3SrfFU?enablejsapi=1', | ||
| "src": 'https://www.youtube.com/embed/F-eMt3SrfFU', | ||
| "scalingParameter": 36, | ||
| "v_id": "1", | ||
| "v_id": "vid1", | ||
| "type": "youtube" | ||
| }, | ||
| { | ||
| "src": "https://player.vimeo.com/video/12868296?autopause=0", | ||
| "src": "https://player.vimeo.com/video/12868296?", | ||
| "scalingParameter": 12, | ||
| "v_id": "4", | ||
| "v_id": "vid4", | ||
| "type": "vimeo" | ||
@@ -42,19 +64,31 @@ }, | ||
| "scalingParameter": 24, | ||
| "v_id": "6", | ||
| "v_id": "vid6", | ||
| "type": "video" | ||
| }] | ||
| } | ||
| ``` | ||
| 3. Create config object | ||
| | Key | Value datatype | Note | | ||
| | :-- | :-- | :-- | | ||
| | htmlAnchorID | string | ID of the div where AC-D3 will append the visualization | | ||
| | diameter | number | Overall diameter of the visualization | | ||
| | 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) | | ||
| ```javascript | ||
| const config = { | ||
| htmlAnchorID: 'vis', | ||
| diameter: 600, | ||
| zoom: 2, | ||
| unmuteOnHover: true, | ||
| shape: 'circle' | ||
| zoom: 1.5, | ||
| resolutionThresholds: [250, 500], | ||
| } | ||
| acd3.drawBubble(data, config); | ||
| ``` | ||
| 4. Create a new chart instance and invode the createBubbleChart method | ||
| ```javascript | ||
| const randomChart = new acd3(data, config); | ||
| randomChart.createBubbleChart(); | ||
| ``` | ||
| #### For existing visualizations | ||
| Coming soon... |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by15.07%
10715
- Number of lines in readme file
- increased by56.9%
91
- Number of low supply chain risk alerts
- decreased by-100%
0
- Number of medium supply chain risk alerts
- decreased by-100%
0