Vinay Kumar Parvathini

@Vinaykumarp019·22 public vizzes

Vinay Tree Vizualization

This example shows a family tree as a hierarchical node-link diagram, with color-coded circles representing generations: red for the grandparent, orange for the parent level, and green for descendants. Using D3 v7, the code applies `d3.stratify` to convert the flat array of family relationships into a tree structure, then lays it out with `d3.tree` and renders vertical links via `d3.linkVertical`. Nodes are drawn as SVG circles with text labels above them.

Apr 13, 2026

Loading thumbnail…

Vinay Network Graph

A family tree visualization renders seven individuals across three generations as colored nodes connected by curved links. The chart uses d3.stratify to build the hierarchy from parent-child name pairs, d3.tree() to compute the layout, and d3.linkVertical() to draw the parent-child edges. Nodes are colored by depth—red for the grandparent, orange for the first generation, and green for the second—with each person’s name displayed above their circle. The static SVG output is generated with d3.select and append, using fixed coordinates translated to position the root at the top-left.

Apr 13, 2026

Loading thumbnail…

Vinay world map

This example displays a world map using a Natural Earth projection, with each country filled in varying shades of blue. The visualization shows geographic boundaries, a graticule, and a sphere background, drawn as SVG paths via `d3.geoPath`. It loads TopoJSON country data from the world-atlas package and converts it to GeoJSON with `topojson.feature`, applying a color scale based on data index. The map is built with D3 v7, using `d3.geoNaturalEarth1` for the projection and `d3.geoGraticule` for the grid lines.

Apr 13, 2026

Loading thumbnail…

Vinay Projection of country

A world map rendered with an Equal Earth projection displays countries as choropleth-style polygons filled with a blue sequential color scale. The visualization includes a light blue sphere background and a gray graticule showing latitude and longitude lines. Using D3.js v7, the map loads TopoJSON country boundaries from the world-atlas package and converts them to GeoJSON with topojson-client. D3's geoNaturalEarth1 projection, geoPath, and geoGraticule APIs generate the projected paths and coordinate grid.

Apr 13, 2026

Loading thumbnail…

Tree hierarchy

This example visualizes a social network graph with six person nodes and seven friendship links using a force-directed layout. The D3.js force simulation (`d3.forceSimulation`) positions nodes in an SVG canvas, applying link, charge, and centering forces to arrange connections naturally. Each node is rendered as a colored circle with an adjacent text label, while lines represent relationships. Users can drag nodes via `d3.drag`, which temporarily fixes their positions during interaction, and the simulation updates positions on each tick event.

Apr 13, 2026

Loading thumbnail…

Vinay world map

This example displays a choropleth-style map of the United States using SVG paths. The map renders all states from TopoJSON data loaded from the us-atlas package, with each state filled by an orange color scale indexed by its position in the dataset. It uses d3.geoAlbersUsa for the projection and d3.geoPath to draw boundaries. The visualization includes hover tooltips via appended title elements, though the tooltip text is static.

Apr 13, 2026

Loading thumbnail…

Fork of Vinay Question 4

This example displays monthly sales data as a light-blue area chart with an overlaid blue line. It uses D3 v7 to construct a point scale for the months and a linear scale for sales values, then applies the `d3.area` and `d3.line` generators to create the paths. The React starter HTML page renders the visualization as SVG, with axes added via `d3.axisBottom` and `d3.axisLeft`, and text labels for both dimensions. The hardcoded dataset spans January through August with sales increasing from 200 to 750.

Mar 27, 2026

Loading thumbnail…

Fork of Fork of Fork of Vinay Question 4

This example shows monthly sales data as a filled area chart, with a light blue region rising across eight months from January to August. It renders in SVG via D3 v7 inside a React application, using `d3.area()` with `d3.scalePoint()` for the x-axis months and `d3.scaleLinear()` for the y-axis sales values. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and text labels for “Months” and “Sales” are appended directly.

Mar 27, 2026

Loading thumbnail…

Fork of Fork of Vinay Question 3

This example displays a line chart of monthly sales data from January through August. The visualization uses D3.js version 7 within a React application, rendering to an SVG canvas. The chart plots sales figures on a linear y-axis scale from 0 to 800, using a point scale for months, and includes labeled axes. Red circles mark each data point at their corresponding coordinates. The code leverages D3's `scalePoint`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` functions to construct the visualization.

Mar 27, 2026

Loading thumbnail…

Fork of Vinay QUestion 2

A D3.js pie chart visualizes sales distribution across four product categories—Books, Electronics, Clothing, and Groceries—using hardcoded data. The chart renders as an SVG with colored arcs generated via d3.pie and d3.arc, applying a category-10 color scale. Each slice displays its category name positioned using arc.centroid, with a heading added above the visualization. Built with React, the example demonstrates basic pie-chart construction without interactivity.

Mar 27, 2026

Loading thumbnail…

Vinay Assignment7

This example displays a scatterplot of study hours against test scores, using eight data points from a small dataset. It renders blue circles positioned by linear scales for the x- and y-axes, with axis labels for “Hours Studied” and “Score.” The visualization is built with D3 v7, appending SVG elements directly to the body, and uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart.

Mar 27, 2026

Loading thumbnail…

vinay Task 3 Multi-Series Line Chart

This multi-series line chart from D3 v7 shows smoothed trends for study time, absences, and GPA over the first 200 student records, with each metric normalized and scaled for comparison. The chart uses a 12-point rolling average to reduce noise, with lines rendered via `d3.line` and `curveMonotoneX`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while a custom legend identifies each series. Data comes from a TSV file loaded via `d3.tsv`, and the visualization is built using React with SVG rendering.

Mar 9, 2026

Loading thumbnail…

Vinay combined chart

This combined chart displays average study time as bars on a left axis and average absences as a line with points on a right axis, across 10 student groups from a TSV dataset. The visualization uses React with D3 v7 to render SVG elements, employing `d3.scaleBand` for the x-axis, dual `d3.scaleLinear` scales, and `d3.line` with `curveMonotoneX` for the trend line. Data is aggregated into groups of 20 students using `d3.mean`.

Mar 9, 2026

Loading thumbnail…

Vinay Task 3 Multi-Series Line Chart

This example shows a combined bar and multi-series line chart comparing average study time and absences across 20 student groups derived from a Student Performance dataset. The visualization pairs steelblue bars for study time on a left y-axis with a crimson monotone line and points for absences on a right y-axis. Built with React and D3 v7, the SVG chart uses d3.tsv for data loading, d3.scaleBand and d3.scaleLinear for scaling, d3.line with d3.curveMonotoneX for the line, and d3.axisLeft, d3.axisRight, and d3.axisBottom for gridlines and tick marks.

Mar 9, 2026

Loading thumbnail…

Vinay Task 2

This scatterplot visualizes the relationship between petal length and petal width in the Iris dataset. Each purple circle represents a flower, with positions mapped by D3 linear scales on both axes. The visualization is built using React to manage the component lifecycle, while D3 v7 handles SVG rendering, axis generation, and data loading via `d3.tsv` from a GitHub gist. The chart includes labeled axes and a bold title, with circles styled with semi-transparency to reveal overlapping data points.

Mar 8, 2026

Loading thumbnail…

Vinay Task 1

This example shows total sales aggregated by product category as a bar chart, with steelblue bars and labeled axes. It loads tabular data from a GitHub Gist using d3.tsv, aggregates values with d3.rollup and d3.sum, and renders static SVG via React’s useRef hook. The chart uses d3.scaleBand for categories and d3.scaleLinear for the sales axis, with d3.axisBottom and d3.axisLeft providing tick marks.

Mar 8, 2026

Loading thumbnail…

Vinay Task

This example uses a scatterplot to explore the relationship between petal length and petal width in the Iris dataset. It loads the data via `d3.tsv`, converts the numeric fields, and renders purple circles through the SVG-based D3 API. The chart uses `d3.scaleLinear` to map the continuous variables to the plotting area and displays them with `d3.axisBottom` and `d3.axisLeft`. Both axes are labeled, and a bold title describes the plot’s purpose. The visualization is built with React, which manages the container element, while D3 handles the SVG drawing.

Mar 8, 2026

Loading thumbnail…

Fork of Vinay

A scatterplot shows the relationship between petal length and petal width for the Iris dataset, with each point colored purple and partially transparent. Built with React and D3 v7, the code loads tab-separated data via `d3.tsv`, then uses `d3.scaleLinear` and `d3.extent` to map values, `d3.axisBottom` and `d3.axisLeft` for axes, and appends SVG circles with x/y coordinates derived from the scaled data.

Mar 8, 2026

Loading thumbnail…

Vinay

A purple scatterplot displays the relationship between petal length and petal width for the Iris dataset. Each circle represents a sample, with axes labeled and a bold title. The code uses React and D3 v7 to fetch TSV data, parse numeric values, and render SVG circles via `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`.

Mar 8, 2026

Loading thumbnail…

vinay

This interactive scatter plot visualizes the Iris dataset, comparing sepal length and width across three iris species, with points colored by species and a legend that filters the data on hover. The visualization uses D3.js APIs including `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render axes, scales, and circles, while the `ResizeObserver` enables responsive layout. The data is loaded directly from a CSV file via `d3.csv`, and the chart employs a custom BBC-style color theme defined in the theme configuration.

Mar 8, 2026

Loading thumbnail…

Vinay Netflix Movies Per Year

A bar chart displays the number of Netflix movies released per year, with a hover effect highlighting individual bars. The visualization filters a CSV dataset to movies only, counts titles by release year using `d3.rollup`, and renders the result as an SVG with `d3.scaleBand` and `d3.scaleLinear`. Axis ticks are thinned via `tickValues` to avoid crowding, and a summary line reports the total movie count. The code uses `d3.csv` to load data from a GitHub Gist and D3 v7 for all chart construction.

Mar 2, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a minimal integration of React and D3.js, displaying the text "Hello D3 & React" as a static message. The code uses React's `useRef` and `useEffect` hooks to manage a DOM reference, and D3's `select` function to set the text content of the referenced element. The application is rendered to the DOM via React DOM's `createRoot` and a root component. The example relies on an import map loading React 19, React DOM, and D3 v7 as JavaScript modules.

Mar 2, 2026