I'm brand new to using Javascript and I've hit a roadblock while trying to construct a Radar/Web graph for my current project.
The graph in question is a three-point Radar Graph that measures Base Attack, Defense, and Stamina. My goal is to overlay a triangle (or another polygon) on top of these points to create a clear "radar" shape:
.
This data is being fetched through an API and is displayed using SQLite. The API requires a specific ID number to fetch the corresponding Base Statistics.
Below is the code snippet responsible for generating the graph:
function getBaseStats(pokecharID) {
var queryUrl = "/api/v1/base_stats";
var int_pokeCharID = parseInt(pokecharID);
let filteredStats = [];
let statsList = [];
statsList.length = 0;
d3.json(queryUrl).then((data) => {
filteredStats.push(
data.filter((stat) => stat[0] === int_pokeCharID && stat[1] === "Normal")
);
var base_attack = filteredStats[0][0][2];
var base_defense = filteredStats[0][0][3];
var base_stamina = filteredStats[0][0][4];
var w = 500,
h = 500;
var colorscale = d3.scaleOrdinal(d3.schemeCategory10);
var d = [
[
{ axis: "Base Attack", value: base_attack },
{ axis: "Base Defense", value: base_defense },
{ axis: "Base Stamina", value: base_stamina },
],
];
I truly appreciate any guidance provided!
Edit: Included code attempting to create polygon.
var area = d3.svg.area.radial()
.interpolate("cardinal-closed")
.angle(function(d) { return angle(d.time); })
.innerRadius(function(d) { return radius(d.y0); })
.outerRadius(function(d) { return radius(d.y0 + d.y); });