CrimeInChicago_BarPlot_Complete

Built with blockbuilder.org

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

/*Add styling here */

.axis text {
  font-size: 12px;
  font-family: "Times New Roman", Times, serif;
  fill: #777;
}

</style>

<body>
  <div id=#titleDiv> 
    <h1>Crime in Chicago in 2018</h1>
  </div>
  
</body>

function titleCase(str) {
  // lowercases each word, only capitalizing the first letter of each word
   var splitStr = str.toLowerCase().split(' ');
   for (var i = 0; i < splitStr.length; i++) {
       // You do not need to check if i is larger than splitStr length, as your for does that for you
       // Assign it back to the array
       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
   }
   // Directly return the joined string
   return splitStr.join(' '); 
}

// margins and svg
var margin = {top: 20, right: 50, bottom: 130, left: 40};

var width = 960 - margin.left - margin.right;
var height = 500 - 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 xScale = d3.scaleBand()
  .padding([.1])
  .rangeRound([0, width]);

var yScale = d3.scaleLinear()
  .range([height, 0]);

var xAxis = d3.axisBottom(xScale);

var yAxis = d3.axisLeft(yScale)
  .tickFormat(d3.format(`.2s`));

// Reading in data here, then calling "ready" function:
d3.csv("https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteBar/data/ChiCrime.csv", function(d) {
  return {
    count: +d.count,
    year: +d.year,
    violation: titleCase(d['Primary Type'])
  }
}).then(ready);

// Ready Function
function ready(data) {

var data2018 = data.filter(function(d) { return d.year == 2018})

// assigning domain to scales
  yScale.domain([0, d3.max(data2018, function(d) { return d.count; })]);
  xScale.domain(data2018.map(function(d) { return d.violation; }));

// defining and formatting axis groups
  var xAxisGroup = svg.append("g")
    .attr("class","x axis")
    .attr("transform","translate(0," + height + ")")
    .call(xAxis);

xAxisGroup
    .selectAll('text')
    .attr('transform', 'rotate(45) translate(7, -8)')
    .style('text-anchor', 'start');

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

// creating rectangles
  svg.selectAll(".bar")
    .data(data2018)
    .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 height - yScale(d.count); })
    .style("fill", "red")

}

</script>

https://d3js.org/d3.v5.min.js