Y4suyuki/D3rect_csv.html

## D3rect_csv.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="d3.v3/d3.v3.js"></script>
  <style>
  #tooltip {
    position: absolute;
    width: 200px;
    height: auto;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
  }

  #tooltip.hidden {
    display: none;
  }

  #tooltip p {
    margin: 0;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
  }
  </style>
</head>
<body>
  <div id="tooltip" class="hidden">
    <p><strong>Important Label Heading</strong></p>
    <p><span id="value">100</span>%</p>
  </div>
  <script>
  function draw(data) {
    "use strict";
    // badass visualization code goes here
    console.log(data);
    var w = 500;
    var h = 100;
    var barPadding = 1;
    var sortOrder = false;

    //Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    var d = []
    for (var i = 0; i < data.length; i++) {
      d.push(parseFloat(data[i]['30']));
    }
    data = d;
    console.log(d3.max(data));
    var xScale = d3.scale.ordinal()
                   .domain(d3.range(data.length))
                   .rangeRoundBands([0, w], 0.05);
    console.log(data)
    var yScale = d3.scale.linear()
                   .domain([0, d3.max(data)])
                   .range([0, h]);

// barchart rectangles
    console.log(data);
    svg.selectAll("rect")
                     .data(data)
                     .enter()
                     .append("rect")
                     .attr("x", function(d, i) {
                         return xScale(i);
                     })
                     .attr("y", function(d) {
                         return h - yScale(d);
                     })
                     .attr("width", xScale.rangeBand())
                     .attr("height", function(d) {
                         return yScale(i);
                     })
                     .attr("fill", function(d) {
                         return "rgba( 0, 0, 255, " + ( d / 100 * 1.3 + 0.1) +")";
                     })
                     .on("mouseover", function(d) {
                         d3.select(this).attr("fill", "orange");
                         var xPos = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
                         var yPos = parseFloat(d3.select(this).attr("y")) + 10 ;

                         //turn on tooltip
                         d3.select("#tooltip")
                           .style("left", xPos + 15 + "px")
                           .style("top", yPos + 20 + "px")
                           .select("#value")
                           .text(d);
                         d3.select("#tooltip").classed("hidden", false);
                     })
                     .on("mouseout", function(d){
                         d3.select(this)
                             .transition()
                             .duration(250)
                             .attr("fill", "rgba(0, 0, 255,"+( d / 100 * 1.3 + 0.1) +")");
                         //turn off tooltip
                         d3.select("#tooltip").classed("hidden", true);
                     })
                     .on("click", function() {
                         sortBars();
                     });

    var sortBars = function() {
        sortOrder = !sortOrder;
        svg.selectAll("rect")
           .sort(function(a, b) {
           if (sortOrder) {
                   return d3.ascending(a, b);
               } else {
                   return d3.descending(a, b);
               }
           })
           .transition()
           .duration(1000)
           .attr("x", function(d, i) {
                return xScale(i);
           });
    };

  }
  d3.csv("jgbcme_test.csv", draw);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="d3.v3/d3.v3.js"></script>
	<style>
	#tooltip {
	position: absolute;
	width: 200px;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip p {
	margin: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 20px;
	}
	</style>
	</head>
	<body>
	<div id="tooltip" class="hidden">
	<p><strong>Important Label Heading</strong></p>
	<p><span id="value">100</span>%</p>
	</div>
	<script>
	function draw(data) {
	"use strict";
	// badass visualization code goes here
	console.log(data);
	var w = 500;
	var h = 100;
	var barPadding = 1;
	var sortOrder = false;

	//Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var d = []
	for (var i = 0; i < data.length; i++) {
	d.push(parseFloat(data[i]['30']));
	}
	data = d;
	console.log(d3.max(data));
	var xScale = d3.scale.ordinal()
	.domain(d3.range(data.length))
	.rangeRoundBands([0, w], 0.05);
	console.log(data)
	var yScale = d3.scale.linear()
	.domain([0, d3.max(data)])
	.range([0, h]);

	// barchart rectangles
	console.log(data);
	svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return xScale(i);
	})
	.attr("y", function(d) {
	return h - yScale(d);
	})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) {
	return yScale(i);
	})
	.attr("fill", function(d) {
	return "rgba( 0, 0, 255, " + ( d / 100 * 1.3 + 0.1) +")";
	})
	.on("mouseover", function(d) {
	d3.select(this).attr("fill", "orange");
	var xPos = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
	var yPos = parseFloat(d3.select(this).attr("y")) + 10 ;

	//turn on tooltip
	d3.select("#tooltip")
	.style("left", xPos + 15 + "px")
	.style("top", yPos + 20 + "px")
	.select("#value")
	.text(d);
	d3.select("#tooltip").classed("hidden", false);
	})
	.on("mouseout", function(d){
	d3.select(this)
	.transition()
	.duration(250)
	.attr("fill", "rgba(0, 0, 255,"+( d / 100 * 1.3 + 0.1) +")");
	//turn off tooltip
	d3.select("#tooltip").classed("hidden", true);
	})
	.on("click", function() {
	sortBars();
	});

	var sortBars = function() {
	sortOrder = !sortOrder;
	svg.selectAll("rect")
	.sort(function(a, b) {
	if (sortOrder) {
	return d3.ascending(a, b);
	} else {
	return d3.descending(a, b);
	}
	})
	.transition()
	.duration(1000)
	.attr("x", function(d, i) {
	return xScale(i);
	});
	};

	}
	d3.csv("jgbcme_test.csv", draw);
	</script>
	</body>
	</html>