Fork of Fork of Fork of Fork of area chart

100%

Fork of Fork of Fork of Fork of area chart

✓ Published1🌍 Public

Last edited Apr 14, 2024

Created on Apr 14, 2024

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.

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

85% 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

81% 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

80% 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

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

79% 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

79% 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

77% match

Loading thumbnail…

Fork of Fork of third

A line chart displays average monthly temperatures from 2021 to 2024, with time on the x-axis and degrees Celsius on the y-axis. The code loads a local CSV file using `d3.csv`, parses dates with `d3.timeParse`, and builds the visualization with D3 v7. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.curveMonotoneX` for a smooth line, and `d3.axisBottom` and `d3.axisLeft` for tick labels. Orange circles mark each data point with a hover tooltip.

Mmsahithipatel@gmail.com

77% match