Pokemon_visualization

Built with blockbuilder.org

This dataset is about Pokemon with stats and types, the raw csv file can be found here in Kaggle.

More about this theme click this link.

This radar chart shows the HP, Attack, Defense, Sp. Atk, Sp. Def and Speed score of Pokemon Bulbasaur.

Radar chart forked from Alan Dunning’s Block.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,500,700" rel="stylesheet">
</head>
<style>
body {
  background-color: #F1F3F3    
}
.axis {
	font: 15px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #D4D8DA;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}
#chart {
	position: absolute;
	top: 50px;
	left: 100px;
}
  
  .toolTip {
  pointer-events: none;
	position: absolute;
    display: none;
  min-width: 50px;
  height: auto;
  background: none repeat scroll 0 0 #ffffff;
  padding: 9px 14px 6px 14px;
  border-radius: 2px;
  text-align: center;
  line-height: 1.3;
  color: #5B6770;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, .15);
}
.toolTip:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -12px;
}  
.toolTip span {
	font-weight: 500;
  color: #081F2C;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="RadarChart.js"></script>

<div id="chart"></div>
  
<script>
var width = 300,
    height = 300;

// Config for the Radar chart
var config = {
    w: width,
    h: height,
    maxValue: 100,
    levels: 5,
    ExtraWidthX: 300
}

//Call function to draw the Radar chart
d3.json("data.json", function(error, data) {
    if (error) throw error;
    RadarChart.draw("#chart", data, config);
});

var svg = d3.select('body')
	.selectAll('svg')
	.append('svg')
	.attr("width", width)
	.attr("height", height);
</script>

https://d3js.org/d3.v4.min.js