Assignment: Create a Bar Chart
In this assignment, you'll make a copy of this visualization https://bl.ocks.org/curran/5cb71249dcbfd635c794520aff45b89d using Blockbuilder and change the data.
To get familiar with Blockbuilder, watch this video:
Next, watch this video: Creating a Bar Chart.
If the JavaScript is overwhelming for you or you need a refresher on the basics, this video might help get up to speed with basic programming concepts
To learn more about ES6 JavaScript, which is used in the video, the following resources may be helpful:
Steps required for this assignment:
- Find a few numbers relating to a topic that interests you. For example, the population of the largest 5 countries, the top 5 richest people alive, the death counts for the largest terrorist events. Be creative. Finding data should not take long. There are tons of small data tables in Wikipedia articles that could be data sources.
- Use Blockbuilder to fork (make a copy of) that visualization. You can click this link http://blockbuilder.org/curran/5cb71249dcbfd635c794520aff45b89d , then click "log in", then click "fork".
- Modify the data found in the JavaScript code.
- Make any adjustments necessary so that the visualization makes sense (e.g. number format, color).
- Update the README to describe the new data and link to the data source.
- (optional) Do something extra/fancy to show your level of proficiency with JavaScript/CSS.
- Create the thumbnail image.
- Review the grading criteria in detail and double check everything.
- Submit the URL of your new bl.ock when you submit this assignment (URL should contain "bl.ocks.org", not "blockbuilder.org").
- Please also post your work in Slack, so other students can see it and be inspired (be sure to include the link, not just a screenshot!).
- Tweet your work to world if you feel it turned out to be really cool.
Please read the rubric below for detailed grading criteria - this will be used for grading.
In general for work on bl.ocks.org:
- It helps (looks more professional) to set up your profile image in GitHub
- The title should reflect what the visualization is about - think of it as a public work that anyone could come across and see. The title should not be something like "HW1".
- The README uses Markdown, so you can create a link with this syntax: `[Our World in Data - Child Mortality](https://ourworldindata.org/child-mortality/#child-mortality-by-cause-of-death)`
- It's ESSENTIAL to cite and link to the original example that was copied. If you don't, the work can and will be considered as plagiarism.
- The thumbnail really should be there. Otherwise, your bl.ocks.org listing page will contain blank squares and will be difficult to navigate. You can upload the thumbnail from a screenshot in Blockbuilder, or use the gist-snap method in the video (first "npm install -g gist-snap").
- Please pay attention to details like words or numbers getting cut off, and fix these issues by adjusting the margin or font size.