lauriemerrell/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from molliemarie's block: CrimeInChicago_BarPlot_Complete

  
## index.html
<!DOCTYPE html>


<meta charset="utf-8">


<script src="https://d3js.org/d3.v5.min.js"></script>

<style>

/*Add styling here */

text {
  font-size: 12px;
  font-family: "Helvetica", Neue, sans-serif;
  fill: #808080;
}

rect {
  fill: brown;
}


</style>

<body>

</body>

<script>

  /* sources:

spaces in csv field titles: https://stackoverflow.com/questions/21715201/unable-to-reference-d3-js-data-imported-from-a-csv-file-with-spaces-in-the-heade

sorting data:
https://stackoverflow.com/questions/46205118/how-to-sort-a-d3-bar-chart-based-on-an-array-of-objects-by-value-or-key

axis labels:
https://stackoverflow.com/questions/11189284/d3-axis-labeling

*/

// margins and svg
var margin = {top: 30, right: 110, bottom: 60, left: 125};

var width = 600 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;

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


// xscale, yscale, xaxis, and yaxis
var yScale = d3.scaleBand()
  .padding([.1])
  .rangeRound([0, height]);

var xScale = d3.scaleLinear()
  .range([0, width]);

var yAxis = d3.axisLeft(yScale);

var xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.format(`.2s`));

// Reading in data here, then calling "ready" function:
d3.csv("https://raw.githubusercontent.com/myt00seven/msia-data-vis-data/master/AnonymousStudentNameHeightEye.csv", function(d) {
  return {
    d_color: d['Eye Color'],
    d_height: +d.Height,
    d_name: d.Name
  }
}).then(ready);

// Ready Function
function ready(data) {

  //sort data by name
  data.sort(function(a, b) {return d3.ascending(a.d_name, b.d_name)})

  // assigning domain to scales
  xScale.domain([0, d3.max(data, function(d) { return d.d_height; })]);

  yScale.domain(data.map(function(d) { return d.d_name; }));

  // defining and formatting axis groups

  var xAxisGroup = svg.append("g")
    .attr("class","y axis")
    .call(xAxis)
  	.attr("transform","translate(0," + height + ")");


  var yAxisGroup = svg.append("g")
    .attr("class","y axis")
    .call(yAxis);


  // creating rectangles
  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", 0)
    .attr("y", function(d) { return yScale(d.d_name); })
    .attr("height", yScale.bandwidth())
    .attr("width", function(d) { return xScale(d.d_height); })
    .style("fill", function(d) {return d.d_color; });


  // Handmade legend

 	//legend title
  svg.append("text")
    .attr("x", 372)
    .attr("y", 10)
    .text("Eye color")
    .style("font-size", "13px")
    .attr("alignment-baseline","middle")
  	.attr("class","legend")

  //color coded circles
  svg.append("circle")
    .attr("cx",375)
    .attr("cy",25)
    .attr("r", 6)
    .style("fill", "brown")


  svg.append("circle")
    .attr("cx",375)
    .attr("cy",40)
    .attr("r", 6)
    .style("fill", "blue")

  svg.append("circle")
    .attr("cx",375)
    .attr("cy",55)
    .attr("r", 6)
    .style("fill", "black")

  //text labels

  svg.append("text")
    .attr("x", 383)
    .attr("y", 25)
    .text("Brown")
    .attr("alignment-baseline","middle")
    .attr("class", "legend")

  svg.append("text")
    .attr("x", 383)
    .attr("y", 40)
    .text("Blue")
    .attr("alignment-baseline","middle")
    .attr("class", "legend")

  svg.append("text")
    .attr("x", 383)
    .attr("y", 55)
    .text("Black")
    .attr("alignment-baseline","middle")
    .attr("class", "legend")


  	//axis labels

	svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "middle")
    .attr("x", -height/2)
    .attr("y", -115)
  	.attr("transform", "rotate(-90)")
    .text("Student Name");

  	svg.append("text")
    .attr("class", "7 label")
    .attr("text-anchor", "middle")
    .attr("x",width/2)
    .attr("y",height + 30)
    .text("Height (cm)");

  //chart title

	svg.append("text")
  	.style("fill", "black")
 		.style("font-size", "16px")
    .attr("class", "x label")
    .attr("text-anchor", "middle")
    .attr("x", width/2)
    .attr("y", -10)
    .text("MSiA Student Height and Eye Color, Sorted Alphabetically");

 }


</script>
	<!DOCTYPE html>



	<meta charset="utf-8">



	<script src="https://d3js.org/d3.v5.min.js"></script>

	<style>

	/Add styling here /

	text {
	font-size: 12px;
	font-family: "Helvetica", Neue, sans-serif;
	fill: #808080;
	}

	rect {
	fill: brown;
	}


	</style>

	<body>

	</body>

	<script>

	/* sources:

	spaces in csv field titles: https://stackoverflow.com/questions/21715201/unable-to-reference-d3-js-data-imported-from-a-csv-file-with-spaces-in-the-heade

	sorting data:
	https://stackoverflow.com/questions/46205118/how-to-sort-a-d3-bar-chart-based-on-an-array-of-objects-by-value-or-key

	axis labels:
	https://stackoverflow.com/questions/11189284/d3-axis-labeling

	*/

	// margins and svg
	var margin = {top: 30, right: 110, bottom: 60, left: 125};

	var width = 600 - margin.left - margin.right;
	var height = 800 - margin.top - margin.bottom;

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


	// xscale, yscale, xaxis, and yaxis
	var yScale = d3.scaleBand()
	.padding([.1])
	.rangeRound([0, height]);

	var xScale = d3.scaleLinear()
	.range([0, width]);

	var yAxis = d3.axisLeft(yScale);

	var xAxis = d3.axisBottom(xScale)
	.tickFormat(d3.format(`.2s`));

	// Reading in data here, then calling "ready" function:
	d3.csv("https://raw.githubusercontent.com/myt00seven/msia-data-vis-data/master/AnonymousStudentNameHeightEye.csv", function(d) {
	return {
	d_color: d['Eye Color'],
	d_height: +d.Height,
	d_name: d.Name
	}
	}).then(ready);

	// Ready Function
	function ready(data) {

	//sort data by name
	data.sort(function(a, b) {return d3.ascending(a.d_name, b.d_name)})

	// assigning domain to scales
	xScale.domain([0, d3.max(data, function(d) { return d.d_height; })]);

	yScale.domain(data.map(function(d) { return d.d_name; }));

	// defining and formatting axis groups

	var xAxisGroup = svg.append("g")
	.attr("class","y axis")
	.call(xAxis)
	.attr("transform","translate(0," + height + ")");


	var yAxisGroup = svg.append("g")
	.attr("class","y axis")
	.call(yAxis);



	// creating rectangles
	svg.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", 0)
	.attr("y", function(d) { return yScale(d.d_name); })
	.attr("height", yScale.bandwidth())
	.attr("width", function(d) { return xScale(d.d_height); })
	.style("fill", function(d) {return d.d_color; });


	// Handmade legend

	//legend title
	svg.append("text")
	.attr("x", 372)
	.attr("y", 10)
	.text("Eye color")
	.style("font-size", "13px")
	.attr("alignment-baseline","middle")
	.attr("class","legend")

	//color coded circles
	svg.append("circle")
	.attr("cx",375)
	.attr("cy",25)
	.attr("r", 6)
	.style("fill", "brown")


	svg.append("circle")
	.attr("cx",375)
	.attr("cy",40)
	.attr("r", 6)
	.style("fill", "blue")

	svg.append("circle")
	.attr("cx",375)
	.attr("cy",55)
	.attr("r", 6)
	.style("fill", "black")

	//text labels

	svg.append("text")
	.attr("x", 383)
	.attr("y", 25)
	.text("Brown")
	.attr("alignment-baseline","middle")
	.attr("class", "legend")

	svg.append("text")
	.attr("x", 383)
	.attr("y", 40)
	.text("Blue")
	.attr("alignment-baseline","middle")
	.attr("class", "legend")

	svg.append("text")
	.attr("x", 383)
	.attr("y", 55)
	.text("Black")
	.attr("alignment-baseline","middle")
	.attr("class", "legend")


	//axis labels

	svg.append("text")
	.attr("class", "x label")
	.attr("text-anchor", "middle")
	.attr("x", -height/2)
	.attr("y", -115)
	.attr("transform", "rotate(-90)")
	.text("Student Name");

	svg.append("text")
	.attr("class", "7 label")
	.attr("text-anchor", "middle")
	.attr("x",width/2)
	.attr("y",height + 30)
	.text("Height (cm)");

	//chart title

	svg.append("text")
	.style("fill", "black")
	.style("font-size", "16px")
	.attr("class", "x label")
	.attr("text-anchor", "middle")
	.attr("x", width/2)
	.attr("y", -10)
	.text("MSiA Student Height and Eye Color, Sorted Alphabetically");

	}


	</script>