Built with blockbuilder.org
forked from molliemarie's block: CrimeInChicago_BarPlot_Complete
Created
February 21, 2020 20:04
-
-
Save lauriemerrell/6ad353f240e0c2ec7075da39b9015f28 to your computer and use it in GitHub Desktop.
CrimeInChicago_BarPlot_Complete
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style type="text/css"> | |
| /*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> | |
| <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(' '); | |
| } | |
| // 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment