molliemarie/.block

## .block
license: gpl-3.0
height: 600
border: no

## README.md

      
    Raw
  

              README.md
            
          
    A bar graph showing the prevalence of different crimes in Chicago in 2016

  
## crime_count_by_year_2016.csv

          
            violation
            year
            count

            
              arson
              2016
              521

            
              assault
              2016
              18704

            
              batter
              2016
              50239

            
              burglary
              2016
              14229

            
              concealed carry license violation
              2016
              37

            
              crim sexual assault
              2016
              1435

            
              criminial damage
              2016
              30965

            
              criminal trespass
              2016
              6304

            
              deceptive practice
              2016
              17130

            
              gambling
              2016
              189

            
              homicide
              2016
              772

            
              human trafficking
              2016
              11

            
              interference with public officer
              2016
              933

            
              intimidation
              2016
              126

            
              kidnapping
              2016
              203

            
              liquor law violation
              2016
              225

            
              motor vehicle theft
              2016
              11373

            
              narcotics
              2016
              12324

            
              non-criminal
              2016
              55

            
              obsenity
              2016
              53

            
              offense invovling children
              2016
              2250

            
              other narcotic violation
              2016
              4

            
              other offense
              2016
              16999

            
              prostitution
              2016
              799

            
              public indecensy
              2016
              10

            
              public peace violation
              2016
              1601

            
              robbery
              2016
              11961

            
              sex offense
              2016
              895

            
              stalking
              2016
              164

            
              theft
              2016
              61081

            
              weapons violation
              2016
              3428

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chicago Crime Data</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style type="text/css">

</style>
<svg width="800" height="700"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 30, right: 20, bottom: 230, left: 60},
    w = +svg.attr("width") - margin.left - margin.right,
    h = +svg.attr("height") - margin.top - margin.bottom;

var xScale = d3.scaleBand().rangeRound([0, w]).padding(0.1),
    yScale = d3.scaleLinear().rangeRound([h, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("crime_count_by_year_2016.csv", function(d) {
  d.count = +d.count;
  return d;
}, function(error, dataset) {
  if (error) throw error;

  // set domains for x and y scales
  xScale.domain(dataset.map(function(d) { return d.violation; }));
  yScale.domain([0, d3.max(dataset, function(d) { return d.count; })]);

  // add chart title
  g.append("text")
        .attr("x", (w / 2))
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .attr("font-weight", "bold")
        .style("font-size", "16px")
        .text("Crime in Chicago - 2016");

  // x axis
  g.append("g")
      .attr("class", "axis x-axis")
      .attr("transform", "translate(0," + h + ")")
      .call(d3.axisBottom(xScale));

  // y axis
  g.append("g")
      .attr("class", "axis y-axis")
      .call(d3.axisLeft(yScale))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("text-anchor", "end");

  // create bars
  g.selectAll(".bar")
    .data(dataset)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return xScale(d.violation); })
      .attr("y", function(d) { return yScale(d.count); })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return h - yScale(d.count); })
      .attr("fill", "FireBrick")

      // On mouseover add a different fill as well as labels
      .on("mouseover", function(d) {
        d3.select(this)
          .attr("fill", "red");

          //Get this bar's x/y values, then augment for the tooltip
          var xPosition = parseFloat(d3.select(this).attr('x')) + xScale.bandwidth() / 2;
          var yPosition = parseFloat(d3.select(this).attr("y")) - 5;

          //Create the tooltip label
          g.append("text")
             // .data(dataset)
             .attr("id", "tooltip")
             .attr("x", xPosition)
             .attr("y", yPosition)
             .attr("text-anchor", "middle")
             .attr("font-family", "sans-serif")
             .attr("font-size", "11px")
             .attr("font-weight", "bold")
             .attr("fill", "black")
             .text(d.count);
      })

      // set back to normal when no longer mousing over bar
      .on("mouseout", function(d) {
        d3.select("#tooltip").remove();
        d3.select(this)
        .transition()
        .duration(250)
          .attr("fill", "FireBrick");
      });

  // rotate  x-axis text for readability
  d3.selectAll(".x-axis .tick text")
    .attr("transform", "rotate(60) translate(8, -10)")
    .attr("font-family", "sans-serif")
    .style("text-anchor", "start");

});

</script>

<!-- Things that could be added:
- when hover over bar, text gets bold
- can add or delete bars if you only want to look at specific ones
- add in data for various years and give the ability to trasition between various years
- other option - add in New York data and give ability to transition between New York and Chicago data
 -->
violation	year	count
arson	2016	521
assault	2016	18704
batter	2016	50239
burglary	2016	14229
concealed carry license violation	2016	37
crim sexual assault	2016	1435
criminial damage	2016	30965
criminal trespass	2016	6304
deceptive practice	2016	17130
gambling	2016	189
homicide	2016	772
human trafficking	2016	11
interference with public officer	2016	933
intimidation	2016	126
kidnapping	2016	203
liquor law violation	2016	225
motor vehicle theft	2016	11373
narcotics	2016	12324
non-criminal	2016	55
obsenity	2016	53
offense invovling children	2016	2250
other narcotic violation	2016	4
other offense	2016	16999
prostitution	2016	799
public indecensy	2016	10
public peace violation	2016	1601
robbery	2016	11961
sex offense	2016	895
stalking	2016	164
theft	2016	61081
weapons violation	2016	3428
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Chicago Crime Data</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">

	</style>
	<svg width="800" height="700"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	margin = {top: 30, right: 20, bottom: 230, left: 60},
	w = +svg.attr("width") - margin.left - margin.right,
	h = +svg.attr("height") - margin.top - margin.bottom;

	var xScale = d3.scaleBand().rangeRound([0, w]).padding(0.1),
	yScale = d3.scaleLinear().rangeRound([h, 0]);

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("crime_count_by_year_2016.csv", function(d) {
	d.count = +d.count;
	return d;
	}, function(error, dataset) {
	if (error) throw error;

	// set domains for x and y scales
	xScale.domain(dataset.map(function(d) { return d.violation; }));
	yScale.domain([0, d3.max(dataset, function(d) { return d.count; })]);

	// add chart title
	g.append("text")
	.attr("x", (w / 2))
	.attr("y", 0 - (margin.top / 2))
	.attr("text-anchor", "middle")
	.attr("font-family", "sans-serif")
	.attr("font-weight", "bold")
	.style("font-size", "16px")
	.text("Crime in Chicago - 2016");

	// x axis
	g.append("g")
	.attr("class", "axis x-axis")
	.attr("transform", "translate(0," + h + ")")
	.call(d3.axisBottom(xScale));

	// y axis
	g.append("g")
	.attr("class", "axis y-axis")
	.call(d3.axisLeft(yScale))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("text-anchor", "end");

	// create bars
	g.selectAll(".bar")
	.data(dataset)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return xScale(d.violation); })
	.attr("y", function(d) { return yScale(d.count); })
	.attr("width", xScale.bandwidth())
	.attr("height", function(d) { return h - yScale(d.count); })
	.attr("fill", "FireBrick")

	// On mouseover add a different fill as well as labels
	.on("mouseover", function(d) {
	d3.select(this)
	.attr("fill", "red");

	//Get this bar's x/y values, then augment for the tooltip
	var xPosition = parseFloat(d3.select(this).attr('x')) + xScale.bandwidth() / 2;
	var yPosition = parseFloat(d3.select(this).attr("y")) - 5;

	//Create the tooltip label
	g.append("text")
	// .data(dataset)
	.attr("id", "tooltip")
	.attr("x", xPosition)
	.attr("y", yPosition)
	.attr("text-anchor", "middle")
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("font-weight", "bold")
	.attr("fill", "black")
	.text(d.count);
	})

	// set back to normal when no longer mousing over bar
	.on("mouseout", function(d) {
	d3.select("#tooltip").remove();
	d3.select(this)
	.transition()
	.duration(250)
	.attr("fill", "FireBrick");
	});

	// rotate x-axis text for readability
	d3.selectAll(".x-axis .tick text")
	.attr("transform", "rotate(60) translate(8, -10)")
	.attr("font-family", "sans-serif")
	.style("text-anchor", "start");

	});

	</script>

	<!-- Things that could be added:
	- when hover over bar, text gets bold
	- can add or delete bars if you only want to look at specific ones
	- add in data for various years and give the ability to trasition between various years
	- other option - add in New York data and give ability to transition between New York and Chicago data
	-->