N

nitishsurneni@gmail.com

@Nitishsurneni·27 public vizzes

Loading thumbnail…

3rd task

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.

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.

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.

Loading thumbnail…

q2

This area chart shows the number of employees hired per year from a CSV dataset, with the x-axis representing the year and the y-axis showing the count of hires. The visualization uses D3.js v7 to fetch and parse the data, then employs `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG path and axes. The chart is titled "Employee Hires Over Time" and includes labeled axes for clarity.

Loading thumbnail…

q1

This pie chart visualizes the distribution of employees across departments from an HR dataset loaded via D3's `d3.csv` fetch. The D3 v7 code uses `d3.pie()` and `d3.arc()` to compute and render the chart’s arcs, with a sequential color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) distinguishing departments. Each slice includes a tooltip showing the department name and count, while a legend on the left uses SVG rectangles and text labels to identify colors. The visualization is rendered entirely as SVG elements.

Loading thumbnail…

Fork of scatter plot

This scatter plot shows the relationship between the personal wealth of billionaires (in billions of USD) and their country’s GDP (in trillions of USD), with each point labeled by the billionaire’s name. Built with Chart.js and PapaParse, it loads data from a local CSV file, parses it asynchronously, and renders an interactive canvas-based chart. Tooltips display each billionaire’s name alongside both wealth and GDP values, while axis titles clarify the measured units. The visualization highlights the concentration of wealth among billionaires from countries with large economies.

Loading thumbnail…

Fork of Activity 6 Tutorial 3.2

This line chart visualizes the annual GDP growth percentage of a single country from 2019 to 2024, based on data from the Forbes Billionaires dataset. The D3.js v7 code loads CSV data, extracts the relevant GDP fields, and renders a line chart with red strokes. It uses linear scales for both the x-axis (year) and y-axis (GDP growth), with labeled axes and tick marks generated via `d3.axisBottom` and `d3.axisLeft`. The chart is embedded in an SVG within an HTML page, styled with a steel blue background.

Loading thumbnail…

heat map

This heat map visualizes the correlation between GDP and wealth for ten countries, using color intensity to represent the absolute difference between each country’s GDP and wealth values. The visualization arranges countries along the x-axis and two categories, GDP and Wealth, along the y-axis, with each cell colored using a sequential interpolateCool scale. Built with D3.js v7, the code flattens the source data into category-specific rows, then renders SVG rectangles positioned by d3.scaleBand for both axes. The result provides a quick comparative view of economic output versus per-capita wealth across the included nations.

Loading thumbnail…

Fork of pie chart

A pie chart displays the GDP distribution of the top ten countries, with each slice proportionally sized and labeled with the country name, alongside a legend. The D3.js code (v7) uses `d3.pie()` to compute arc data and `d3.arc()` to generate SVG paths, with `d3.scaleOrdinal` assigning colors. A separate SVG legend lists countries with color swatches. The hardcoded dataset is embedded directly in the JavaScript.

Loading thumbnail…

area chart

This area chart displays the top 10 countries by GDP in billions, with countries plotted along the x-axis and their GDP values along the y-axis. The chart renders a single filled path using the `d3.area` generator, which creates the area shape between the baseline and the GDP values. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes added via `d3.axisBottom` and `d3.axisLeft`. The data is hardcoded as JavaScript objects, and the SVG output is generated entirely with D3 v7.

Loading thumbnail…

scatter plot

This bar chart shows the relative wealth of billionaires across 18 industries, sorted from highest to lowest total worth. The visualization uses hardcoded data displayed as brown horizontal bars with value labels at the end of each bar. The code leverages D3 v7's `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisTop` with grid lines to create a clean, annotated comparison of industry wealth.

Loading thumbnail…

Fork of Fork of Activity 6 Tutorial 3.2

This horizontal bar chart displays the total wealth of billionaires across 18 industries, sorted from highest to lowest total final worth. The visualization uses hardcoded data rendered as SVG rectangles with d3.axisLeft for the categorical y-axis and d3.axisTop with a linear x-scale for the wealth values. Each bar is labeled with its exact dollar amount using d3.format. The chart emphasizes the dominance of Technology and Fashion & Retail, which have the largest accumulated wealth totals.

Loading thumbnail…

project 2

This example visualizes a force-directed graph of interconnected nodes using D3.js, with the simulation driven by `d3.forceSimulation` and `d3.forceLink` to position the elements. Node positions update in real time as the forces settle, while links are rendered as SVG lines and nodes as circles with fill colors based on their cluster membership. The code also includes zoom and drag interactions via `d3.zoom` and `d3.drag`, and it loads data from an external JSON file to define the network structure. The rendering approach uses standard SVG elements, with the simulation’s tick event updating the visual attributes dynamically.

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.

Loading thumbnail…

Fork of Fork of Hello VizHub

This visualization displays the world’s billionaires from the 2023 Forbes list, mapping each person as a node on a global map with size proportional to their net worth. Using D3.js, it employs `d3.forceSimulation` for node positioning and `d3.geoPath` to render country boundaries from the merged CSV data. Hovering over a node reveals a tooltip with the billionaire’s name, rank, and category. The chart emphasizes geographic distribution, illustrating concentrations of wealth in the US, Europe, and Asia.

Loading thumbnail…

Task4 Question 4

This interactive bubble chart visualizes smartphone specifications, comparing screen size, camera resolution, and price across different brands. Each bubble’s position encodes screen size on the x-axis and camera resolution on the y-axis, while its radius represents price and its color indicates the brand. The visualization uses D3.js (v6) with an SVG rendering approach, employing `d3.scaleLinear` for the axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeSet3` for brand colors, and `d3.axisBottom`/`d3.axisLeft` for labeled axes. Data comes from the `smartphones.csv` file, loaded via `d3.csv`, with each point styled with opacity and a black stroke.

Loading thumbnail…

Task4

This bubble chart visualizes the correlation between average torque, horsepower, and highway MPG across 31 car makes, using engine specifications from a CSV dataset. Bubble position encodes horsepower (x-axis) and torque (y-axis), while bubble radius represents highway MPG and color distinguishes car makes. The visualization includes interactive tooltips that display each make's name on mouseover, plus a legend showing MPG values and color categories. Built with D3 v7, it uses SVG rendering and employs d3.scaleOrdinal, d3.interpolateTurbo, and event handlers for the interactive features.

Loading thumbnail…

Task 3 Question3

A scatter plot visualizes the relationship between hours studied and exam scores for individual students, with points colored blue for males and pink for females. The visualization loads CSV data from a GitHub repository using D3 v6's `csv` function, then renders SVG circles mapped through `scaleLinear` scales. Axis labels, a legend, and tick formatting are added via `axisBottom`, `axisLeft`, and `tickFormat`, with the chart sized dynamically to the browser window.

Loading thumbnail…

task 3.2

This visualization displays a scatter plot of the classic Iris dataset, mapping sepal length against petal length. Points are colored and shaped according to the species of iris, with a legend indicating the species categories. The chart is built using D3.js version 7, leveraging the `scaleLinear` and `scaleOrdinal` APIs for continuous and categorical scales, and `symbol` for generating scatter plot point shapes. Data is loaded asynchronously from a remote CSV source and parsed with `csvParse`.

Loading thumbnail…

task 1

This interactive bar chart displays the 2020 populations of 30 countries, from a CSV file, using horizontal bars sorted by country name. Green rectangles represent each nation’s population, with hover tooltips revealing the precise value. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG rendering, with axis ticks formatted using `format('.2s')`.

Loading thumbnail…

Task3

This scatter plot visualizes the Iris dataset, showing petal length and petal width for three flower species, each represented by a distinct color (setosa in sky blue, versicolor in light green, and virginica in orange). The visualization loads CSV data from a GitHub repository, parses it with d3.csv, and renders SVG circles using d3.scaleLinear for both axes. The code explicitly maps the data values to x and y positions, though the circle elements also carry sepal measurements as extra properties, and uses d3.axisBottom and d3.axisLeft to display the labeled scales.

Loading thumbnail…

Question 2

This visualization shows the proportional distribution of CO2 emissions by fuel type across different vehicle categories. Using a horizontal stacked bar chart, each vehicle type displays segments for Petrol, Diesel, Electric, and Hybrid fuel sources, colored with a categorical scale. The D3.js code loads data from a CSV file, stacks the fuel-type columns using the `d3.stack` API, and renders the result as SVG rectangles scaled by the linear x-axis. A legend identifies each fuel type, while the y-axis labels the vehicle types. The chart enables quick comparison of fuel-source shares within each vehicle category.

Loading thumbnail…

Task 2

This stacked horizontal bar chart shows the distribution of IMDb movie ratings across six genres, with each genre’s bar segmented into five rating categories from “below 5.0” to “above 8.5.” The chart uses d3.stack to process the csv data and d3.scaleOrdinal for color coding, while d3.scaleLinear and d3.scaleBand position the percentage x-axis and genre y-axis. Hovering over a segment dims it and displays a tooltip with the exact percentage for that rating category.

Loading thumbnail…

Activity-6question

A horizontal bar chart displays the population of ten countries in the year 2000, sorted with the largest at the top. The visualization uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` handling the layout and `format` for tick labels. Population values are loaded from a CSV file via `d3.csv`, multiplied by 1000, and styled with green bars and blue axis lines.

Loading thumbnail…

activity-6

This horizontal bar chart displays the population of up to 20 countries for the year 2010, with bars sorted by country name along the y-axis. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for the axes and renders green SVG rectangles via the custom `Marks` component. The chart loads data from a CSV file, formats tick labels using `d3.format`, and includes interactive tooltips showing the formatted population values.

Loading thumbnail…

Fork of 6 Buddhas

This example displays a dense cloud of semi-transparent colored circles generated in React and rendered as SVG. The circles are positioned using multiplication and Math.random within nested loops, producing a chaotic scatter. The image also layers a copy of the Buddha path in the center, overlaid on a floral background image. Clicking anywhere on the page appends temporary animated circles to the SVG using vanilla JavaScript DOM manipulation. The code uses React and ReactDOM for structure and raw SVG elements for rendering, with no external charting library.

Loading thumbnail…

Fork of 5 Buddhas

A chaotic, colorful visualization of overlapping Buddha forms. The piece displays a dense field of randomly placed and rotated polygons, each with a highly varied fill color, creating a noisy, abstract pattern. Overlaid on this is a single, detailed Buddha path rendered in white. The work is built with React and ReactDOM, using SVG polygons and a path element. The random polygon generation is driven by nested `A.map` calls, while the Buddha shape is a static, complex SVG path.