What is a Bar Chart Race:
The bar chart race is an animated chart and it displays top “n” values as per year or any category.
The chart consists of four parts. From bottom to top in z-order: the bars, the x-axis, the labels, and the ticker showing the current date.
It has below features.
- Make the animation faster or slower by adjusting the duration in milliseconds
- Selects top “n” values for displaying bar chart race
- Good visualization with different colors for each value
- Replay button
Reference Link: https://observablehq.com/@d3/bar-chart-race-explained
Clinical Trial Registry Data :
The Clinical trial data file (clinical trial data.csv) is taken from “ClinicalTrials.gov”. ClinicalTrials.gov is a database of privately and publicly funded clinical studies conducted around the world.
It is a Web-based resource that provides patients, their family members, health care professionals, researchers, and the public with easy access to information on publicly and privately supported clinical studies on a wide range of diseases and conditions.
The Web site is maintained by the National Library of Medicine (NLM) at the National Institutes of Health (NIH).
Steps for implementation of this graph:
- Open the link https://observablehq.com/@d3/bar-chart-race-explained and click on “three dots icon (…)” (displayed next to “Teams” at top right). Then, click on “Download code ”. The file “bar-chart-race-explained.tgz” will be downloaded. Now, extract the tgz file. It should contain .html , .js , .css , .json files as shown below:
- The file e9e3929cf7c50b45@3007.js contains javascript code as shown in below image :
Open the e9e3929cf7c50b45@3007.js file using any editor (say VS code). Replace the file name “category-brands.csv” with our data file (CSV file) name.
3. Delete all existing data in the below mentioned file and update it with our data file (CSV format).
File location : /home/Downloads/bar-chart-race-explained(1) /files/aec3792837253d4c6168f9bbecdf495140a5f9bb1cdb12c7c8113cec26332634a71ad29b446a1e8236e0a45732ea5d0b4e86d9d1568ff5791412f093ec06f4f1
4. If you want to add some extra features to bar chart(selecting top n values,adjusting duration time in text box etc.) then you should include extra code in the file e9e3929cf7c50b45@3007.js .
5. Finally, open a terminal and run the below command to get into our project folder path. Ex: cd enter your project folder path(/home/desktop/bar chart race explained)
6. Run the command “simplehttpserver .” Then local server will start work like below:
Listening 0.0.0.0:8000 web root dir /home/Desktop/Bar Graph/bar-chart-race-explained
7. Open the browser and run the localhost:8000.Then animated bar chart will be generated as shown below
8. Duration time of animation can be adjusted