https://github.com/ejw-data/d3-horizontal-bar-custom

Custom D3js horizontal bar chart
https://github.com/ejw-data/d3-horizontal-bar-custom

d3js html-css-javascript

Last synced: 8 months ago
JSON representation

Custom D3js horizontal bar chart

• Host: GitHub
• URL: https://github.com/ejw-data/d3-horizontal-bar-custom
• Owner: ejw-data
• Created: 2022-06-14T22:33:54.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-06-27T16:35:56.000Z (about 4 years ago)
• Last Synced: 2025-01-22T06:47:24.844Z (over 1 year ago)
• Topics: d3js, html-css-javascript
• Language: JavaScript
• Homepage:
• Size: 251 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# d3-horizontal-bar-custom

Author:  Erin James Wills, ejw.data@gmail.com  

![D3 Scatter Plot](./assets/images/barchart-d3.png)  

Photo by [Jack B](https://unsplash.com/@nervum?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/candlestick-chart?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)  

## Overview  



This repo uses d3.js to create a custom horizontal bar chart or sometimes called lollipop chart.  This was a weekend project that started with the code used in the [d3-scatter plot repo]() and modified the same data set to show differences from the average.  


  

## Technologies    

*  HTML/CSS/JS

*  D3.js




## Data Source  

I believe the original dataset came from Kaggle and was one of their Quality of Life datasets.  




## Setup and Installation  

1. Clone the repo to your local machine

1. Open repo folder in an IDE like VSCode

1. Using a virtual server like the VSCode extention LiveServer

1. Run `index.html`  

## Example

![D3 Horizontal Bar Chart](./assets/images/d3-horizontal-bar-example.png)