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.

1. Clone the repository:

   git clone https://github.com/alainrafiki/data-visualization-prototypes.git

2. Navigate to the project directory:

   cd data-visualization-prototypes

1. Open index.html in your web browser to view the charts.

   open index.html

2. 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.