Built with blockbuilder.org
forked from molliemarie's block: CrimeInChicago_BarPlot_Complete
Last active
February 23, 2020 22:10
-
-
Save lauriemerrell/9713f0df59517f9b07955ce3db0495a4 to your computer and use it in GitHub Desktop.
EyeHeightChart
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> | |
| /*Add styling here */ | |
| text { | |
| font-size: 12px; | |
| font-family: "Helvetica", Neue, sans-serif; | |
| fill: #808080; | |
| } | |
| rect { | |
| fill: brown; | |
| } | |
| </style> | |
| <body> | |
| </body> | |
| <script> | |
| /* sources: | |
| spaces in csv field titles: https://stackoverflow.com/questions/21715201/unable-to-reference-d3-js-data-imported-from-a-csv-file-with-spaces-in-the-heade | |
| sorting data: | |
| https://stackoverflow.com/questions/46205118/how-to-sort-a-d3-bar-chart-based-on-an-array-of-objects-by-value-or-key | |
| axis labels: | |
| https://stackoverflow.com/questions/11189284/d3-axis-labeling | |
| */ | |
| // margins and svg | |
| var margin = {top: 30, right: 110, bottom: 60, left: 125}; | |
| var width = 600 - margin.left - margin.right; | |
| var height = 800 - 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 yScale = d3.scaleBand() | |
| .padding([.1]) | |
| .rangeRound([0, height]); | |
| var xScale = d3.scaleLinear() | |
| .range([0, width]); | |
| var yAxis = d3.axisLeft(yScale); | |
| var xAxis = d3.axisBottom(xScale) | |
| .tickFormat(d3.format(`.2s`)); | |
| // Reading in data here, then calling "ready" function: | |
| d3.csv("https://raw.githubusercontent.com/myt00seven/msia-data-vis-data/master/AnonymousStudentNameHeightEye.csv", function(d) { | |
| return { | |
| d_color: d['Eye Color'], | |
| d_height: +d.Height, | |
| d_name: d.Name | |
| } | |
| }).then(ready); | |
| // Ready Function | |
| function ready(data) { | |
| //sort data by name | |
| data.sort(function(a, b) {return d3.ascending(a.d_name, b.d_name)}) | |
| // assigning domain to scales | |
| xScale.domain([0, d3.max(data, function(d) { return d.d_height; })]); | |
| yScale.domain(data.map(function(d) { return d.d_name; })); | |
| // defining and formatting axis groups | |
| var xAxisGroup = svg.append("g") | |
| .attr("class","y axis") | |
| .call(xAxis) | |
| .attr("transform","translate(0," + height + ")"); | |
| var yAxisGroup = svg.append("g") | |
| .attr("class","y axis") | |
| .call(yAxis); | |
| // creating rectangles | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", 0) | |
| .attr("y", function(d) { return yScale(d.d_name); }) | |
| .attr("height", yScale.bandwidth()) | |
| .attr("width", function(d) { return xScale(d.d_height); }) | |
| .style("fill", function(d) {return d.d_color; }); | |
| // Handmade legend | |
| //legend title | |
| svg.append("text") | |
| .attr("x", 372) | |
| .attr("y", 10) | |
| .text("Eye color") | |
| .style("font-size", "13px") | |
| .attr("alignment-baseline","middle") | |
| .attr("class","legend") | |
| //color coded circles | |
| svg.append("circle") | |
| .attr("cx",375) | |
| .attr("cy",25) | |
| .attr("r", 6) | |
| .style("fill", "brown") | |
| svg.append("circle") | |
| .attr("cx",375) | |
| .attr("cy",40) | |
| .attr("r", 6) | |
| .style("fill", "blue") | |
| svg.append("circle") | |
| .attr("cx",375) | |
| .attr("cy",55) | |
| .attr("r", 6) | |
| .style("fill", "black") | |
| //text labels | |
| svg.append("text") | |
| .attr("x", 383) | |
| .attr("y", 25) | |
| .text("Brown") | |
| .attr("alignment-baseline","middle") | |
| .attr("class", "legend") | |
| svg.append("text") | |
| .attr("x", 383) | |
| .attr("y", 40) | |
| .text("Blue") | |
| .attr("alignment-baseline","middle") | |
| .attr("class", "legend") | |
| svg.append("text") | |
| .attr("x", 383) | |
| .attr("y", 55) | |
| .text("Black") | |
| .attr("alignment-baseline","middle") | |
| .attr("class", "legend") | |
| //axis labels | |
| svg.append("text") | |
| .attr("class", "x label") | |
| .attr("text-anchor", "middle") | |
| .attr("x", -height/2) | |
| .attr("y", -115) | |
| .attr("transform", "rotate(-90)") | |
| .text("Student Name"); | |
| svg.append("text") | |
| .attr("class", "7 label") | |
| .attr("text-anchor", "middle") | |
| .attr("x",width/2) | |
| .attr("y",height + 30) | |
| .text("Height (cm)"); | |
| //chart title | |
| svg.append("text") | |
| .style("fill", "black") | |
| .style("font-size", "16px") | |
| .attr("class", "x label") | |
| .attr("text-anchor", "middle") | |
| .attr("x", width/2) | |
| .attr("y", -10) | |
| .text("MSiA Student Height and Eye Color, Sorted Alphabetically"); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment