asuresh27/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.csv

          
            name
            stamina
            attack
            defense
            total_stats
            type

            
              Snorlax
              320
              180
              180
              680
              NORMAL

            
              Vaporeon
              260
              186
              168
              614
              WATER

            
              Slowbro
              190
              184
              198
              572
              WATER

            
              Lapras
              260
              186
              190
              636
              WATER

            
              Blastoise
              158
              186
              222
              566
              WATER

            
              Golem
              160
              176
              198
              534
              ROCK

            
              Dragonite
              182
              250
              212
              644
              DRAGON

            
              Poliwrath
              180
              180
              202
              562
              WATER

            
              Golduck
              160
              194
              176
              530
              WATER

            
              Exeggutor
              190
              232
              164
              586
              GRASS

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
  fill: steelblue;
}

.bar:hover {
  fill: lightblue;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.tooltip {
  position: absolute;
  padding: 10px;
  font: 12px sans-serif;
  background: #222;
  color: #fff;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0.9;
  visibility: hidden;
}
</style>

<script src="//d3js.org/d3.v3.min.js"></script>
<script>

///////////////////////
// Parse the Data
d3.csv("data.csv", function(data) {

  ///////////////////////
  // Chart Size Setup
  var margin = { top: 35, right: 0, bottom: 30, left: 40 };

  var width = 960 - margin.left - margin.right;
  var height = 500 - margin.top - margin.bottom;

  var chart = d3.select(".chart")
      .attr("width", 960)
      .attr("height", 500)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  ///////////////////////
  // Scales
  var x = d3.scale.ordinal()
      .domain(data.map(function(d) { return d['type']; }))
      .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return parseFloat(d['total_stats']); }) * 1.1])
      .range([height, 0]);

  ///////////////////////
  // Axis
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

  chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  chart.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  ///////////////////////
  // Title
  chart.append("text")
    .text('Bar Chart!')
    .attr("text-anchor", "middle")
    .attr("class", "graph-title")
    .attr("y", -10)
    .attr("x", width / 2.0);

  ///////////////////////
  // Bars
  var bar = chart.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d['type']); })
      .attr("y", height)
      .attr("width", x.rangeBand())
      .attr("height", 0);

  bar.transition()
      .duration(1500)
      .ease("elastic")
      .attr("y", function(d) { return y(parseFloat(d['total_stats'])); })
      .attr("height", function(d) { return height - y(parseFloat(d['total_stats'])); })

  ///////////////////////
  // Tooltips
  var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip");

  bar.on("mouseover", function(d) {
        tooltip.html(d['total_stats'])
            .style("visibility", "visible");
      })
      .on("mousemove", function(d) {
        tooltip.style("top", event.pageY - (tooltip[0][0].clientHeight + 5) + "px")
            .style("left", event.pageX - (tooltip[0][0].clientWidth / 2.0) + "px");
      })
      .on("mouseout", function(d) {
        tooltip.style("visibility", "hidden");
      });
});
</script>

<body>
  <svg class="chart"></svg>
</body>
name	stamina	attack	defense	total_stats	type
Snorlax	320	180	180	680	NORMAL
Vaporeon	260	186	168	614	WATER
Slowbro	190	184	198	572	WATER
Lapras	260	186	190	636	WATER
Blastoise	158	186	222	566	WATER
Golem	160	176	198	534	ROCK
Dragonite	182	250	212	644	DRAGON
Poliwrath	180	180	202	562	WATER
Golduck	160	194	176	530	WATER
Exeggutor	190	232	164	586	GRASS
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: lightblue;
	}

	.axis text {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.tooltip {
	position: absolute;
	padding: 10px;
	font: 12px sans-serif;
	background: #222;
	color: #fff;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	opacity: 0.9;
	visibility: hidden;
	}
	</style>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	///////////////////////
	// Parse the Data
	d3.csv("data.csv", function(data) {

	///////////////////////
	// Chart Size Setup
	var margin = { top: 35, right: 0, bottom: 30, left: 40 };

	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	var chart = d3.select(".chart")
	.attr("width", 960)
	.attr("height", 500)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	///////////////////////
	// Scales
	var x = d3.scale.ordinal()
	.domain(data.map(function(d) { return d['type']; }))
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.domain([0, d3.max(data, function(d) { return parseFloat(d['total_stats']); }) * 1.1])
	.range([height, 0]);

	///////////////////////
	// Axis
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	chart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	chart.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	///////////////////////
	// Title
	chart.append("text")
	.text('Bar Chart!')
	.attr("text-anchor", "middle")
	.attr("class", "graph-title")
	.attr("y", -10)
	.attr("x", width / 2.0);

	///////////////////////
	// Bars
	var bar = chart.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d['type']); })
	.attr("y", height)
	.attr("width", x.rangeBand())
	.attr("height", 0);

	bar.transition()
	.duration(1500)
	.ease("elastic")
	.attr("y", function(d) { return y(parseFloat(d['total_stats'])); })
	.attr("height", function(d) { return height - y(parseFloat(d['total_stats'])); })

	///////////////////////
	// Tooltips
	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip");

	bar.on("mouseover", function(d) {
	tooltip.html(d['total_stats'])
	.style("visibility", "visible");
	})
	.on("mousemove", function(d) {
	tooltip.style("top", event.pageY - (tooltip[0][0].clientHeight + 5) + "px")
	.style("left", event.pageX - (tooltip[0][0].clientWidth / 2.0) + "px");
	})
	.on("mouseout", function(d) {
	tooltip.style("visibility", "hidden");
	});
	});
	</script>

	<body>
	<svg class="chart"></svg>
	</body>