Varsha-Ravi/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <!-- for color scales -->
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

    .chart rect {
      //fill: steelblue;
    }

    .chart text {
      fill: black;
      font: 10px sans-serif;
    }

    .axis {font: 14px calibri;}
  	.label {font: 10px calibri;}
  </style>
</head>

<body>
  <div>
    <svg class="chart" width="960" height="525"></svg>
  </div>
  <script>
    var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);

    //Adding margins, outer size subtract margins = inner size available for graph
    var svg = d3.select(".chart"),
        margin = {top:20, right:30, bottom:50, left:40},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;

    //scaleBand are like ordinal scales except the output range is continuous and numeric.
    var x = d3.scaleBand()
    	.range([0, width], .1);

    //scaleLinear serve to encode quantitative data
    var y = d3.scaleLinear()
    	.rangeRound([height, 0]); //Moving x-axis to bottom

    var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y).ticks(10,"#");

    var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right) //Set width back to original value
    .attr("height", height + margin.top + margin.bottom) //Set height back to original value
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Adds margin to the left and top?

    d3.csv("AidData.csv", function(d){
      //Convert purpose_code_frequency from text to integer
      d.purpose_code_frequency = +d.purpose_code_frequency;
      return d;
    },function(error, data) {
      if (error) throw error;

      //Constructing domain for categorical data range on x-axis
      x.domain(data.map(function(d){return d.coalesced_purpose_code;}));

      //Constructing domain for quantitative data range on y-axis
      y.domain([0, d3.max(data, function(d) { return d.purpose_code_frequency; })]);

      var barWidth = width / data.length;

      var bar = chart.selectAll("g")
      	.data(data)
    		.enter()
  			.append("g")
      	.attr("transform", function(d) { //Moving x-axis to bottom
          return "translate(" + x(d.purpose_code_frequency) + ",0)"; });

      bar.append("rect")
  			.attr("x", function(d) {//Retrieve the range for the x-axis domain
        	return x(d.coalesced_purpose_code);})
  			.attr("y", function(d) {//Retrieve the range for the y-axis domain
        	return y(d.purpose_code_frequency);})
  			.attr("height", function(d){return height - y(d.purpose_code_frequency);})
        .attr("width", x.bandwidth()*.8) //Returns width of each band
      	.attr("fill", function(d){return colorScale2(y(d.purpose_code_frequency));});

      chart.append("g")
      	.attr("class", "x axis")
      	.attr("transform", "translate(0,"+height+")")
      	.call(xAxis)
      	.selectAll("text")
      	.attr("y", 0)
      	.attr("x", 8)
      	.attr("dy", "0.35em")
      	.attr("transform", "rotate(90)") //Rotate tick labels
      	.style("text-anchor", "start");

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

      chart.append("text")
      	.attr("class", "label")
      	.attr("x", -28)
      	.attr("y", -4)
      	.style("fill", "black")
      	.text("Frequency");

      chart.append("text")
      	.attr("class", "label")
      	.attr("x", width/2)
    		.attr("y", height+(margin.bottom*.9))
      	.style("fill", "black")
      	.text("Purpose Code");
});


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <!-- for color scales -->
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	.chart rect {
	//fill: steelblue;
	}

	.chart text {
	fill: black;
	font: 10px sans-serif;
	}

	.axis {font: 14px calibri;}
	.label {font: 10px calibri;}
	</style>
	</head>

	<body>
	<div>
	<svg class="chart" width="960" height="525"></svg>
	</div>
	<script>
	var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);

	//Adding margins, outer size subtract margins = inner size available for graph
	var svg = d3.select(".chart"),
	margin = {top:20, right:30, bottom:50, left:40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom;

	//scaleBand are like ordinal scales except the output range is continuous and numeric.
	var x = d3.scaleBand()
	.range([0, width], .1);

	//scaleLinear serve to encode quantitative data
	var y = d3.scaleLinear()
	.rangeRound([height, 0]); //Moving x-axis to bottom

	var colorScale2 = d3.scaleSequential(d3.interpolateOranges).domain([height, 0]);

	var xAxis = d3.axisBottom(x);

	var yAxis = d3.axisLeft(y).ticks(10,"#");

	var chart = d3.select(".chart")
	.attr("width", width + margin.left + margin.right) //Set width back to original value
	.attr("height", height + margin.top + margin.bottom) //Set height back to original value
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Adds margin to the left and top?

	d3.csv("AidData.csv", function(d){
	//Convert purpose_code_frequency from text to integer
	d.purpose_code_frequency = +d.purpose_code_frequency;
	return d;
	},function(error, data) {
	if (error) throw error;

	//Constructing domain for categorical data range on x-axis
	x.domain(data.map(function(d){return d.coalesced_purpose_code;}));

	//Constructing domain for quantitative data range on y-axis
	y.domain([0, d3.max(data, function(d) { return d.purpose_code_frequency; })]);

	var barWidth = width / data.length;

	var bar = chart.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("transform", function(d) { //Moving x-axis to bottom
	return "translate(" + x(d.purpose_code_frequency) + ",0)"; });

	bar.append("rect")
	.attr("x", function(d) {//Retrieve the range for the x-axis domain
	return x(d.coalesced_purpose_code);})
	.attr("y", function(d) {//Retrieve the range for the y-axis domain
	return y(d.purpose_code_frequency);})
	.attr("height", function(d){return height - y(d.purpose_code_frequency);})
	.attr("width", x.bandwidth()*.8) //Returns width of each band
	.attr("fill", function(d){return colorScale2(y(d.purpose_code_frequency));});

	chart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0,"+height+")")
	.call(xAxis)
	.selectAll("text")
	.attr("y", 0)
	.attr("x", 8)
	.attr("dy", "0.35em")
	.attr("transform", "rotate(90)") //Rotate tick labels
	.style("text-anchor", "start");

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

	chart.append("text")
	.attr("class", "label")
	.attr("x", -28)
	.attr("y", -4)
	.style("fill", "black")
	.text("Frequency");

	chart.append("text")
	.attr("class", "label")
	.attr("x", width/2)
	.attr("y", height+(margin.bottom*.9))
	.style("fill", "black")
	.text("Purpose Code");
	});


	</script>
	</body>