D3 Examples - ChicagoCrimeFinished

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
​
​
/*Add styling here */
​
/* svg {
  border: 1px solid #f0f;
} */
  
.axis text {
  text-transform: capitalize;   
}
​
</style>
​
<body>
  <!--  Add title here  -->
  <div id=#titleDiv> 
    <h1>Crime in Chicago in 2018</h1>
  </div>
</body>
​
<script>
​
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(' '); 
}
  
​
​
// Reading in data here, then calling "ready" function:
d3.csv("ChiCrime.csv", ready)
​
// Ready Function
function ready(error, data) {
​
  if (error) return console.warn(error);
​
​
  // format data
  data.forEach(function(d) {
    d.count = +d.count; //making sure count reads as a number
    d.year = +d.year; //making sure year reads in as a number
    d.violation = titleCase(d['Primary Type']); //changing to an easier to use variable name
  });
​
  // filtering for 2018 data
  var data2018 = data.filter(function(d) { return d.year == 2018})
​
  //Define Margins and svg here:
  
  var margin = {top: 20, right: 50, bottom: 160, left: 40};
​
  var width = 720 - margin.left - margin.right,
      height = 400 - 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 + ")");
  
​
  //Define xScale, yScale, here:
​
  var xScale = d3.scaleBand()
    .domain(data2018.map(function(d) { return d.violation; }))
    .padding([.1])
    .rangeRound([0, width]);
​
  var yScale = d3.scaleLinear()
    .domain([0, d3.max(data2018, function(d) { return d.count; })])
    .range([height, 0]);
  
  // Define xAxis and yAxis generators here  
​
  var xAxis = d3.axisBottom(xScale);
​
  var yAxis = d3.axisLeft(yScale)
    .tickFormat(d3.format(`.2s`));
  
  
  // append axes here:  
  var xAxisGroup = svg.append("g")
    .attr("class","x axis")
    .attr("transform","translate(0," + height + ")")
    .call(xAxis);
  
  xAxisGroup
    .selectAll('text')
    .attr('transform', 'rotate(45)')
    .style('text-anchor', 'start');
​
  var yAxisGroup = svg.append("g")
    .attr("class","y axis")
    .call(yAxis);
​
​
  // Create bars here:
​
  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); })
    .attr("fill", "red")
    .on("mouseenter", function(d) {
    
        d3.select(this)
            .transition()
            .duration(500)
          .attr("fill", "yellow");
    
        //Get this bar's x/y values, then augment for the label
        var xPosition = parseFloat(d3.select(this).attr('x')) + xScale.bandwidth() / 2;
        var yPosition = parseFloat(d3.select(this).attr("y")) - 5;
​
        //Create the label
        svg.append("text")
           .attr("id", "countLabel")
           .attr("x", xPosition)
           .attr("y", yPosition)
           .attr("text-anchor", "middle")
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("font-weight", "bold")
           .text(d.count);
    
  })
  .on("mouseleave", function(d) {
        d3.select("#countLabel").remove();
        d3.select(this)
        .transition()
        .duration(500)
        .attr("fill", "red");
    });
  
 }
​
​
</script>
​
    