Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Fork of area chart

✓ Published1🌍 Public
YYashwanth0311
Last edited Apr 19, 2024
Created on Apr 14, 2024

This example displays two side-by-side area charts showing temperature and pressure data for a selected city and year. A dropdown menu lets viewers choose between Bangalore, Vancouver, and San Francisco for the years 2020 through 2022. The charts are drawn on Canvas elements using the Chart.js library, with temperature plotted as a single red-tinted dataset per chart. The visualization relies on hardcoded JavaScript objects containing the monthly data values for each city and year combination.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HeatMap

This dashboard displays monthly temperature and pressure trends across selectable cities (Bangalore, Vancouver, San Francisco) and years (2020–2022) using two side-by-side line charts rendered on separate canvases. Each chart, built with Chart.js, plots twelve monthly data points with custom styling and hover interactions, allowing direct comparison between the two metrics. The interface includes dropdown menus to switch cities and years, which dynamically update the datasets. The underlying data is embedded as static JavaScript objects rather than loaded from the modified CSV mentioned in the README, with all rendering handled client-side in the browser.

YYashwanth0311
89% match
Loading thumbnail…

Fork of Fork of weather data Statistics Dashboard

A weather dashboard displays monthly temperature and pressure trends for Bangalore, Vancouver, and San Francisco across multiple chart types. It combines a line chart, bar chart, stacked area chart, and scatter plot—all rendered on Canvas using Chart.js. Users select cities via header buttons and years from a dropdown, updating chart data and highlighting the selected city’s dataset while dimming others. The scatter chart specifically plots temperature against pressure, and each chart’s colors adjust to reflect the active city. This fork builds upon previous dashboard versions, keeping the same interactive structure.

AAamir Hameed mir
87% match
Loading thumbnail…

Fork of weather data Statistics Dashboard

This fork of a weather data dashboard displays monthly temperature and pressure statistics for Bangalore, Vancouver, and San Francisco. It presents the data through multiple Chart.js canvas renderings: a line chart for temperatures, a bar chart for pressure readings, a stacked area chart, and a scatter plot correlating temperature against pressure. Users can switch between the three cities using header buttons, which dynamically update each chart's datasets and highlight the selected city while dimming the others. The code uses the Chart.js library and its Chart constructor to build all visualizations.

YYashwanth0311
87% match
Loading thumbnail…

Fork 1 project of area chart

This example displays two linked area charts showing temperature and pressure variations across the months of 2020, with interactive buttons allowing the selection of data for 2021 or 2022. The visualizations use Chart.js to render line charts with enabled fill, displaying temperature in Celsius and pressure in hPa. The charts are drawn on separate HTML canvas elements, and the button click handlers trigger an `updateChart` function that switches the displayed dataset.

YYashwanth0311
86% match
Loading thumbnail…

Fork of Fork of Fork of Fork of area chart

This example visualizes monthly temperature variations in Bangalore across three years (2020–2022) as a multi-line chart with gradient-filled areas. It displays trends for each year using distinct colors and includes interactive zooming via mouse wheel and pinch gestures. The visualization is rendered on a Canvas element using Chart.js, with datasets defined in plain JavaScript and gradient backgrounds generated through the Canvas API with `createLinearGradient`. The chart also features tooltips, a bottom legend, and labeled axes for month and temperature.

YYashwanth0311
85% match
Loading thumbnail…

Fork of Fork of NASCAR Statistics Dashboard

This dashboard displays monthly temperature and pressure data for six cities using four Chart.js visualizations: a line chart for temperature trends, a bar chart for atmospheric pressure, a stacked area chart comparing all cities’ temperatures, and a scatter plot mapping temperature against pressure. Users can switch between Bangalore, Vancouver, and San Francisco via header buttons, which update the line, bar, and scatter charts by recoloring datasets, while the charts render to individual Canvas elements. The code defines chart instances with Chart.js constructors and updates data and styling through explicit dataset manipulation and `.update()` calls.

Cchalasanigayaetiri@gmail.com
84% match
Loading thumbnail…

Fork of HeatMap

This heatmap visualizes monthly average temperatures across multiple cities (including Bangalore, Vancouver, and San Francisco) for the years 2020 through 2022, using a dataset trimmed to the first ten cities and first temperature entry per month. The visualization employs Chart.js to render the data on an HTML canvas, with each city-year combination displayed as a separate dataset of monthly values. Color intensity and border styling encode temperature ranges, allowing quick comparison of seasonal patterns and annual variations. The rendering leverages the canvas API directly, with the code providing static sample data that can be replaced with real measurements.

YYashwanth0311
80% match
Loading thumbnail…

Fork of NASCAR Statistics Dashboard

This dashboard visualizes monthly weather data, including temperature and pressure, for nine cities. Users select a city from a dropdown to update line and bar charts built with Chart.js, each displaying a distinct dataset. A stacked area chart and a scatter plot further compare temperature trends and the temperature-pressure relationship across all cities. The interface also includes a Leaflet map with popup markers showing city temperatures. Charts use mock data, while the map is rendered with OpenStreetMap tiles and the Leaflet API.

YYashwanth0311
76% match