Coder Social home page Coder Social logo

AdrianaMusic's Projects

flipper icon flipper

A desktop debugging platform for mobile developers.

flo icon flo

A lightweight workflow definition library

fn icon fn

The container native, cloud agnostic serverless platform.

folly icon folly

An open-source C++ library developed and used at Facebook.

folsom icon folsom

An asynchronous memcache client for Java

fonts icon fonts

Font files available from Google Fonts

form-data icon form-data

A module to create readable `"multipart/form-data"` streams. Can be used to submit forms and file uploads to other web applications.

front-end-html-web-application icon front-end-html-web-application

# Web Design Homework - Web Visualization Dashboard (Latitude) ## Background Data is more powerful when we share it with others! Let's take what we've learned about HTML and CSS to create a dashboard showing off the analysis we've done. ![Images/landingResize.png](Images/landingResize.png) ### Before You Begin 1. Create a new repository for this project called `Web-Design-Challenge`. **Do not add this homework to an existing repository**. 2. Clone the new repository to your computer. 3. Inside your local git repository, create a directory for the web challenge. Use a folder name to correspond to the challenge: **WebVisualizations**. 4. Add your **html** files to this folder as well as your **assets**, **Resources** and **visualizations** folders. 5. Push the above changes to GitHub or GitLab. 6. Deploy to GitHub pages. ## Latitude - Latitude Analysis Dashboard with Attitude For this homework we'll be creating a visualization dashboard website using visualizations we've created in a past assignment. Specifically, we'll be plotting [weather data](Resources/cities.csv). In building this dashboard, we'll create individual pages for each plot and a means by which we can navigate between them. These pages will contain the visualizations and their corresponding explanations. We'll also have a landing page, a page where we can see a comparison of all of the plots, and another page where we can view the data used to build them. ### Website Requirements For reference, see the ["Screenshots" section](#screenshots) below. The website must consist of 7 pages total, including: * A [landing page](#landing-page) containing: * An explanation of the project. * Links to each visualizations page. There should be a sidebar containing preview images of each plot, and clicking an image should take the user to that visualization. * Four [visualization pages](#visualization-pages), each with: * A descriptive title and heading tag. * The plot/visualization itself for the selected comparison. * A paragraph describing the plot and its significance. * A ["Comparisons" page](#comparisons-page) that: * Contains all of the visualizations on the same page so we can easily visually compare them. * Uses a Bootstrap grid for the visualizations. * The grid must be two visualizations across on screens medium and larger, and 1 across on extra-small and small screens. * A ["Data" page](#data-page) that: * Displays a responsive table containing the data used in the visualizations. * The table must be a bootstrap table component. [Hint](https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables) * The data must come from exporting the `.csv` file as HTML, or converting it to HTML. Try using a tool you already know, pandas. Pandas has a nifty method approprately called `to_html` that allows you to generate a HTML table from a pandas dataframe. See the documentation [here](https://pandas.pydata.org/pandas-docs/version/0.17.0/generated/pandas.DataFrame.to_html.html) The website must, at the top of every page, have a navigation menu that: * Has the name of the site on the left of the nav which allows users to return to the landing page from any page. * Contains a dropdown menu on the right of the navbar named "Plots" that provides a link to each individual visualization page. * Provides two more text links on the right: "Comparisons," which links to the comparisons page, and "Data," which links to the data page. * Is responsive (using media queries). The nav must have similar behavior as the screenshots ["Navigation Menu" section](#navigation-menu) (notice the background color change). Finally, the website must be deployed to GitHub pages. When finished, submit to BootcampSpot the links to 1) the deployed app and 2) the GitHub repository. Ensure your repository has regular commits (i.e. 20+ commits) and a thorough README.md file ### Considerations * You may use the [weather data](Resources/cities.csv) or choose another dataset. Alternatively, you may use the included [cities dataset](Resources/cities.csv) and pull the images from the [assets folder](Resources/assets). * You must use Bootstrap. This includes using the Bootstrap `navbar` component for the header on every page, the bootstrap table component for the data page, and the Bootstrap grid for responsiveness on the comparison page. * You must deploy your website to GitHub pages, with the website working on a live, publicly accessible URL as a result. * Be sure to use a CSS media query for the navigation menu. * Be sure your website works at all window widths/sizes. * Feel free to take some liberty in the visual aspects, but keep the core functionality the same.

gems icon gems

Ruby wrapper for the RubyGems.org API

geoq icon geoq

Django web application to collect geospatial features and manage feature collection among groups of users

get_iplayer icon get_iplayer

A utility for downloading TV and radio programmes from BBC iPlayer and BBC Sounds

git icon git

Git Source Code Mirror - This is a publish-only repository and all pull requests are ignored. Please follow Documentation/SubmittingPatches procedure for any of your improvements.

git-reference icon git-reference

Online Git Reference at http://git.github.io/git-reference/

git-scm.com icon git-scm.com

The git-scm.com website. Note that this repository is only for the website; issues with git itself should go to https://git-scm.com/community.

github-audio icon github-audio

Listen to music generated by events happening across GitHub :octocat: 🎷

github-gmail icon github-gmail

[WebExtension] Open GitHub notifications with shortcuts in Gmail.

github-mention-highlighter icon github-mention-highlighter

A Chrome extension that automatically highlights any time you are mentioned on a GitHub issue or pull request thread by highlighting your username, any team you're a member of, and the border of any containing comment.

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.