Skip to main content
SimilarExport ZIP
100%

PowerBi

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

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.

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
76% 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
73% 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
71% 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
71% match
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
70% match
Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr
70% match
Loading thumbnail…

PowerBI theme which uses Sparks font for sparkline rendering in matrix/pivot tables

This example demonstrates how a Power BI theme can repurpose the Sparks font family to render inline sparklines directly inside matrix and pivot table cells, replacing traditional numeric values with compact bar or dot visualizations. The theme defines three visual style variants—Default, Condensed, and Sparse—each applying a different Sparks typeface, such as "Sparks Bar" or "Sparks Dot Large Regular," to the table's values. It also adjusts row padding and background colors for alternating rows, while keeping column headers consistent. The configuration uses Power BI's JSON-based visualStyles schema, targeting the pivotTable visual and its values, grid, and columnHeaders properties.

HHugoberry
68% match
Loading thumbnail…

barChart and pieChart V3

This example shows how interactive bar charts and pie charts can be built with React and D3 v5, allowing users to switch between chart types and select different categorical columns from a dropdown menu. The visualization displays absolute frequencies of student grades and degree programs, with hover tooltips showing values or percentages, and animated transitions when switching data. It uses D3’s scaleBand, scaleLinear, scaleOrdinal, nest, pie, arc, and axis components, rendered as SVG with transitions and animation delays, plus custom tooltip handling via mouse events.

SSchmittYannic
68% match