Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

d3-party

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-party - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/d3-party.js

114

index.js
/**
* @file
* Mo'effin' D3 Party!
* Main entry point
* n.b., this is mainly because Rollup isn't a fan of mixed exports, boo.
*/
import d3 from 'd3';
/**
* The classic Cult of The Party Parrot colour ramp
* @type {string[]}
*/
export const partyParrotColors = [
'#FD8E8D',
'#FDD58E',
'#8CFD8E',
'#8CFFFE',
'#8DB6FB',
'#D690FC',
'#FD90FD',
'#FD6EF4',
'#FC6FB6',
'#FD6A6B'
];
/**
* Recursively traverses the given node or selection to find the root SVG element.
* @param {HTMLElement|D3Selection} node Target node or selection
* @return {HTMLElement} Root SVG element.
*/
export const findRootSvg = node => {
const el = /SVG.*Element/.test(node.toString()) ? node : node.node();
return el.tagName.toLowerCase() === 'svg'
? el
: findRootSvg(node.parentElement);
};
/**
* Generates a colour loop from an array of colours, offset by the initial value.
* N.b., this is meant to be supplied to a D3 accessor or Array.prototype callback.
* @param {string} color Color string
* @param {number} idx Index of current color
* @return {string} Semicolon-separated cyclical value string
*/
export const generateRamp = (color, idx) =>
[
...partyParrotColors.slice(idx),
...partyParrotColors.slice(0, idx + 1)
].join('; ');
/**
* Creates a `defs` object containing an animated gradient.
* @param {D3Seletion} selection Selection to traverse to root SVG node
* @param {number} speed Animation cycle speed in milliseconds
* @return {object} Object containing the `stop` and `animation` elements.
*/
export const createGradient = (selection, speed) => {
const defs = selection.select('defs').size()
? selection.select('defs')
: selection.append('defs');
const gradient = defs.append('linearGradient').attr('id', 'party');
const stops = gradient
.selectAll('stop')
.data(partyParrotColors)
.enter()
.append('stop')
.attr('offset', (d, i, a) => `${(i / (a.length - 1)) * 100}%`)
.attr('style', d => `stop-color: ${d}`);
const animates = stops
.append('animate')
.attr('attributeName', 'stop-color')
.attr('values', generateRamp)
.attr('dur', `${speed / 1000}s`)
.attr('repeatCount', 'indefinite');
return {stops, animates};
};
/**
* D3 party constructor
* @param {D3Selection} svgSelection Selection containing a SVG parent node
* @param {object} config Configuration object
* @returns {function} party
*/
export default function(
svgSelection,
config = {
speed: 500
}
) {
if (!svgSelection) throw new Error('Please supply a selection');
const root = d3.select(findRootSvg(svgSelection.node()));
const {speed} = config;
let stops = root.select('defs > #party').size()
? root.select('defs > #party > stop')
: createGradient(root, speed);
const party = (selection, opts = {mode: 'fill'}) => {
selection.attr(opts.mode, `url(#party)`);
};
party.stops = newStops => {
if (newStops !== undefined) {
stops = newStops;
return party;
}
return stops;
};
return party;
}
export {default} from './lib';
{
"name": "d3-party",
"version": "1.0.3",
"version": "1.1.0",
"description": "lol.",
"main": "index.js",
"main": "dist/d3-party.js",
"module": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "jest",
"build": "rollup -c",
"prepare": "npm test && npm run build"
},

@@ -16,2 +19,11 @@ "keywords": [

"devDependencies": {
"@babel/core": "^7.0.1",
"@babel/preset-env": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"d3-selection": "^1.3.2",
"jest": "^23.6.0",
"rollup": "^0.65.2",
"rollup-plugin-commonjs": "^9.1.6",
"rollup-plugin-node-resolve": "^3.4.0",
"xo": "^0.23.0"

@@ -22,8 +34,14 @@ },

"envs": [
"browser"
"browser",
"jest"
]
},
"dependencies": {
"d3": "^5.7.0"
"peerDependencies": {
"d3-selection": "^1.3.2"
},
"babel": {
"presets": [
"@babel/env"
]
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc