Added radar chart

Author: andreaferretti

css/main.css

@@ -119,4 +119,27 @@
 #tree path {
     stroke: #336699;
     fill: none;
+}
+
+/*Radar*/
+
+.radar path {
+  opacity: 0.8;
+}
+
+.radar text {
+  font-size: 10px;
+}
+
+.pokemon-info {
+  float: right;
+  min-width: 140px;
+  padding: 10px;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  background-color: #eeeeee;
+}
+
+.pokemon-info .label {
+  float: right;
 }

docs/css/main.css

@@ -119,4 +119,27 @@
 #tree path {
     stroke: #336699;
     fill: none;
+}
+
+/*Radar*/
+
+.radar path {
+  opacity: 0.8;
+}
+
+.radar text {
+  font-size: 10px;
+}
+
+.pokemon-info {
+  float: right;
+  min-width: 140px;
+  padding: 10px;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  background-color: #eeeeee;
+}
+
+.pokemon-info .label {
+  float: right;
 }

docs/images/Radar chart.png

@@ -18,7 +18,7 @@ function interpolate(a, b, t) {
   if (typeof b === 'number') {
     return a + (b - a) * t;
   }
-  return a;
+  return b;
 }
 
 function copy(obj) {

docs/main.js

@@ -16,6 +16,7 @@ var Voronoi = require('./voronoi.jsx');
 var Graph = require('./graph.jsx');
 var Sankey = require('./sankey.jsx');
 var Waterfall = require('./waterfall.jsx');
+var Radar = require('./radar.jsx');
 var Disclaimer = require('./disclaimer.jsx');
 
 module.exports = React.createClass({
@@ -75,6 +76,10 @@ module.exports = React.createClass({
     <Panel key="waterfall" title="Waterfall diagram" text="A breakdown of incomes and costs for each month"
       sources={ ['components/waterfall', 'data/waterfall'] }>
       <Waterfall />
+    </Panel>,
+    <Panel key="radar" title="Radar chart" text="Here is a radar chart showing Pokémon stats. Try changing Pokémon"
+      sources={ ['components/radar', 'data/pokemon'] }>
+      <Radar />
     </Panel>
   ],
 

docs/main.js.map

@@ -0,0 +1,91 @@
+var React = require('react');
+var Input = require('react-bootstrap/Input');
+var Radar = require('paths-js/radar');
+var Colors = require('../palette/colors.jsx');
+var util = require('../palette/util.jsx');
+var Animate = require('../animate.jsx');
+var data = require('../data/pokemon.json');
+
+function keyAccessor(keys) {
+  var a = {};
+  keys.forEach(function(key) {
+    a[key] = function(obj) { return obj[key]; }
+  });
+  return a;
+}
+
+var labels = ['hp', 'attack', 'defense', 'sp_attack', 'sp_defense', 'speed'];
+var palette = Colors.mix({r: 130, g: 140, b: 210}, {r: 180, g: 205, b: 150});
+var colors = util.palette_to_function(palette);
+
+module.exports = React.createClass({
+  mixins: [Animate.Mixin],
+  getInitialState: function() {
+    return {
+      pokemon: data[0],
+      color: palette[0]
+    };
+  },
+  select: function(e) {
+    this.animateState({
+      pokemon: data[e.target.value],
+      color: palette[e.target.value]
+    });
+  },
+  render: function() {
+    var radar = Radar({
+      data: [this.state.pokemon],
+      accessor: keyAccessor(labels),
+      center: [0, 0],
+      r: 130,
+      max: 100
+    });
+    var color = this.state.color;
+    var rings = radar.rings.map(function(r, i) {
+      if (i == 2) {
+        var lines = r.path.points().map(function(p, j) {
+          var x = p[0];
+          var y = p[1];
+          var transform = 'translate(' + Math.floor(1.2 * x) + ',' + Math.floor(1.2 * y) + ')';
+          return <g>
+            <text textAnchor="middle" transform={ transform }>{ labels[j] }</text>
+            <line x1={ x } y1={ y } x2={ 0 } y2={ 0 } stroke="gray" />
+          </g>
+        });
+        return <g>{ lines }</g>
+      } else {
+        return <path d={ r.path.print() } fill="none" stroke="gray" />
+      }
+    });
+    var poly = radar.curves.map(function(c) {
+      return <path d={ c.polygon.path.print() }
+        fill={ Colors.string(Colors.lighten(color)) } stroke={ Colors.string(color) } />
+    });
+    var options = data.map(function(p, i) {
+      return <option value={ i }>{ p.name }</option>
+    });
+
+    return (
+      <div className="radar">
+        <Input type="select" onChange={ this.select }>
+          { options }
+        </Input>
+        <div className="pokemon-info">
+          <h4>{ this.state.pokemon.name }</h4>
+          <p>HP: <span className="label label-info">{ Math.floor(this.state.pokemon.hp) }</span></p>
+          <p>Attack: <span className="label label-info">{ Math.floor(this.state.pokemon.attack) }</span></p>
+          <p>Defense: <span className="label label-info">{ Math.floor(this.state.pokemon.defense) }</span></p>
+          <p>Sp. Attack: <span className="label label-info">{ Math.floor(this.state.pokemon.sp_attack) }</span></p>
+          <p>Sp. Defense: <span className="label label-info">{ Math.floor(this.state.pokemon.sp_defense) }</span></p>
+          <p>Speed: <span className="label label-info">{ Math.floor(this.state.pokemon.speed) }</span></p>
+        </div>
+        <svg width={ 375 } height={ 400 }>
+          <g transform="translate(200, 200)">
+            { rings }
+            { poly }
+          </g>
+        </svg>
+      </div>
+    );
+  }
+});

images/Radar chart.png

@@ -0,0 +1,74 @@
+[
+  {
+    "name":"Bulbasaur",
+    "hp":45,
+    "attack":49,
+    "defense":49,
+    "sp_attack":65,
+    "sp_defense":65,
+    "speed":45
+  },
+  {
+    "name":"Ivysaur",
+    "hp":60,
+    "attack":62,
+    "defense":63,
+    "sp_attack":80,
+    "sp_defense":80,
+    "speed":60
+  },
+  {
+    "name":"Venusaur",
+    "hp":80,
+    "attack":82,
+    "defense":83,
+    "sp_attack":100,
+    "sp_defense":100,
+    "speed":80
+  },
+  {
+    "name":"Kakuna",
+    "hp":45,
+    "attack":25,
+    "defense":50,
+    "sp_attack":25,
+    "sp_defense":25,
+    "speed":35
+  },
+  {
+    "name":"Charmeleon",
+    "hp":58,
+    "attack":64,
+    "defense":58,
+    "sp_attack":80,
+    "sp_defense":65,
+    "speed":80
+  },
+  {
+    "name":"Squirtle",
+    "hp":44,
+    "attack":48,
+    "defense":65,
+    "sp_attack":50,
+    "sp_defense":64,
+    "speed":43
+  },
+  {
+    "name":"Blastoise",
+    "hp":79,
+    "attack":83,
+    "defense":100,
+    "sp_attack":85,
+    "sp_defense":105,
+    "speed":78
+  },
+  {
+    "name":"Butterfree",
+    "hp":60,
+    "attack":45,
+    "defense":50,
+    "sp_attack":90,
+    "sp_defense":80,
+    "speed":70
+  }
+]