devinmcginty/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.csv

          
            title
            body-count
            year
            bechdel-test

            
              LotR: Return of the King
              836
              2003
              fail

            
              Kingdom of Heaven
              610
              2005
              fail

            
              300
              600
              2007
              fail

            
              Troy
              572
              2004
              fail

            
              The Last Samurai
              558
              2003
              fail

            
              LotR: Two Towers
              468
              2002
              fail

            
              Grindhouse: Double Feature
              310
              2007
              unknown

            
              Hard Boiled
              307
              1992
              unknown

            
              Titanic
              307
              1997
              pass

            
              We Were Soldiers
              305
              2002
              pass

## 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['title']; }))
      .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return parseFloat(d['body-count']); }) * 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['title']); })
      .attr("y", height)
      .attr("width", x.rangeBand())
      .attr("height", 0);

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

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

  bar.on("mouseover", function(d) {
        tooltip.html(d['bechdel-test'])
            .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>
title	body-count	year	bechdel-test
LotR: Return of the King	836	2003	fail
Kingdom of Heaven	610	2005	fail
300	600	2007	fail
Troy	572	2004	fail
The Last Samurai	558	2003	fail
LotR: Two Towers	468	2002	fail
Grindhouse: Double Feature	310	2007	unknown
Hard Boiled	307	1992	unknown
Titanic	307	1997	pass
We Were Soldiers	305	2002	pass
	<!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['title']; }))
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.domain([0, d3.max(data, function(d) { return parseFloat(d['body-count']); }) * 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['title']); })
	.attr("y", height)
	.attr("width", x.rangeBand())
	.attr("height", 0);

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

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

	bar.on("mouseover", function(d) {
	tooltip.html(d['bechdel-test'])
	.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>