Giter VIP home page Giter VIP logo

interactive_data_web_visualization_plotly_js's Introduction

The Webpage customized for the dashboard using HTML, CSS, Bootstrap, JavaScript, Plotly, and D3.js.

-Contents-

Overview of the Plotly_chart Analysis

The purpose of the analysis is to visualize the bacterial data for each individual’s ID that is selected from the dropdown menu on the webpage https://itekkie.github.io/plotly_chart/.

This assignment consists of four following technical analyses:

  1. Create a Horizontal Bar Chart to display the top 10 bacterial species (OTUs);
  2. Create a Bubble Chart that displays the Bacteria Cultures per Sample when an individual’s ID is selected from the dropdown menu webpage;
  3. Create a Gauge Chart that displays the weekly washing frequency's value, and display the value as a measure from 0-10 on the progress bar in the gauge chart when an individual ID is selected from the dropdown menu;
  4. Use your knowledge of HTML and Bootstrap to customize the webpage for your dashboard.

Resources

The analysis was created by using next software: HTML 5, CSS 4, Bootstrap 3.3.7, JavaScript, JS Libraries: Plotly, D3.

Plotly_chart Analysis Summary

Next charts are created:

  • The Horizontal Bar Chart to display the top 10 bacterial species;
  • The a Bubble Chart that displays the Bacteria Cultures per Sample when an individual’s ID is selected from the dropdown menu webpage;
  • The Gauge Chart that displays the weekly washing frequency's value when an individual ID is selected from the dropdown menu.

image

Additionally, the customized webpage for the dashboard are the followings:

  1. An image to the jumbotron is added;
  2. A background color is added;
  3. Customized font with contrast for the colors of jumbotron and footer are changed;
  4. The additional info is added to the Bubble chart;
  5. The webpage is mobile-responsive by using Bootstrap grid system.

interactive_data_web_visualization_plotly_js's People

Contributors

olesyapro888 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.