maelafifi/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from maelafifi's block: fresh block
forked from maelafifi's block: sfpdtheft

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<head>
	<style>
	.axis {
	  font: 10px sans-serif;
	}

  .text {
  fill: black;
  font-family: sans-serif
	}
	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
    stroke-width = 5;
	  shape-rendering: crispEdges;
	}
<svg width="960" height="500"></svg>
	</style>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<textarea></textarea>


<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 55, left: 75},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var y = d3.scale.ordinal().rangeRoundBands([height, 0], .25);

var x = d3.scale.linear().range([width, 0]);


var colors = d3.scale.category10();

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

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

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 + ")");

  d3.text("peter.txt", function(error, data) {

    if (error) throw error;
   	d3.select("body").select("textarea").text(data);
});

d3.csv("TRISF.csv", function(error, data) {
				data.forEach(function(d) {
        d.district = d.district;
        d.count = +d.count;
    });

  y.domain(data.map(function(d) { return d.district; }));
  x.domain([d3.max(data, function(d) { return d.count; }), 0]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
  		.append("text")
      .attr("dy", "4em")
  		.attr("dx", "32em")
      .attr("fill", "#000")
      .text("NUMBER OF THEFT RELATED INCIDENTS");
  ;

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
  		.append("text")
      .attr("dy", "-0.71em")
  		.attr("dx", "-5.5em")
      .attr("fill", "#000")
      .text("DISTRICT");

  svg.selectAll("bar")
      .data(data)
    	.enter()
    	.append("rect")
  		.attr("class","rect")
  		.attr("width", function(d) { return x(d.count); })
  		.attr("y", function(d) { return y(d.district); })
      .attr("height", y.rangeBand())
  		.style("fill", function(d) {
    if (d.count === 228)
      {
      	return "#ffe175";
    	}
    	else if (d.count === 261)
      {
      	return "#ffd642";
    	}
    	else if (d.count === 288)
      {
        return "#fed12d";
      }

        else if (d.count === 368)
      {
       return "#fed35c";
      }
        else if (d.count === 372)
      {
        return "#feb24c"
      }
        else if (d.count === 410)
      {
        return "#fd8d3c";
      }
        else if (d.count === 616)
      {
        return "#fc4e2a";
      }
        else if (d.count === 794)
      {
        return "#e31a1c"
      }
        else if (d.count === 909)
      {
        return "#bd0026";
      }
    return "#800026";})

  svg.append("text")
  .data(data)
      .attr("x",  width)
      .attr("y", height)
      .attr("dy", "-1.6em")
  		.attr("dx", "-60.5em")
      .attr("text-anchor", "middle")
      .attr("font-size", "14px")
      .attr("fill", "white")
      .text(function(d) { return d.count; });

});


</script>

</body>

## peter.txt
Mohamed Elafifi
This Bar Chart shows the number of theft related incidents mapped to the police district in San Francisco for the month of December, 2016. Theft related incidents includes:
Burglary, Larceny/Theft, Robbery, Stolen Property, and Vehicle Theft.

The lowest number of total theft related incidents in San Francisco for the aforementioned month was 228, in the Tenderloin district, and the highest number of incidents was in the Southern district, with a whopping 932 theft related incidents.

## style.css
textarea {
  /* position the textarea on top of the svg */
  position: fixed;
  top: 5px;
  right: 5px;

  margin: 0px;
  padding: 5px;

  width: 550px;
  height: 120px;

  /* try changing this color in blockbuilder! */
  background-color: rgba(255, 255, 255, 0.8);
}

## TRISF.csv

          
            district
            count

            
              SOUTHERN
              932

            
              NORTHERN
              909

            
              CENTRAL
              794

            
              MISSION
              616

            
              BAYVIEW
              410

            
              RICHMOND
              372

            
              TARAVAL
              368

            
              INGLESIDE
              288

            
              PARK
              261

            
              TENDERLOIN
              228
	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>
	<style>
	.axis {
	font: 10px sans-serif;
	}

	.text {
	fill: black;
	font-family: sans-serif
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	stroke-width = 5;
	shape-rendering: crispEdges;
	}
	<svg width="960" height="500"></svg>
	</style>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<textarea></textarea>


	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	var margin = {top: 20, right: 20, bottom: 55, left: 75},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var y = d3.scale.ordinal().rangeRoundBands([height, 0], .25);

	var x = d3.scale.linear().range([width, 0]);


	var colors = d3.scale.category10();

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

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

	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 + ")");

	d3.text("peter.txt", function(error, data) {

	if (error) throw error;
	d3.select("body").select("textarea").text(data);
	});

	d3.csv("TRISF.csv", function(error, data) {
	data.forEach(function(d) {
	d.district = d.district;
	d.count = +d.count;
	});

	y.domain(data.map(function(d) { return d.district; }));
	x.domain([d3.max(data, function(d) { return d.count; }), 0]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("dy", "4em")
	.attr("dx", "32em")
	.attr("fill", "#000")
	.text("NUMBER OF THEFT RELATED INCIDENTS");
	;

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("dy", "-0.71em")
	.attr("dx", "-5.5em")
	.attr("fill", "#000")
	.text("DISTRICT");

	svg.selectAll("bar")
	.data(data)
	.enter()
	.append("rect")
	.attr("class","rect")
	.attr("width", function(d) { return x(d.count); })
	.attr("y", function(d) { return y(d.district); })
	.attr("height", y.rangeBand())
	.style("fill", function(d) {
	if (d.count === 228)
	{
	return "#ffe175";
	}
	else if (d.count === 261)
	{
	return "#ffd642";
	}
	else if (d.count === 288)
	{
	return "#fed12d";
	}

	else if (d.count === 368)
	{
	return "#fed35c";
	}
	else if (d.count === 372)
	{
	return "#feb24c"
	}
	else if (d.count === 410)
	{
	return "#fd8d3c";
	}
	else if (d.count === 616)
	{
	return "#fc4e2a";
	}
	else if (d.count === 794)
	{
	return "#e31a1c"
	}
	else if (d.count === 909)
	{
	return "#bd0026";
	}
	return "#800026";})

	svg.append("text")
	.data(data)
	.attr("x", width)
	.attr("y", height)
	.attr("dy", "-1.6em")
	.attr("dx", "-60.5em")
	.attr("text-anchor", "middle")
	.attr("font-size", "14px")
	.attr("fill", "white")
	.text(function(d) { return d.count; });

	});




	</script>

	</body>
	Mohamed Elafifi
	This Bar Chart shows the number of theft related incidents mapped to the police district in San Francisco for the month of December, 2016. Theft related incidents includes:
	Burglary, Larceny/Theft, Robbery, Stolen Property, and Vehicle Theft.

	The lowest number of total theft related incidents in San Francisco for the aforementioned month was 228, in the Tenderloin district, and the highest number of incidents was in the Southern district, with a whopping 932 theft related incidents.
	textarea {
	/* position the textarea on top of the svg */
	position: fixed;
	top: 5px;
	right: 5px;

	margin: 0px;
	padding: 5px;

	width: 550px;
	height: 120px;

	/* try changing this color in blockbuilder! */
	background-color: rgba(255, 255, 255, 0.8);
	}
	district	count
	SOUTHERN	932
	NORTHERN	909
	CENTRAL	794
	MISSION	616
	BAYVIEW	410
	RICHMOND	372
	TARAVAL	368
	INGLESIDE	288
	PARK	261
	TENDERLOIN	228