chuckpr/README.md

## readme.csv

          
            Day
            Cellulose
            Xylose

            
              1
              0
              19

            
              3
              2
              19

            
              7
              5
              15

            
              14
              42
              6

            
              30
              39
              1

## README.md

      
    Raw
  

              README.md
            
          
    This is just a demo of using CSS for hover interaction in a D3.js bar chart.

  
## bar_g.js
var margin = {top: 25, right: 80, bottom: 90, left: 80},
	width = 600 - margin.left - margin.right,
	height = 450 - margin.top - margin.bottom;

var y = d3.scale.linear()
	.range([height, 0]);

var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], 0.1);

var xg = d3.scale.ordinal()

var color = d3.scale.ordinal()
    .range(["#377eb8", "#4daf4a"]);

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

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

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

d3.csv("readme.csv", type, function(error, data) {
	var treatmentNames = d3.keys(data[0]).filter(function(key) { return key !== "Day" });

	data.forEach(function(d) {
		d.treatments = treatmentNames.map(function(name) { return {name: name, value: +d[name]}; });
	});

	x.domain(data.map(function(d) { return d.Day; }));
	y.domain([0, d3.max(data, function(d) {
			return d3.max(d.treatments, function(d) { return d.value; });
	})]);
	xg.domain(treatmentNames).rangeRoundBands([0, x.rangeBand()], 0.1);

	chart.append("g")
		.attr("class", "axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis)
		.append("text")
		.attr("class", "ax-title")
		.attr("x", width / 2)
		.attr("y", margin.bottom / 2)
		.text("Day");

	chart.append("g")
		.attr("class", "axis")
		.call(yAxis)
		.append("text")
		.attr("class", "ax-title")
		.attr("transform", "rotate(-90)")
		.attr("x", -height / 2)
		.attr("y", -margin.left / 2)
		.text("Count");

	var day = chart.selectAll(".day")
		.data(data)
		.enter().append("g")
		.attr("class", "day")
		.attr("transform", function(d) {
				return "translate(" + x(d.Day) + ",0)"
		});

	var bar = day.selectAll("rect")
		.data(function(d) { return d.treatments } )
		.enter().append("rect")
		.attr("class", "bar")
		.attr("height", function(d) { return height - y(d.value); })
		.attr("y", function(d) { return y(d.value); })
		.attr("width", xg.rangeBand())
		.attr("x", function(d) { return xg(d.name); })
		.attr("fill", function(d) { return color(d.name); });

	var legend = chart.selectAll(".legend")
		.data(treatmentNames.slice().reverse())
		.enter().append("g")
		.attr("class", "legend")
		.attr("transform", function(d, i) {
				return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
		.attr("x", width - 20)
		.attr("width", 18)
		.attr("height", 18)
		.style("fill", color);

	legend.append("text")
		.attr("x", width)
		.attr("y", 9)
		.attr("dy", ".35em")
		.attr("text-anchor", "start")
		.text(function(d) { return d; });
});

function type(d) {
	d.Cellulose = +d.Cellulose;
	d.Xylose = +d.Xylose;
	return d;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
		<style>
				.axis path,
				.axis line {
						fill: none;
						stroke: #000;
						shape-rendering: crispEdges;
				}

				.bar {
						-mos-transition: all 0.3s;
						-o-transition: all 0.3s;
						-webkit-transition: all 0.3s;
						transition: all 0.3s;
				}

				.bar:hover {
						fill: orange;
				}

				.axis {
						font: 16px sans-serif;
				}

				.ax-title {
						font: 24px sans-serif;
						text-anchor: middle;
				}

		</style>
<svg class="chart"></svg>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="bar_g.js"></script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	var margin = {top: 25, right: 80, bottom: 90, left: 80},
	width = 600 - margin.left - margin.right,
	height = 450 - margin.top - margin.bottom;

	var y = d3.scale.linear()
	.range([height, 0]);

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], 0.1);

	var xg = d3.scale.ordinal()

	var color = d3.scale.ordinal()
	.range(["#377eb8", "#4daf4a"]);

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

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

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

	d3.csv("readme.csv", type, function(error, data) {
	var treatmentNames = d3.keys(data[0]).filter(function(key) { return key !== "Day" });

	data.forEach(function(d) {
	d.treatments = treatmentNames.map(function(name) { return {name: name, value: +d[name]}; });
	});

	x.domain(data.map(function(d) { return d.Day; }));
	y.domain([0, d3.max(data, function(d) {
	return d3.max(d.treatments, function(d) { return d.value; });
	})]);
	xg.domain(treatmentNames).rangeRoundBands([0, x.rangeBand()], 0.1);

	chart.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "ax-title")
	.attr("x", width / 2)
	.attr("y", margin.bottom / 2)
	.text("Day");

	chart.append("g")
	.attr("class", "axis")
	.call(yAxis)
	.append("text")
	.attr("class", "ax-title")
	.attr("transform", "rotate(-90)")
	.attr("x", -height / 2)
	.attr("y", -margin.left / 2)
	.text("Count");

	var day = chart.selectAll(".day")
	.data(data)
	.enter().append("g")
	.attr("class", "day")
	.attr("transform", function(d) {
	return "translate(" + x(d.Day) + ",0)"
	});

	var bar = day.selectAll("rect")
	.data(function(d) { return d.treatments } )
	.enter().append("rect")
	.attr("class", "bar")
	.attr("height", function(d) { return height - y(d.value); })
	.attr("y", function(d) { return y(d.value); })
	.attr("width", xg.rangeBand())
	.attr("x", function(d) { return xg(d.name); })
	.attr("fill", function(d) { return color(d.name); });

	var legend = chart.selectAll(".legend")
	.data(treatmentNames.slice().reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) {
	return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 20)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", width)
	.attr("y", 9)
	.attr("dy", ".35em")
	.attr("text-anchor", "start")
	.text(function(d) { return d; });
	});

	function type(d) {
	d.Cellulose = +d.Cellulose;
	d.Xylose = +d.Xylose;
	return d;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<style>
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	-mos-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	}

	.bar:hover {
	fill: orange;
	}

	.axis {
	font: 16px sans-serif;
	}

	.ax-title {
	font: 24px sans-serif;
	text-anchor: middle;
	}

	</style>
	<svg class="chart"></svg>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="bar_g.js"></script>
	</body>
	</html>