Skip to main content
SimilarExport ZIP
100%

Dashboard ES6

✓ Published0🌍 Public
Mmaxime-plantard
Last edited Oct 3, 2020
Created on Aug 20, 2020
Forked from HTML Starter

A dashboard with KPI cards and an animated multi-line chart, rendered in SVG with D3 v5. Users filter KPIs and select projects from dropdowns, triggering updates to the card displays and the line series (planned, earned, and actual values). The chart uses D3 scales, axes, and transitions, with a legend, and Bootstrap styles the interface, while Font Awesome provides icons.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Dashboard

This dashboard presents project health metrics—cost, schedule, progress, CPI, SPI, resources, and issues—for a fictional project in a grid layout. It combines a D3.js v5 line chart tracking actual, baseline, and forecast costs over time with a D3 donut chart showing issue status. The interface includes Font Awesome icons in KPI cards, a filter panel, and an interactive issue detail table.

Mmaxime-plantard
83% match
Loading thumbnail…

Dashboard_TEST_ok

This dashboard presents four synchronized views of sales data: a bar chart, a U.S. choropleth map, a scatter plot, and a pie chart. It uses several D3.js v6 APIs, including `scaleBand`, `scaleLinear`, `geoAlbersUsa`, `geoPath`, `pie`, and `arc`. The map colors states based on total sales from the provided dataset, while the pie chart breaks down sales by sub-category. All visualizations support interactive tooltips and updates with animation.

BBomkerss
73% match
Loading thumbnail…

dashboard

This dashboard presents a multi-panel data visualization built with Vue, using D3.js v5 to render SVG graphics with animation. It includes a bar plot displaying sales by category with hover tooltips, a scatterplot of randomly generated points, and additional plot areas within a grid layout. The bar chart reads from a CSV dataset of retail orders, applying D3 scales, axes, and transitions to update the visualization dynamically, while the scatterplot uses D3's scaleLinear and random data generation.

Llanphuonglenguyen
72% 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
72% match
Loading thumbnail…

dboard

The dashboard displays sales data from a CSV file, using a small multiple of four SVG plots to visualize metrics like order amounts by category, product, and region. The code leverages D3 version 6 to parse the data, scale axes, and render stacked bar charts, with a color palette distinguishing revenue segments. Tooltips are implemented via HTML elements, and the layout is managed through a CSS grid, while the chart dimensions and margins are explicitly defined in the JavaScript.

JJShellBach
71% match
Loading thumbnail…

Fork of Fork of Customizing Axes

This dashboard lets users explore player statistics from professional VALORANT matches through interactive bar and scatter plots. Using D3.js v4, it loads match data via `d3.csv` and renders SVG charts with animated transitions. Dropdown menus allow switching between metrics like KD, kills, and win rate for both visualizations. The scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for point colors, while the bar chart sorts agents by the selected metric.

Ddaniel
71% match
Loading thumbnail…

dboard

The dashboard displays four interactive charts—a bar chart, line chart, scatter plot, and pie chart—built from a Superstore sales dataset. It visualizes metrics like sales by category, order trends over time, and product performance. The visualization uses D3.js v5 for data binding and SVG rendering, with Moment.js for date parsing. A tooltip appears on hover to show detailed values, driven by D3 event handlers. The layout is managed through a CSS grid, and the code imports the `select` function from D3 to manipulate the DOM.

PPLD3508A
71% match
Loading thumbnail…

dboard

This dashboard example, built with Vue and D3 v4, presents multiple data visualizations from a CSV file of sales records. The primary chart is a stacked bar chart that breaks down sales by product category, using a color-coded system to distinguish between subgroups. It imports specific D3 functions like `csv`, `scaleBand`, and `scaleLinear` to parse the data and construct the SVG-based charts. The interface uses a CSS grid to arrange four distinct visualization panels, with a tooltip element prepared for interactive data exploration.

BBaptisteJarry
71% match