dboard

100%

✓ Published1🌍 Public

Last edited Dec 4, 2022

Created on Oct 3, 2022

Forked from dboard

dboard is a dashboard that aggregates music artist data from a JSON file, categorizing artists by musical genre and showing counts by gender type (Male, Female, group, unknown) alongside cumulative Deezer fan counts. The visualization uses d3.v6 to load and parse the data, then processes it into a new aggregated dataset. The HTML layout relies on a CSS grid with four plot containers and a hidden tooltip element for potential interactivity, while the JavaScript code handles the data transformation through nested array operations and conditional counting.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

dboard

This dashboard lets users explore a music artist database by country, showing the top artists per country and then diving into an artist's top tracks, related artists, album chronology, and music genres. It uses D3.js (v4) with React, fetching data from a remote API. The visualization employs an SVG map with a geoMercator projection for the country overview and various charts, including bar charts and a timeline, for the detailed artist views.

BBaptisteJarry

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

79% match

Loading thumbnail…

dboard

The dashboard presents a multi-panel overview of sales data from a CSV file, showing a US map of state-level sales, a bar chart, a scatter plot, and a sub-category pie chart. It uses D3 v6 and Moment.js to parse dates, with SVG rendering and animated transitions for axes. The map is generated via `d3.geoPath` with a GeoAlbersUsa projection and a linear color scale, while the pie chart uses `d3.pie` and `d3.arc`. Tooltips display values on hover.

TTimothyMiage

76% match

Loading thumbnail…

dboard

This dashboard presents a multi-panel view of sales data from a CSV file, showing sales by category in a bar chart, a geographical map of the US, a time series scatter plot, and a donut chart of sub-category sales. The bar chart is interactive; clicking a category filters the accompanying charts and updates the donut chart, which is rendered using `d3.pie()`. The code employs D3 v6 functions like `d3.rollup` for data aggregation and `d3.axisBottom` for axes. Visual elements are drawn as SVG primitives, with interactions driven by mouse events and tooltips.

IIndira120

76% match

Loading thumbnail…

dboard

The dashboard displays sales order data from a CSV file across four grid-based plots, using D3 v5 (d3.select, d3.csv) to load and render SVG charts. Each plot is placed in a separate container with a shared margin, and a tooltip is included for interactions. The Vue framework is also integrated, though the code shown relies on D3's data-binding and SVG rendering to visualize the dataset.

AAnissa Belkelfa

76% match

Loading thumbnail…

dboard

This dashboard displays a sales dataset across four synchronized visualizations: a scatter plot of sales over time, a bar chart of sales by sub-category, a geographic map of US sales, and a pie chart of sub-category proportions. Built with Vue, it uses D3 v6 APIs like `d3.scaleBand`, `d3.pie`, `d3.geoAlbersUsa`, and `d3.geoPath`, with data loaded via `d3.csv` from a local CSV file. Animations use `transition` calls, and all charts render as SVG.

JJuliette

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

75% match

Loading thumbnail…

dboard

This dashboard uses a Superstore sales dataset to display grouped bar charts of sales by sub-category. The visualization leverages D3 version 6 with the d3-array v2 module to group and stack data, rendering SVG bars with animations. The code uses `d3.group` to aggregate records and `d3.stack` for potential stacked series, with axes created via `d3.axisBottom` and `d3.axisLeft`. Moment.js assists with date handling, while the layout is built with a CSS grid containing four plot areas.

BBerangerIcart

75% match