Plutchik Emotion Wheel

Examples

• simple example written in ES6
• simple example written in ES5 - usage CDN
• dark theme
• events subscribe
• custom labels
• mobile with touch events

Usage

<script type="text/javascript" src="https://unpkg.com/@psychological-components/plutchik/umd/plutchik.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@psychological-components/plutchik/lib/theme-core.css">
<div id="drawer"></div>
<script>
    Plutchik.default({
      element: '#drawer'
    });
</script>

Parameters

| Name | Type | Default Value | Description | | ----------- |:---------------:| --------------:|------------:| | element | string | #drawer | DOM element for component rendering | | maxElements| number | 32 | Number of max checked elements | | checkedElements | Array <string> | [] | Array of checked elements | | labels | Array<Array<string>> | [] | example | | isMobile | boolean | false | Flag for render mobile version (without white spaces) | | lang | string | en | available: 'en', 'pl'|

labels

[
   ["ecstasy", "admiration", "terror", "amazement", "grief", "loathing", "rage", "vigilance"],
   ["joy", "trust", "fear", "surprise", "sadness", "disgust", "anger", "anticipation"],
   ["serenity", "acceptance", "apprehension", "distraction", "pensiveness", "boredom", "annoyance", "interest"],
   ["optimistm", "love", "submission", "awe", "disapproval", "emorse", "contempt", "aggressiveness"]
 ];

API

elementClick