Skip to main content
SimilarExport ZIP
100%

webpage

✓ Published0🌍 Public
Ssannihitha.k23@gmail.com
Last edited Apr 25, 2024
Created on Apr 25, 2024
Forked from Hello VizHub

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.

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 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.

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

D3.js

This example demonstrates the capabilities of VizHub by loading D3.js and Chart.js through CDN links and rendering interactive data visualizations on an HTML canvas or as embedded SVG images. The interface presents a set of buttons that display different chart types, including bar charts, scatter plots, and distribution graphs, with each button triggering a hide-and-show mechanism between the canvas and an image element. The code imports a local ES6 module for a message and uses Chart.js to create the bar chart on the canvas, while SVG charts are loaded from external GitHub URLs. The styling uses a Roboto font and gradient background for presentation.

Ssannihitha.k23@gmail.com
79% 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
79% 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
78% match
Loading thumbnail…

PowerBi

This example presents a series of Power BI-style data visualizations, including bar charts, scatter plots, and trend analyses, which users can select via buttons. It uses the Chart.js library to render a canvas-based bar chart and loads pre-generated SVG files from GitHub for other chart types. The interface is built with HTML, CSS, and vanilla JavaScript, with event listeners managing the display of either the canvas chart or an SVG image.

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

Making Bar Chart with SVG!

This example demonstrates a minimal HTML page that renders a static bar chart using SVG, displaying a simple "Hello HTML!" message as the chart title. The code relies on plain CSS for text styling and JavaScript for the initial setup, though no actual data or dynamic visualization logic is implemented yet. It serves as a starting point for building interactive charts with React and D3, referencing a separate React Starter template. The rendering approach uses basic HTML elements within a styled `<div>` rather than SVG tags, with the title styled at a large font size for emphasis.

AAndrew-Kiwa
75% match
Loading thumbnail…

BarChart

This example demonstrates a simple bar chart, but the code shows no bar chart implementation. Instead, an SVG canvas of 960 by 500 pixels is empty, and a separate "Cars Report" page lists car items with CSS styling. The primary visualization technique is static SVG rendering, yet no data is bound or drawn. The code includes a CSS rule for black lines with a 10-pixel stroke width, but fails to apply it. The example uses vanilla HTML, CSS, and JavaScript without any charting library.

Sshuksbhoney
74% 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
74% match