Skip to main content
SimilarExport ZIP
100%

Fork 1 project of area chart

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

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.

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 Fork of Fork of Fork of area chart

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.

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
80% match
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
79% 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
78% 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
76% 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
75% match
Loading thumbnail…

Fork of Fork of Activity_7.1.1_Question_2

This area chart visualizes monthly temperature variations, with the shaded region and line highlighting the trend across the months. Built with D3 v7, the chart uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the filled path. Data is loaded asynchronously from a GitHub Gist via `d3.csv`. Axis labels and tick marks are rendered using `d3.axisBottom` and `d3.axisLeft`, with all SVG elements drawn to a static canvas. The chart is styled with a steelblue line and a semi-transparent lightsteelblue area.

Ppoornachander510@gmail.com
75% match
Loading thumbnail…

area chart

A temperature area chart visualizes monthly temperature variations with a single filled area. The chart uses D3 v6 to load a CSV dataset via d3.csv and renders an SVG path using the d3.area generator, with d3.scalePoint and d3.scaleLinear handling the axes. The x-axis labels are rotated for readability, and axis labels for “Month” and “Temperature (°C)” are added. The area is filled in steelblue, providing a clear view of the data’s overall trend.

Rreddyharshi08@gmail.com
74% match