How Do I Advertise My Contest?

Data Visualization: What is the official type of this "Pokemon contest" graph and how can I replicate it in D3?

• Knowing the name can really help. Here's somewhat relevant information / background information: Contest Stats There are five distinct Contest Stats, like there are six distinct battle stats. The Contest Stats are Cool, Tough, Beauty, Smart, and Cute. Each of these corresponds to one of the five flavors found in berries: Spicy corresponds to Cool; Sour to Tough; Dry to Beauty; Bitter to Smart; and Sweet to Cute. When you feed Poffins to Pokemon you can increase a Pokemon’s Cool, Tough, Beauty, Smart or Cute Stats. The Contest Stats on a single pokemon, when added together, may not exceed 20. Furthermore, no single stat may have more than 12 points. Whenever you use a move during a contest, you may Burn a point of your matching Contest Stat to increase the appeal power of a move by +1. You may burn up to four points in this manner in a single move. For example, if you use Brick Break in a contest and burn 2 points of your Cool stat, your appeal for the round will be 3d4+2 All burned points are refreshed when the contest is over. Poffins The value of a poffin is X, where X is the number of berries you added to the food, up to a maximum of five. You may add more than 5 berries into the mix, to change the flavor of the food, but X cannot be higher than 5. The Poffin’s flavor depends on the flavors of berries put into the food; whichever flavor had the highest number of berries in the mix becomes the flavor of the food. If there is an equal amount of flavor in the food, the food is double-typed, but the value is deducted by 2. If you feed a Poffin to a Pokemon, the pokemon gains the the value of that food to the pokemon’s Cool, Tough, Beauty, Smart or Cute stats. A Bitter food with a value of 5 will add 5 points to a pokemon’s Smart stats. A Dry and Sweet food with a value of 3 will add 3 to a pokemon’s Beauty and Cute stats. Only the first five Poffins that you feed to your pokemon will raise its contest stats. You may still feed foods to your pokemon, but after the fifth one, it will not add points to their stats any more. If you feed a food which has a disliked flavor to your Pokemon, when it gains half of the value of the food, subtract an additional point from it when adding the points to the Contest Stats. If there is a liked flavor in the food, add a single point into the liked flavor’s associated Contest Stat. Source: http://ptu.wikidot.com/contests

• Answer:

  hi, this is a radar chart sometimes called a spider chart. the gist of it is to create an svg shape that corresponds to the data. It can be either a polygon or a path element. I find it easier to use a path but there are several ways. contrary to bar charts, scatterplots etc. where each data item corresponds to one svg element, in this case there will be one svg element for the data series. On top of that you may want to draw axes, marks etc. for each element as well. here's how you build the main shape. let's assume your data points are in the range 0-10 and your chart would be 300 pixels in radius. let's also assume you have a div html element with the id "chart". // conventions... there are other ways to do it var svg=d3.select("#chart").append("svg").attr({width:960,height:700}); var vis=svg.append("g").attr("transform","translate(480,350)"); var Ï€=Math.PI; var data=d3.range(3+Math.floor(Math.random()*5)) // random number of points     .map(function() {return Math.random()*10;}); var myColor=d3.hsl(Math.random()*360,.75,.5); // surprise color var lScale=d3.scale.linear().domain([0,10]).range([0,300]); vis.append("path").attr("id","radar").data([data])     .attr("d",function(d) {         var path="";         var n=d.length;         d.forEach(function(e,i) {            var r=lScale(e);            path=path+(i?"L":"M");            path=path+r*Math.cos(2*Ï€*i/n);            path=path+","            path=path+r*Math.sin(2*Ï€*i/n);         })         path=path+"Z";         return path;     })     .style({fill:myColor,stroke:myColor,"fill-opacity":.5})