<commit_before>/////////////////////////////////////////////////////////
/////////////// The Radar Chart Function ////////////////
/////////////// Written by <NAME> ////////////////
////////////////// VisualCinnamon.com ///////////////////
/////////// Inspired by the code of alangrafu ///////////
/////////////////////////////////////////////////////////

function getMaxSpeed(ifaces) {
  var maxValue = 0;
  for (var i in ifaces) {
    if (ifaces[i].speed > maxValue) {
      maxValue = ifaces[i].speed;
    }
  }
  return maxValue;
}

function RadarChart(id, data) {
  var maxValue = 100;  //Utilization percentage
  //Speed multiplier to get radius of the external circles, proportional to
  //their area.
  var speedScale = 7.0 / getMaxSpeed(data[0])**0.5;

	var cfg = {
	 w: $("#switchChart").parent().width() / 2,				//Width of the circle
	 h: $("#switchChart").parent().width() / 2,				//Height of the circle
	 margin: {top: 30, right: 30, bottom: 30, left: 30}, //The margins of the SVG
	 levels: 4,				//How many levels or inner circles should there be drawn
	 maxValue: maxValue, 			//What is the value that the biggest circle will represent
	 labelFactor: 1.15, 	//How much farther than the radius of the outer circle should the labels be placed
	 wrapWidth: 60, 		//The number of pixels after which a label needs to be given a new line
	 opacityArea: 0.30, 	//The opacity of the area of the blob
	 dotRadius: 3, 			//The size of the colored circles of each blog
	 opacityCircles: 0.1, 	//The opacity of the circles of each blob
	 strokeWidth: 2, 		//The width of the stroke around each blob
	 roundStrokes: true,	//If true the area and stroke will follow a round path (cardinal-closed)
	 color: d3.scaleOrdinal().range(["#549e9f","#b54872"])
	};

  var interfaceColor = d3.scaleLinear()
                         .domain([0, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100])
                         .range(["#2d2d35", "#41414d","#616173","#77778c","#8d8da6","#a2a2bf","#adadcc","#c3c3e6","#d9d9ff"]);
                         //.range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"]);

	var allAxis = (data[0].map(function(i, j) { return i } )),	//Names of each axis
		total = allAxis.length,					//The number of different axes
		radius = Math.min(cfg.w/2, cfg.h/2), 	//Radius of the outermost circle
		angleSlice = Math.PI * 2 / total;		//The width in radians of each "slice"

	// Scale for the radius
	var rScale = d3.scaleLinear()
		.range([0, radius])
		.domain([0, maxValue]);

	// Initiate the radar chart SVG
	var svg = d3.select(id).append("svg")
			.attr("width",  cfg.w + cfg.margin.left + cfg.margin.right)
			.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
			.attr("class", "radar"+id);

	// Append a g element
	var g = svg.append("g")
			.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")");

	/////////////////////////////////////////////////////////
	/////////////// Draw the Circular grid //////////////////
	/////////////////////////////////////////////////////////

	//Wrapper for the grid & axes
	var axisGrid = g.append("g").attr("class", "axisWrapper");

	//Draw the background circles
	axisGrid.selectAll(".levels")
	   .data(d3.range(1,(cfg.levels+1)).reverse())
	   .enter()
		.append("circle")
		.attr("r", function(d, i){return radius/cfg.levels*d;})
    .attr("class", "grid-lines");

	// Text indicating at what % each level is
	axisGrid.selectAll(".axisLabel")
	   .data(d3.range(1, (cfg.levels + 1)).reverse())
	   .enter().append("text")
	   .attr("class", "axisLabel")
	   .attr("x", 0)
	   .attr("y", function(d){return - d * radius/cfg.levels;})
	   .attr("dy", "1.5em")
	   .text(function(d,i) { return (100 / cfg.levels) * d});

	// Create the straight lines radiating outward from the center
	var axis = axisGrid.selectAll(".axis")
		.data(allAxis)
		.enter()
		.append("g")
		.attr("class", "axis");

	// Append the lines
	axis.append("line")
		.attr("x1", function(d, i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); })
		.attr("y1", function(d, i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
		.attr("x2", function(d, i){ return rScale(maxValue) * Math.cos(angleSlice*i - Math.PI/2); })
		.attr("y2", function(d, i){ return rScale(maxValue) * Math.sin(angleSlice*i - Math.PI/2); })
		.attr("class", "line");


	// Append the interfaces circles at each axis
	axis.append("circle")
		.attr("class", "interface")
		.attr("r", function(d,i) { return d.speed**0.5 * speedScale })
		.attr("cx", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); })
		.attr("cy", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); })
    .style("fill", function(d,i) { return interfaceColor(d.value); });

	// The radial line function
	var radarLine = d3.radialLine()
		.curve(d3.curveCardinalClosed)
		.radius(function(d) { return rScale(d.value); })
		.angle(function(d,i) {	return i*angleSlice; })

	// Create a wrapper for the blobs
	var blobWrapper = g.selectAll(".radarWrapper")
		.data(data)
		.enter().append("g")
		.attr("class", "radarWrapper");

	// Append the backgrounds
	blobWrapper
		.append("path")
		.attr("class", "radarArea")
		.attr("d", function(d,i) { return radarLine(d); })
		.style("fill", function(d,i) { return cfg.color(i); })<commit_msg>Fix bug with power math operand<commit_after>/////////////////////////////////////////////////////////
/////////////// The Radar Chart Function ////////////////
/////////////// Written by <NAME> ////////////////
////////////////// VisualCinnamon.com ///////////////////
/////////// Inspired by the code of alangrafu ///////////
/////////////////////////////////////////////////////////

function getMaxSpeed(ifaces) {
  var maxValue = 0;
  for (var i in ifaces) {
    if (ifaces[i].speed > maxValue) {
      maxValue = ifaces[i].speed;
    }
  }
  return maxValue;
}

function RadarChart(id, data) {
  var maxValue = 100;  //Utilization percentage
  //Speed multiplier to get radius of the external circles, proportional to
  //their area.
  var speedScale = 7.0 / Math.pow(getMaxSpeed(data[0]),0.5);

	var cfg = {
	 w: $("#switchChart").parent().width() / 2,				//Width of the circle
	 h: $("#switchChart").parent().width() / 2,				//Height of the circle
	 margin: {top: 30, right: 30, bottom: 30, left: 30}, //The margins of the SVG
	 levels: 4,				//How many levels or inner circles should there be drawn
	 maxValue: maxValue, 			//What is the value that the biggest circle will represent
	 labelFactor: 1.15, 	//How much farther than the radius of the outer circle should the labels be placed
	 wrapWidth: 60, 		//The number of pixels after which a label needs to be given a new line
	 opacityArea: 0.30, 	//The opacity of the area of the blob
	 dotRadius: 3, 			//The size of the colored circles of each blog
	 opacityCircles: 0.1, 	//The opacity of the circles of each blob
	 strokeWidth: 2, 		//The width of the stroke around each blob
	 roundStrokes: true,	//If true the area and stroke will follow a round path (cardinal-closed)
	 color: d3.scaleOrdinal().range(["#549e9f","#b54872"])
	};

  var interfaceColor = d3.scaleLinear()
                         .domain([0, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100])
                         .range(["#2d2d35", "#41414d","#616173","#77778c","#8d8da6","#a2a2bf","#adadcc","#c3c3e6","#d9d9ff"]);
                         //.range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"]);

	var allAxis = (data[0].map(function(i, j) { return i } )),	//Names of each axis
		total = allAxis.length,					//The number of different axes
		radius = Math.min(cfg.w/2, cfg.h/2), 	//Radius of the outermost circle
		angleSlice = Math.PI * 2 / total;		//The width in radians of each "slice"

	// Scale for the radius
	var rScale = d3.scaleLinear()
		.range([0, radius])
		.domain([0, maxValue]);

	// Initiate the radar chart SVG
	var svg = d3.select(id).append("svg")
			.attr("width",  cfg.w + cfg.margin.left + cfg.margin.right)
			.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
			.attr("class", "radar"+id);

	// Append a g element
	var g = svg.append("g")
			.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")");

	/////////////////////////////////////////////////////////
	/////////////// Draw the Circular grid //////////////////
	/////////////////////////////////////////////////////////

	//Wrapper for the grid & axes
	var axisGrid = g.append("g").attr("class", "axisWrapper");

	//Draw the background circles
	axisGrid.selectAll(".levels")
	   .data(d3.range(1,(cfg.levels+1)).reverse())
	   .enter()
		.append("circle")
		.attr("r", function(d, i){return radius/cfg.levels*d;})
    .attr("class", "grid-lines");

	// Text indicating at what % each level is
	axisGrid.selectAll(".axisLabel")
	   .data(d3.range(1, (cfg.levels + 1)).reverse())
	   .enter().append("text")
	   .attr("class", "axisLabel")
	   .attr("x", 0)
	   .attr("y", function(d){return - d * radius/cfg.levels;})
	   .attr("dy", "1.5em")
	   .text(function(d,i) { return (100 / cfg.levels) * d});

	// Create the straight lines radiating outward from the center
	var axis = axisGrid.selectAll(".axis")
		.data(allAxis)
		.enter()
		.append("g")
		.attr("class", "axis");

	// Append the lines
	axis.append("line")
		.attr("x1", function(d, i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); })
		.attr("y1", function(d, i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); })
		.attr("x2", function(d, i){ return rScale(maxValue) * Math.cos(angleSlice*i - Math.PI/2); })
		.attr("y2", function(d, i){ return rScale(maxValue) * Math.sin(angleSlice*i - Math.PI/2); })
		.attr("class", "line");


	// Append the interfaces circles at each axis
	axis.append("circle")
		.attr("class", "interface")
		.attr("r", function(d,i) { return Math.pow(d.speed,0.5) * speedScale })
		.attr("cx", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); })
		.attr("cy", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); })
    .style("fill", function(d,i) { return interfaceColor(d.value); });

	// The radial line function
	var radarLine = d3.radialLine()
		.curve(d3.curveCardinalClosed)
		.radius(function(d) { return rScale(d.value); })
		.angle(function(d,i) {	return i*angleSlice; })

	// Create a wrapper for the blobs
	var blobWrapper = g.selectAll(".radarWrapper")
		.data(data)
		.enter().append("g")
		.attr("class", "radarWrapper");

	// Append the backgrounds
	blobWrapper
		.append("path")
		.attr("class", "radarArea")
		.attr("d", function(d,i) { return radarLine(d); })
		.style("fill", function(d,i) { return cfg.color(i); })
{'fraction_non_alphanumeric': 0.23759647188533628, 'fraction_numerical': 0.029217199558985666, 'mean_word_length': 2.55718954248366, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7298414', 'n_tokens_mistral': 3962, 'n_tokens_neox': 3594, 'n_words': 961}