A bar graph showing the prevalence of different crimes in Chicago in 2016
xxxxxxxxxx<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 --> https://d3js.org/d3.v4.min.js
https://d3js.org/d3.v4.min.js