D3 Examples - ChicagoCrimeStarter

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<!-- load d3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
​
/*Add styling here */
​
svg {
  border: 1px solid #f0f;
}
  
/* .bar {
  fill: red
} */
​
</style>
​
<body>
<!--  Add title here  -->
  <div id=titleDiv> 
    <h1>Crime in Chicago in 2018</h1>
  </div>
  
</body>
​
<script>
​
​
​
​
// 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);
​
  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 = 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: 45};
​
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 and yScale here:
  
    var yScale = d3.scaleLinear()
//     .domain([0, d3.max(data2018, function(d) { return d.count; })])
    .domain([0, 70000])
    .range([height, 0]);
  
  // Define xAxis and yAxis generators here:  
    var xScale = d3.scaleBand()
    .domain(data2018.map(function(d) { return d.violation; }))
    .padding([.1])
    .rangeRound([0, width]);
  
  // Append axes here: 
  var xAxis = d3.axisBottom(xScale);
  
  var xAxisGroup = svg.append("g")
    .attr("class","x axis") //assigning classes `x` and `axis`
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);
  
    xAxisGroup
    .selectAll('text')
    .attr('transform', 'rotate(45) translate(7, -8)')
    .attr('text-anchor', 'start')
  
  var yAxis = d3.axisLeft(yScale)
     .tickFormat(d3.format(`.2s`));;
  
  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) {
      console.log(d3.select(this))
      
      d3.select(this)
        .transition()
        .duration(500)
        .attr('fill', 'yellow')
      
      var xPosition = parseFloat(d3.select(this).attr('x')) + xScale.bandwidth() / 2;
    
      var yPosition = parseFloat(d3.select(this).attr("y")) - 5;
    
      svg.append("text") //add text
           .attr("id", "countLabel") //give it the id 'countLabel'
           .attr("x", xPosition) //assign x position - calculated above
           .attr("y", yPosition) //assign y position - calculated above
           .attr("text-anchor", "middle") //set text anchor to the middle, so that the text shows up in center of bar
           .attr("font-family", "sans-serif") //add some styling (this can also be done in css section)
           .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>
​
    