This is a personal project where I am prototyping data visualizations using Plotly. The project includes three interactive speedometer charts displayed on a responsive webpage.
- Three interactive speedometer charts.
- Responsive design to adapt to different screen sizes.
- Customizable chart data and appearance.
- HTML
- CSS
- JavaScript
- Plotly.js
- A web browser to view the HTML file.
- Clone the repository:
git clone https://github.com/alainrafiki/data-visualization-prototypes.git
- Navigate to the project directory:
cd data-visualization-prototypes
- Open
index.html
in your web browser to view the charts.open index.html
- Customize the chart data and appearance by modifying
chart.js
.
index.html
: The main HTML file containing the structure of the webpage.chart.js
: JavaScript file containing the configuration and creation of the Plotly charts.styles.css
: CSS file for styling the webpage (if applicable).
To customize the data and appearance of the charts, modify the relevant sections in chart.js
. Each chart has its own configuration for values, range, steps, and thresholds.
Example:
// Chart 1 configuration
var gaugeValue1 = 3636;
var gaugeRange1 = [0, 10000];
var gaugeSteps1 = [
{ range: [0, gaugeRange1[1] / 3], color: "red" },
{ range: [gaugeRange1[1] / 3, (2 * gaugeRange1[1]) / 3], color: "yellow" },
{ range: [(2 * gaugeRange1[1]) / 3, gaugeRange1[1]], color: "green" }
];
var thresholdValue1 = 6433;
createGaugeChart('myDiv1', gaugeValue1, gaugeRange1, gaugeSteps1, thresholdValue1);
This is a personal project, but feel free to fork the repository and submit pull requests if you have improvements or bug fixes.
This project is licensed under the MIT License.