V

VAbhiram99

@VAbhiram99·43 public vizzes

Loading thumbnail…

ICE 8 social Network graphic

This force-directed network graphic maps a small social graph of seven named individuals, with node size and link thickness encoding relationship weight from a JSON file. Built using `d3.layout.force`, it applies gravity, charge, and distance parameters to position nodes, rendering them as orange SVG circles with labeled text and black links. Users can drag nodes interactively via `force.drag`, while the tick handler updates link coordinates and node transforms. The visualization highlights the connections between V.V.R Narsaiah and his network, using `Math.sqrt(d.weight)` for stroke-width to show stronger ties like the repeated Rocky links.

Loading thumbnail…

MY Tree ICE-8

This interactive family tree displays four generations of a single lineage, using a collapsible node layout. The chart renders as an SVG with animated transitions, where nodes are colored cyan with red outlines and connected by light blue links. The visualization is built with D3.js, employing the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the tree structure and draw the connecting paths. Clicking a node triggers a collapse or expand animation via the `transition` methods, adjusting the layout dynamically.

Loading thumbnail…

Mexico map

A choropleth-style map of Mexico's regions rendered as SVG paths using a Mercator projection, with each state outlined in yellow against a blue graticule grid. The visualization loads geographic data from a TopoJSON file hosted as a GitHub gist, processed with the `topojson.feature` API, while D3's `geoPath` and `geoMercator` handle the projection and path generation. The React component fetches the data asynchronously and displays a loading message until the map is ready, with styled fill and stroke colors applied via CSS classes.

Loading thumbnail…

World map cities & countries population

This visualization presents a global map depicting both country-level population and major city populations. It uses a natural Earth projection, which can be rotated through a spin parameter. Country population density is encoded through fill opacity, while city population determines circle size using a square root scale. The map renders SVG elements via React, using d3-geoPath for geographic features, d3-geo-projection for the projection, and TopoJSON loaded from world-atlas. Hovering reveals country names and formatted population values, with cities also displaying their populations. Data comes from CSV sources for cities and country populations.

Loading thumbnail…

Fork of Portland Map

This map visualizes Portland neighborhoods using a conic equal-area projection, rendering geographic boundaries as SVG paths from a TopoJSON dataset. The code leverages D3’s `geoConicEqualArea` and `geoPath` for projection and path generation, with React managing the component structure. The dataset is loaded via `d3.json` from a GitHub gist, and the resulting paths are styled with a teal stroke, displaying the city’s neighborhood outlines without additional thematic encoding.

Loading thumbnail…

Fork of World_Map_ICE_8

This is a world map visualization rendered with SVG, depicting country borders and interior boundaries. The map uses an Eckert III projection, with landmasses filled in a light purple and graticules drawn in blue. It displays countries from the world-atlas TopoJSON dataset, with internal boundaries between countries highlighted in red. The visualization is built using React and D3, employing `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic projections and path rendering, while `topojson.feature` and `topojson.mesh` process the spatial data.

Loading thumbnail…

Fork of 2015 Internet Users World Map

This map visualizes internet users per 100 people in 2015 across countries, using a green color scale to indicate adoption rates and a legend for reference. Hovering over a country reveals its exact percentage, while zooming allows closer inspection of regions. The visualization loads geographic data from a TopoJSON world atlas and uses d3.geoPath, d3.geoNaturalEarth1, and d3.zoom for rendering and interaction, with country data drawn from a CSV dataset.

Loading thumbnail…

Fork of Pie Chart

This visualization displays the top 10 countries by total non-renewable energy generation (in TWh) during COVID, using a pie chart with a legend listing each country and its corresponding generation value. The chart uses d3.pie, d3.arc, and d3.scaleOrdinal with schemeCategory10 for coloring. It loads CSV data from a GitHub gist via d3.csv, sorts the data descending, and renders SVG paths for slices. Mouseover events log the data to console, while legend entries combine rects and text elements.

Loading thumbnail…

Pie Chart

This pie chart displays renewable energy generation from solar photovoltaics for the top ten countries during the COVID-19 period, with each slice representing a country’s output in terawatt-hours. The chart uses d3.pie and d3.arc to compute and draw the SVG paths, while d3.scaleOrdinal with schemeCategory10 provides the slice colors. A legend lists country names and corresponding values, formatted with a custom number format. Data is loaded as CSV from a GitHub gist, sorted descending, and rendered with React integration.

Loading thumbnail…

HYDRO ENERGY GENERATION

This visualization displays global hydro energy generation (in Terawatt-hours) across multiple years, using a smooth blue line plot to trace the trend over time. The chart renders as an SVG using D3 v5, explicitly importing functions like `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` smoothing applied. Data is loaded from a GitHub gist CSV via `csv()`, with numeric fields parsed before drawing. The visualization includes labeled axes for “Year” and “Hydro_TWh,” plus a title, all styled through an external CSS file that sets the line’s blue color and stroke width.

Loading thumbnail…

Bar Chart of Netflix stock data

This bar chart visualizes Netflix stock closing prices over time, with each bar representing a trading day and its height corresponding to the closing value. The chart uses a black fill for bars against a white background, with date labels rotated vertically along the x-axis for readability. Built with React and D3 v7, the visualization loads CSV data from a GitHub gist and renders an SVG using d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft for tick marks.

Loading thumbnail…

Fork of Bar Chart of Netflix stock data

This interactive bar chart visualizes Netflix stock opening prices over time, displaying the Open value for each trading date as a green bar. The visualization uses D3.js v7 to load CSV data from a GitHub Gist and construct an SVG chart with a rotated bottom axis for date labels and a linear scale for price values. While the page includes the React libraries, the chart itself is rendered entirely through D3's core APIs, including `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`.

Loading thumbnail…

Fork of Line_Stroke_Death

This line chart visualizes the closing price of Netflix stock over time, using a smooth curved line rendered in an SVG element. The chart is built with D3.js, employing `scaleLinear` for both axes, `extent` to compute domains, and `line` with `curveBasis` for the smoothed path. Data is loaded via `csv` from a GitHub gist containing historical stock data. The visualization includes labeled X and Y axes, a title, and horizontal gridlines with tick marks extending across the plot area.

Loading thumbnail…

Pie Chart

This pie chart displays survey data on time spent on self-study by students during COVID-19, with each slice representing a different age group and its corresponding study hours. The visualization uses d3.pie and d3.arc to generate the chart, d3.scaleOrdinal with schemeCategory10 for slice coloring, and appends SVG paths to the rendered DOM. A legend with color swatches and labels is constructed using D3 selections, while the data is loaded via d3.csv from a GitHub gist and sorted by study time before rendering.

Loading thumbnail…

Covid-19 Scatter Plot

This scatter plot visualizes the relationship between the percentage of working hours lost and the number of employed males aged 25 or older in 2019 across different countries, with each circle’s size varying by total weekly hours worked and color-coded by country. The visualization is built with React and D3 v5, using `d3.csv` to load data from a remote Gist URL, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for axis rendering. Points are drawn as SVG circles via the `join` operation, with a fixed radius of 5 pixels, while axis labels and a title are added as SVG text elements.

Loading thumbnail…

male working during covid Bar Graph

This bar graph shows the impact of COVID-19 on male employment rates across ten countries, comparing 2019 employment figures for men aged 25 and older. The visualization uses a horizontal bar chart with countries listed along the y-axis and employment percentages along the x-axis. Built with React and d3.v5, the code loads data from a CSV file using d3.csv and renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. Red gridlines mark tick values on the linear x-axis, while country labels appear beside each bar.

Loading thumbnail…

female lost working during covid Bar Graph

This bar chart visualizes the impact of COVID-19 on female employment by showing the number of employed women aged 25 and older in 2019 for ten countries. The code uses React with a D3.js v5 CSV data loader, mapping each country to a horizontal bar whose length reflects the employment figure. The visualization is rendered as an SVG, with D3’s `scaleBand` and `scaleLinear` handling the axes and bar dimensions, and tick marks drawn manually from the x-scale.

Loading thumbnail…

Impact of Covid-19 on Employment Bar Graph

A horizontal bar chart shows the percentage of working hours lost per week (relative to a 40-hour baseline) across 14 countries during the Covid-19 pandemic. The visualization uses React with D3 v5 APIs, including `scaleBand` for the categorical country axis, `scaleLinear` for the numerical percentage axis, and `csv` to load remote employment data. Each country’s bar is rendered as an SVG `rect`, with red tick lines and axis labels drawn manually. The chart communicates relative economic disruption by sorting countries from largest to smallest percentage loss.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, showing flipper length against body mass for individual penguins, with each point colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap). The visualization also encodes bill length and depth as the x and y radii of each circular mark, creating variable-sized points. Built with D3 v5 and React, the code uses `d3.csv` to load the dataset, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes with custom styling.

Loading thumbnail…

Per capita for AFG during covid Area Chart

This area chart visualizes Afghanistan's GDP per capita during the COVID-19 pandemic, with dates on the x-axis and economic output on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `line` and `area` generators with `curveBasis` draw the smoothed time-series trend. The SVG rendering is driven by a React framework, and data is loaded from a remote CSV containing global pandemic economic indicators.

Loading thumbnail…

Per capita for AFG during covid

This chart displays the change in GDP per capita for Afghanistan over time during the COVID-19 pandemic. A black line traces the trend, with the date on the x-axis and the GDP per capita value on the y-axis. The visualization is built with D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.line` for the path, and `d3.csv` to load the remote data. The SVG output includes labeled axes and a grid, with the line path styled through the `line_path` class.

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

This line chart displays cumulative COVID-19 death totals over time, using a linear y-axis scale to show the raw increase in deaths. The React component renders an SVG with D3 v5's `scaleTime` and `scaleLinear` to map dates and totals, while `d3.line` generates the path. Grid lines from `axisBottom` and `axisLeft` provide reference points, with data sourced from the Johns Hopkins Coronavirus Dataset. The chart fills the viewport and includes marker lines for highlighting specific values, though no interactive features are implemented.

Loading thumbnail…

Fork of 3D Scatter Plot

This fork displays two 3D scatter plots of the Iris dataset, showing sepal length, sepal width, and petal length in one trace, and sepal length, sepal width, and petal width in another, using gray and translucent markers. The code loads the CSV data with `d3.csv` and renders the interactive chart via the Plotly `Plotly.newPlot` API, setting marker size, opacity, and line styling for each `scatter3d` trace.

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes car manufacturer sales data as an interactive 3D bar chart, with each manufacturer displayed as a grouped series of bars representing monthly sales figures from January through June. The chart uses the d3-x3d library to render the scene in X3DOM, while D3.js v5 handles data loading via `d3.csv` and parsing of the raw CSV file. The `d3.x3d.chart.barChartMultiSeries` component generates the 3D visualization, and the page loads all required libraries from CDNs, including d3-3d and the X3DOM runtime.

Loading thumbnail…

Bonus ICE for Scatter plot using D3.js

This example visualizes penguin species measurements using two interactive 3D scatter plots rendered with Plotly, where the first trace plots bill length, bill depth, and body mass, and the second shows flipper length, sex, and island. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and each trace uses `scatter3d` markers with distinct styling. The layout margins are zeroed for a clean presentation, and both traces are combined into a single Plotly chart drawn inside a designated HTML `div` using `Plotly.newPlot`.

Loading thumbnail…

3D Scatter Plot with Plotly.js

Two 3D scatter plots render inside a single Plotly.js chart on a web page. The first trace plots bill length, bill depth, and flipper length from a remote CSV loaded with `d3.csv`, styling markers with semi-transparent gray lines. The second trace plots flipper length, body mass, and sex, using solid gray circles with darker borders. The `scatter3d` trace type and `Plotly.newPlot` API generate the interactive three-dimensional visualization, with margins collapsed to zero via the layout object.

Loading thumbnail…

Untitled

This example shows a 3D bar chart with five categories (A–E) and values from 10 to 50, rendered as skewed, prism-like paths using D3 v5 and the d3-3d plugin. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis and depth, and builds each bar’s SVG path manually with 3D coordinates. Hovering over a bar reveals its value in a tooltip, and clicking toggles a selected state, though the fill change is incomplete.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This 3D vertical bar chart visualizes download counts for popular apps across six different sources, using a Highcharts column chart with the Highcharts 3D extension. Each app category on the x-axis displays six grouped, stacked bars, one for each download source, with the total downloads on the y-axis and source labels on the z-axis. The chart employs `options3d` with specified `alpha`, `beta`, and `depth` settings to create the 3D perspective, while `plotOptions.column` controls the bar depth, stacking, and group padding. The data is provided as hardcoded arrays within the JavaScript, representing downloads from app stores like the Play Store and various other named sources.

Loading thumbnail…

Car Sales

This chart displays total car sales from 2013 to 2023 as a single green line. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generators to render axes and the path onto an SVG canvas. The data is loaded from a CSV via `d3.csv`, with dates parsed using `d3.timeParse`. Grid lines from tick marks and rotated axis labels clarify the temporal trend.

Loading thumbnail…

Pie Chart

This pie chart visualizes the basic monthly Netflix subscription cost across twelve countries, using D3 v5's `pie` and `arc` functions to generate the SVG segments and a categorical color scale (`scaleOrdinal` with `schemeCategory10`) to distinguish each nation. Slices are sorted by cost, and an interactive legend, built with `selectAll` and appended SVG `rect` and `text` elements, displays each country’s name and price in dollars. The data is loaded from a CSV file hosted on a GitHub gist, and mouseover events log the corresponding cost to the console.

Loading thumbnail…

Reusable ICE-7 ScatterPlot

This interactive scatterplot visualizes the Palmer Archipelago penguin dataset, plotting body mass against bill length, then automatically cycles through other numerical attributes every two seconds. Built with D3.js, it uses a reusable `scatterPlot` component that binds scales, axes, and circles, updating the plot via a `setInterval` loop. The SVG rendering, styled with the Share Tech font, smoothly transitions the x-axis and data points as the selected column changes, demonstrating a flexible, variable-driven plotting approach.

Loading thumbnail…

Area Chart

This area chart displays car sales totals from 2013 to 2023, with a green filled region beneath a thick black curved line. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` with `d3.curveBasis` to generate the smoothed area. Data is loaded from a CSV file via `d3.csv`, while `d3.axisLeft` and `d3.axisBottom` render labeled axes with tick marks.

Loading thumbnail…

Fork of Line_Stroke_Death

This line chart visualizes the average life expectancy over time, plotting yearly data points connected by a smooth curved line. The chart uses D3 v5 APIs including `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, `line`, and `curveBasis` to render an SVG with labeled axes and a thick green stroke. The data is loaded from a CSV file hosted on GitHub, and the visualization includes grid lines and a rotated y-axis label.

Loading thumbnail…

Bar Graph

This example shows the ratings of the top 20 ramen varieties by country, displayed as a horizontal bar graph. Each bar’s length encodes the ramen’s star rating, with country names on the y-axis and the rating scale on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions handle data loading and scaling. The data comes from a remote CSV file, and the chart includes gridlines and axis ticks generated from D3’s scale methods.

Loading thumbnail…

Penguin scatter Plot

This example shows a scatter plot of penguin measurements, with flipper length on the x-axis and body mass on the y-axis, colored by species (Adelie, Gentoo, and Chinstrap). It uses D3 v5 to fetch CSV data from a GitHub gist, parse it, and render SVG circles scaled by bill length and depth within each circle's radius. The plot includes axis labels and a title, with axes generated via `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Bargraph

This bar chart visualizes employee salary against years of experience using React and D3 v5. The code fetches salary data from a CSV file via `d3.csv`, samples the first 15 records, and renders an SVG with `scaleBand` for the categorical y-axis and `scaleLinear` for the salary x-axis. Gridlines, axis ticks, and rectangles for bars are drawn directly in the SVG, produced by React components.

Loading thumbnail…

ICE-6

The visualization displays the Iris plant dataset, plotting petal length on the x-axis against petal width on the y-axis, with each point colored by species (blue for setosa, yellow for versicolor, red for virginica). It uses d3.csv to load the data, d3.scaleLinear for axis scaling, and d3.axisLeft/axisBottom to render axes. Circle marks are drawn via SVG, with radii fixed at 5 pixels, while the code also assigns unused `rx` and `ry` attributes from sepal measurements. The chart is rendered using D3 v6.7.0 with an SVG output.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This chart displays the basic monthly cost of Netflix in fifteen countries using a horizontal bar chart rendered as SVG. The visualization combines React for component state and rendering with D3 version 5 for data loading, scales, and layout. Bars are drawn with `scaleLinear` for the cost axis and `scaleBand` for country categories, while manually constructed gridlines and text labels replace D3’s axis components, and the data comes from a CSV file loaded via `d3.csv`. React’s `useState` and `useEffect` manage the asynchronous data fetching.

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a minimal React and D3.js visualization starter template. It establishes an SVG canvas with a configurable margin convention, rendering gray outer and inner rectangles to visualize the chart’s layout boundaries. The code defines a reusable `VizContainer` component that abstracts the SVG and group elements, accepting props for dimensions and margins. Using React 16.13.1 and D3 v6 via CDN, it provides a clean foundation for building custom charts, with a `showMargins` prop to toggle the visual guides.

Loading thumbnail…

Assignment ICE-5

This example displays a static image of a scenic landscape, rendered as an SVG pattern fill within a rectangular canvas. The code embeds a base64-encoded JPEG directly into the SVG definition, using the `<pattern>` and `<image>` elements to map the picture onto the full viewport. The page uses D3 v5 for potential data binding and manipulation, though the visible output relies entirely on the static SVG structure. Styled with CSS for centered layout and an azure background, the visualization demonstrates how external images can be integrated into SVG-based React environments.

Loading thumbnail…

Reflection of Buddha

A generative Buddha image emerges from overlapping semi-transparent circles, with randomized positions and colors creating a textural portrait. The rendering uses React and ReactDOM to construct an SVG canvas, mapping nested arrays to produce thousands of circles. A single vector path defines the Buddha's silhouette, scaled and translated into the composition. The project runs on React 16.10.0 with SVG output, blending procedural randomness with a fixed spiritual icon.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Randomly positioned translucent circles, rendered via React and SVG, are scattered across a black background. Overlaid on top of this is a single intricate SVG path depicting a Buddha figure, drawn in a gradient-like multicolor stroke. The path data is defined inline, and the visualization relies on React's component structure and SVG rendering, with no external data source or interaction logic present.

Loading thumbnail…

Fork of Buddha in colors -overlapping Buddha

A colorful, abstract visualization of overlapping Buddha forms presents a dense cluster of semi-transparent circles layered over detailed SVG path data. The circles, rendered with randomized positions, colors, and opacity, create a chaotic, generative backdrop against the intricate line work of the Buddha figure. Built with React and SVG, the visualization uses React’s component structure to map over arrays and generate circle elements dynamically. The code employs nested `map` functions to produce 8000 circles, each with properties derived from JavaScript’s `Math.random`, while the Buddha path is embedded as raw SVG coordinates.