Interactive Bar Chart

[ryang72]

Types of changes

• [ ] Bugfix (change which fixes an issue)
• [x ] New feature (change which adds functionality)
• [ ] Refactor (change which changes the codebase without affecting its external behavior)
• [ ] Non-breaking change (fix or feature that would causes existing functionality to work as expected)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Purpose

An interactive bar chart to act as a guessing game for readers.

Approach

Learning

Thanks to Jason for this reference for a draggable bar chart: https://bl.ocks.org/AlainRo/9264cd08e341f2c92f020c39642c34d1 This link to understand how to create a simple striped pattern for the bar chart: https://stackoverflow.com/questions/13069446/simple-fill-pattern-in-svg-diagonal-hatching This link to show how animation works in d3 (d3.transition()): https://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1 Thinks links shows how tween works for number text animation: https://bl.ocks.org/bricedev/a0c5ef180272fac3aea6

Checklist

• [x] My branch follows the branch naming scheme of UCLA Radio, and can merge into master without error.
• [x] My code follows the code style of this project, and I have linted it to confirm this. (except for the d3 issue)
• [] I have added tests that prove my fix is effective or that my feature works.
• [] My change requires a change to the documentation and I have updated the documentation accordingly.
• [] All new and existing tests passed.

Platform

Operating System:
Node Version:

Further Comments

Core functionality works, just need to change css to match the design. Also have it so that the results percent moves slightly faster than the results bar to try to make it feel more alive (I can explain in person cause that was pretty vague). Can change it so the number and bar moves together. There is a white outline around the rect that I'm not too sure how to get rid of.