hexachart

Hexagon based data-viz ## Quick Run ```html <html> </head> <script src="https://unpkg.com/vue"></script> <script src="https://cdn.jsdelivr.net/npm/hexachart/dist/HexaChart.umd.min.js"></script> </head> <body> <div id="app" class="container"> <hexa-s

Usage no npm install needed!

<script type="module">
  import hexachart from 'https://cdn.skypack.dev/hexachart';
</script>

README

hexachart

Hexagon based data-viz

Quick Run

<html>
</head>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/hexachart/dist/HexaChart.umd.min.js"></script>
</head>
<body>
<div id="app" class="container">
  <hexa-stack-chart :data="hsData" :texts="hsTexts" :colors="hsColors"/>
</div>
<script>
  // Comment the following line and uncomment the bellow line to use as plugin
  Object.keys(HexaChart).forEach(name => {
    Vue.component(name, HexaChart[name])
  })
  // Uncomment to use as a plugin
  // const plugin = {
  //   install: Vue => {
  //     Object.keys(HexaChart).forEach(name => {
  //       Vue.component(name, HexaChart[name])
  //     })
  //   }
  // }
  // Vue.use(plugin)
  const hsData = [52.5, 26.3, 21.2]
  const hsColors = ['#666666', '#999999', '#cccccc']
  const hsTexts = ['Alpha', 'Beta', 'Gamma']
  const vm = new Vue({
    data() {
      return {
        hsData,
        hscolors,
        hsTexts
      }
    },
  }).$mount('#app')
</script>
</body>
</html>

In a Vue Project

npm i hexachart

...
</template>
<script>
import * as HexaChat from 'HexaChart'
export default {
  name: 'Demo',
  components: {
    HexaChat.HexaStackChart,
    ...    
  },
  ...

Components

HexaStack

Minimal Example

<template>
<div>
  <hexa-stack-chart
    data="data"
    :colors="colors"
    :texts="texts"
  />
</div>
</template>

<script>
import { HexaStackChart } from 'HexaChart'
export default {
  name: 'Demo',
  components: {
    HexaStackChart
  },
  data () {
    return {
      data: [52.5, 26.3, 21.2],
      colors: ['#666666', '#999999', '#cccccc'],
      texts: ['Alpha', 'Beta', 'Gamma']
    }
  }
}
</script>

<style>
/** Fluid & Fixed responsive **/
.hc-hexastack {
  width: 170px;
  height: 530px;
}
</style>

Props

prop type default description
data Array [] The main data, array of floats, e.g. [3.5, 4, 16]. The size precede the data sum in priority, that means if size is greater than the data sum, the remaining cells will be filled by offColor, while if it is lesser it will be truncated
colors Array ['#f67055'] Colors to be used (reserve order with data)
texts Array [] Array of strings that will be used as legend (reserve order with data)
offColor String '#757575' default color for any inactive cell (hexagon)
size Number 100 The Total number of cells
columns Number 5 The number of columns
rows Number 20 The number of rows
horizontal Boolean false Either or not the hexastack is horizontal, default is vertical
animation Boolean true Either or not use animation, if false no animation will play
animationDuration Number 3000 Animation duration time in milliseconds, do not set to 0, use animation false instead
animationOptions Object {delay: 0, easing: 'Bounce', easingEdge: 'Out'} Object of tweenjs like animation
gradientSpread Number .5 How much the gradient will spread, 0 for sharp separation

HexaPie

Minimal Example

<template>
<div>
  <hexa-pie-chart
    :data="data"
    :texts="texts"
  />
</div>
</template>

<script>
import HexaPieChart from 'HexaChart'
export default {
  name: 'Demo',
  components: {
    HexaPieChart
  },
  data () {
    return {
      data: [32, 18],
      texts: ['Alpha', 'Beta']
    }
  }
}
</script>

<style>
.hc-hexapie {
  width: 316px;
  height: 234px;
}
.hc-hexapie-text {
  fill: #ffffff;
  font-size: 20px;
}
.hc-hexapie-legend {
  font-size: 20px;
  fill: #999999;
}
</style>

Props

prop type default description
data Array [] The main data, array of floats, e.g. [3.5, 4, 16]. This data are represented as percentage on the pie chart
colors Array ['#666666', '#f56042'] Colors to be used (reserve order with data)
texts Array Array of strings that will be used as legend (reserve order with data)
radius Number 116 Radius of the pie
curve Number 0.8 A float between 0..1 that indicate how rounded are the hexagon conrners, 0 would make it a circle and 1 a hexagon
animation Boolean true Either or not use animation, if false no animation will play
animationDuration Number 3000 Animation duration time in milliseconds, do not set to 0, use animation false instead
animationOptions Object {delay: 0, easing: 'Bounce', easingEdge: 'Out'} Object of tweenjs like animation

HexaInception

Minimal Example

<template>
<div>
  <hexa-inception-chart
    :data="data"
    :texts="texts"
    :unit="unit"
  />
</div>
</template>

<script>
import HexaInceptionChart from 'HexaStack'
export default {
  name: 'Demo',
  components: {
    HexaInceptionChart
  },
  data () {
    return {
      data: [107228, 76561],
      texts: ['Alpha', 'Beta'],
      unit: 'M'
    }
  }
}
</script>

<style>
.hc-hexainception {
  width: 500px;
  height: 500px;
}
</style>

Props

prop type default description
data Array [] The main data, Ordered array of floats, e.g. [16, 5, 2]
colors Array ['#666666', '#f56042'] Colors to be used (reserve order with data)
texts Array Array of strings that will be used as legend (reserve order with data)
unit String '' Unit used in the legend, if left empty it will be ommited
curve Number 0.8 A float between 0..1 that indicate how rounded are the hexagon conrners, 0 would make it a circle and 1 a hexagon
animation Boolean true Either or not use animation, if false no animation will play
animationDuration Number 3000 Animation duration time in milliseconds, do not set to 0, use animation false instead
animationOptions Object {delay: 0, easing: 'Bounce', easingEdge: 'Out'} Object of tweenjs like animation

HexaBubule

Minimal Example

<template>
<div>
  <hexa-buble-chart
    :data="data"
  />
</div>
</template>

<script>
import HexaBubleChart from 'HexaStack'
export default {
  name: 'Demo',
  components: {
    HexaBubleChart
  },
  data () {
    return {
      data: [
        {d: 30222 name: 'GrandPa1', id: 1, children: [
          {d: 5600, name: 'Pa1_1', id: 11, children: [
            {d: 130932 name: 'Kid1_1_1', id: 111},
            {d: 89921 name: 'Kid1_1_2', id: 112},
            ...
          ]},
          {d: 66554, name: 'Pa1_2', id: 12, children: [
            ...
          ]},
          ...
        ]},
        ...
      ]
    }
  }
}
</script>

<style>
.hc-hexabuble {
  width: 100%;
  height: 500px;
}
.hc-hexabuble-chart {
  border: #000 solid 1px;
}
.hc-hexabuble-legend {
  font-size: 16px;
  fill: #999999;
}
</style>

Props

prop type default description
data Array [] The main data, One way bound Tree with leafs being on the format {d: 89921 name: 'name to be displayed', id: 1} and parent having an additional children attribute, which is an array of other nodes
colors* undefined undefined not yet implemented
unit String '' Unit used in the legend, if left empty it will be ommited
curve* undefined undefined not yet implemented
animation Boolean true Either or not use animation, if false no animation will play
animationDuration Number 3000 Animation duration time in milliseconds, do not set to 0, use animation false instead
animationOptions Object {delay: 0, easing: 'Bounce', easingEdge: 'Out'} Object of tweenjs like animation