Skip to main content
SimilarExport ZIP
100%

3rd task

✓ Published0🌍 Public
Nnitishsurneni@gmail.com
Last edited Apr 26, 2025
Created on Apr 26, 2025
Forked from Project

Three synchronized D3.js v7 charts form an interactive dashboard for exploring billionaire data: a bar chart of net worth, a line chart of GDP growth from 2015 to 2022, and a pie chart of industry shares. Dropdown menus filter by country and industry, triggering updates to all visualizations. The bar and line charts update based on the selected country, while the pie chart filters by industry, with a tooltip on hover. All charts render as SVG and use scales and axes from the D3 API.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Visualization

This visualization explores the relationship between billionaire wealth and global GDP growth, offering three interactive views: a bar chart showing total wealth by industry, a scatter plot comparing GDP growth to individual net worth, and a heatmap displaying a simplified correlation metric. The bar chart aggregates data by category and displays total wealth per industry, while the scatter plot plots GDP growth from 2019-2024 against billionaire wealth with interactive tooltips. The heatmap uses a viridis color scale to represent correlation values. Built with d3.v7, the visualization loads CSV data and renders SVG graphics using d3.scaleBand, d3.scaleLinear, d3.nest(), and d3.axisBottom.

Nnitishsurneni@gmail.com
78% match
Loading thumbnail…

2nd task

This treemap visualizes the distribution of billionaire wealth across twelve industries, using a color-coded hierarchy where rectangle size corresponds to total industry wealth. Built with D3 v7, the code uses `d3.hierarchy` and `d3.treemap` to compute spatial layout, then renders each leaf as an SVG `rect` with a text label. The visualization includes interactive tooltips that display the industry name and total wealth on hover, with smooth opacity transitions. The color scheme uses `d3.schemeSet3` for categorical distinction.

Nnitishsurneni@gmail.com
78% match
Loading thumbnail…

3D bar chart

This interactive 3D bar chart visualizes the stock prices of top companies from January to June, with a multi-series dataset loaded from a CSV file. The visualization renders each company's monthly values as three-dimensional bars using the d3-x3d library, which integrates D3.js with X3DOM for WebGL-based rendering. The chart is animated and supports hover interactions, allowing users to inspect individual data points. Additional libraries including AnyChart are loaded but not utilized in the visible code, while the styling is handled through custom CSS.

Nnikhilagopi
76% match
Loading thumbnail…

New Bar Chart D3

This bar chart displays the wealth of billionaires, grouped by company name, with bar heights and colors scaled to each billionaire’s net worth in billions of dollars. Built with D3 v6 and React, the visualization loads CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` for axes, and renders bars as SVG rectangles with hover effects via CSS. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and each bar includes a tooltip title showing its value.

AAllen Ho
75% match
Loading thumbnail…

Visualisation GDP

This example presents a multi-chart dashboard visualizing global GDP, population, CO2 emissions, and agricultural data. It loads CSV data from a GitHub repository and renders separate bar, line, histogram, and scatter charts using the Chart.js library. The code also includes custom D3.v5 functions for violin, density, histogram, and boxplot plots, which are defined but not directly invoked in the main HTML, where charts are drawn on canvas elements.

BBharath kumar
75% match
Loading thumbnail…

my project

This bubble chart compares the net worth of 45 billionaires against their country's GDP, using the x-axis for GDP and the y-axis for individual wealth. Each circle’s size is scaled by net worth, and a tooltip reveals the person’s name when hovered. Built with D3 v7, the visualization uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` for axes, sizing, and coloring, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. Data is a static, hard-coded array.

Nnitishsurneni@gmail.com
75% match
Loading thumbnail…

D3

This example demonstrates an animated pie and bar chart using the D3.js v3 library. The pie chart visualizes an array of six numeric values with arc segments, while the bar chart displays a separate dataset with an elastic growth animation. The charts are rendered as SVG elements, with the bar chart featuring interactive hover effects that change bar colors and display tooltips. The code utilizes D3 APIs including `d3.layout.pie`, `d3.svg.arc`, `d3.scale.ordinal`, and `d3.scale.linear` for data binding, scaling, and animation transitions.

Mmrharis1
75% match
Loading thumbnail…

sample

This example presents a multi-panel dashboard of health and development indicators using D3.js v7. It displays a simple circle, several scatter plots comparing health expenditure metrics (such as public health spending as a percentage of GDP), a line chart of per-capita health expenditure, a scatter plot relating the Gender Inequality Index to the Human Development Index, and a bar chart of GDP per capita. The visualizations are rendered as SVGs with animations and interactive tooltips. The code uses d3.csv to load remote datasets, d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, d3.scaleOrdinal with d3.schemeCategory10, and a d3.zoom for panning and zooming in one chart.

Vvikramkotlo9@gmail.com
75% match