Skip to main content
SimilarExport ZIP
100%

Fork of WEBPAGE

✓ Published4🌍 Public
Ssannihitha.k23@gmail.com
Last edited Apr 26, 2024
Created on Apr 26, 2024
Forked from WEBPAGE

This example is an interactive dashboard that presents a set of pre-rendered SVG charts, including a COVID-19 cases timeline, a scatter plot, a heatmap, and an orders comparison. Users select charts via buttons, which trigger the loading and display of external SVG files from a GitHub repository. The interface uses HTML, CSS, and vanilla JavaScript to manage button events and swap between a Chart.js bar chart rendered on a Canvas and the static SVG images. The chart views are designed for comparison and quick access, with a focus on switching between different data representations.

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…

webpage

This example demonstrates a chart viewer that switches between a Chart.js canvas bar chart and pre-rendered SVG visualizations, including scatter plots, heatmaps, and time-series comparisons. Users select charts via HTML buttons, triggering functions that hide the Canvas element and load external SVG files from GitHub using the `img.src` property. The Chart.js `Chart` constructor handles the bar chart with categorical data, while SVG images are displayed directly, with error handling via `onerror`. It also includes an ES6 module exporting a message string.

Ssannihitha.k23@gmail.com
84% match
Loading thumbnail…

Fork of Webpage

This example demonstrates a manual chart selector interface with buttons to load different SVG visualizations. The interface presents four buttons—Bar Chart, Scatter Plot, Histogram, and Line Chart—that trigger `loadSvg()` to fetch and inject raw SVG text into the page. Currently, only the Bar Chart uses a real external source from GitHub, while the other buttons reference placeholder URLs. The implementation relies on basic JavaScript `fetch()` calls and DOM manipulation via `innerHTML`. Styling is minimal, using inline CSS for the page body and button layout.

Nnarasimhacharyulu010@gmail.com
83% match
Loading thumbnail…

WEBPAGE

This dashboard presents a collection of data visualizations, offering buttons to navigate between different chart types such as bar charts, scatter plots, heatmaps, and line charts. It loads Chart.js for canvas-based bar charts and displays externally hosted SVG images for other visualizations, with buttons linking out to VizHub projects built with Tableau, Python, PowerBI, and D3.js. The interface uses a gradient background and interactive hover effects on its selection buttons.

Ssannihitha.k23@gmail.com
81% match
Loading thumbnail…

Tableau

This interactive dashboard displays a collection of pre-rendered SVG charts covering COVID-19 statistics and e-commerce analytics. Users select a topic from a set of buttons, which loads corresponding SVG images hosted on GitHub. The interface uses HTML buttons with event listeners in JavaScript to toggle between chart displays, while Chart.js is loaded for potential canvas-based visualizations, though the primary interaction relies on swapping SVG image sources.

Ssannihitha.k23@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

This example presents a dashboard for customer data, featuring a summary of key statistics, a data table, and a prominent SVG visualization. Built with D3.js (d3 v7) and rendered as SVG, the page loads a CSV dataset from a GitHub gist and displays it within a polished, gradient-styled interface. The code uses standard DOM manipulation and D3's data-binding capabilities to populate the visual elements.

AAmrit Adhikari
76% match
Loading thumbnail…

Fork of HTML Starter

This is a multi-page website demonstrating different chart types. The home page links to three separate HTML pages: a stacked and grouped bar chart, a stacked area chart, and a line chart with multiple lines. Each page displays static images of the visualizations, which are embedded via `<img>` tags and hosted from local desktop file paths. The site uses basic inline CSS for image sizing and borders, alongside a linked `style.css` file for typography and layout, creating a simple gallery of pre-rendered charts.

SSYAM TEJ
75% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu
75% match
Loading thumbnail…

Fork of HTML Starter

A dark-themed dashboard loads a local CSV file via D3 v7, summarizes the data into three key performance indicators, and renders a bar chart of a selected numeric column. The SVG visualization uses D3 scales, axes, and a linear gradient fill for the bars. The page includes a file picker, controls for selecting columns, and a fixed 420-pixel chart area.

MManeesh Kumar
74% match