G

Gogineni44

@Gogineni44·96 public vizzes

Loading thumbnail…

Tesla Visualization

This visualization gallery presents a stock market analysis hub with buttons linking to Tesla, Bitcoin, Nikkei, and Crude Oil dashboards. The Tesla page uses plain HTML buttons to navigate to separate analysis tools built with Tableau, Python, and D3. The main gallery page uses a background image and styled buttons for navigation. The D3 component would employ JavaScript data-binding and SVG rendering for interactive charts, though the linked files are not included in this snippet. The interface uses inline CSS for styling with a dark, image-backed aesthetic.

Loading thumbnail…

Telsa Visualizations

This gallery presents a data-visualization project centered on Tesla, offering a hub of buttons that link out to different visualization frameworks. The main page uses a background image of charts and simple HTML/CSS for styling and navigation. The code provides direct access to separate visualization implementations built with Tableau, Python, and D3, though the specific content of those linked pages is not shown here. The interface itself is built with standard JavaScript and CSS, enabling user interaction to switch between the different visualization tools.

Loading thumbnail…

Tesla Line Plot

This example shows the daily low stock price of Tesla over time as a single steelblue line, with date on the x-axis and low price on the y-axis. The visualization uses React for the component structure and D3 v7 to create a time-scale and linear-scale, draw the line with `d3.line`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The SVG output is produced inside a margin-convention container, and the data is loaded from a CSV file.

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart displays the "Low" cost of sales from 2000 to 2013, plotting date on the x-axis and the low value on the y-axis. It uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render the SVG visualization. The data is loaded via `csv` from a GitHub gist, with the y-axis range set from zero to the maximum low value.

Loading thumbnail…

Brazil Map

This example displays a zoomable map of Brazil, with each state drawn as a gold polygon outlined in black that turns maroon on hover. The visualization uses D3's `geoTransverseMercator` projection with `d3.geoPath` to render geographic features, and applies a zoom behavior that transforms a group element containing the map. State names come from GeoJSON data loaded from a remote repository, with tooltips provided via appended `title` elements. The map also relies on `d3-geo-projection` for the projection and TopoJSON utilities for feature extraction.

Loading thumbnail…

Fork of India Map

This visualization displays a choropleth map of India with its districts and states, rendered using the Mercator projection and geographic path generation. It overlays district boundaries colored by state using `d3.scaleOrdinal` with `schemeCategory10`, while state borders are stroked in black, and hovering highlights districts in dark blue. The map supports interactive zooming via `d3.zoom`, with district and state data loaded from GeoJSON and TopoJSON sources, and uses SVG paths for rendering.

Loading thumbnail…

Fork of Bulgaria map

This example displays a choropleth-style map of Bulgaria, rendered as green landmasses with yellow borders over a graticule grid and blue background. Built with React and D3 v6, it uses `geoMercator` projection and `geoPath` to draw the geographic features, while `geoGraticule` generates the latitude and longitude lines. The map data is loaded from a remote GeoJSON file via `d3.json` and processed with topojson's `feature` method. Color styling is applied through CSS classes, with gray indicating missing data regions.

Loading thumbnail…

Fork of Fork of Nikita's USA Country Map

This example displays a choropleth-style map of the United States, showing all 50 states filled in blue with black state borders. The visualization uses React with D3 v5’s `geoPath` and the `geoAlbersUsaTerritories` projection to render geographic features from TopoJSON data sourced from a VizHub URL. State boundaries are drawn using TopoJSON’s `mesh` function. Hovering over any state highlights it in purple via CSS `:hover` styling, while the SVG is rendered at 900×700 pixels.

Loading thumbnail…

Fork of Mexico map

This example displays a choropleth map of Mexico rendered in SVG, with country regions filled in green and outlined in yellow, overlaid with blue graticule grid lines. It uses a Mercator projection configured with a center point over Mexico. The visualization loads TopoJSON data from a provided URL and converts it to GeoJSON using the `topojson.feature` API. The map is built with React for UI management, while d3-geo's `geoPath` generates the SVG paths for each region.

Loading thumbnail…

World Map ICE -8

This example displays a world map with countries rendered in pink against a green ocean, highlighting each nation with a white border. When hovered over, individual countries turn yellow. The visualization uses D3 v5 and TopoJSON to load country boundaries from a world-atlas GeoJSON dataset, projecting them with d3.geoEquirectangular and drawing the paths as SVG elements. The map's background sphere and country outlines are styled using simple CSS rules.

Loading thumbnail…

Canada Map

This example displays a static choropleth map of Canada rendered as SVG paths. It loads GeoJSON data from `canada.json` and uses `topojson.feature` to convert the TopoJSON collection. A Mercator projection (`d3.geoMercator`) centers the country, with `d3.geoPath` generating the path data for each province. The map applies a uniform gray fill and dark strokes, using D3 v7 with a standard SVG element.

Loading thumbnail…

Fork of World_Map_ICE_8

This visualization presents a world map using the Natural Earth dataset, rendered with D3's geographic projections and React. It displays landmasses in purple, interior boundaries in red, and graticules in blue over a white sphere. The code utilizes D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions alongside topojson's `feature` and `mesh` methods, with data loaded from the `world-atlas` package via D3's `json` utility.

Loading thumbnail…

Fork of World_Map_ICE_8

This visualization presents a world map using the Natural Earth dataset, rendered with D3's geographic projections and React. It displays landmasses in purple, interior boundaries in red, and graticules in blue over a white sphere. The code utilizes D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions alongside topojson's `feature` and `mesh` methods, with data loaded from the `world-atlas` package via D3's `json` utility.

Loading thumbnail…

Networks

This network visualization uses d3.layout.force to simulate a force-directed graph, displaying nine nodes and eight weighted links from graph.json. Nodes appear as grey circles with gold borders and red labels, while link thickness reflects edge weight. The SVG elements update position on each force tick, and nodes are interactive via d3.force.drag. The example demonstrates basic force layout mechanics with custom styling.

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

A social network graph displays nine named people as blue circles with red labels, connected by weighted black lines. The visualization uses the D3.js v4 library with the `d3.layout.force()` API to apply a force-directed layout, positioning nodes based on simulated physical forces with gravity, charge, and distance parameters. Circle radius is fixed, while link stroke-width reflects each connection's weight value from the JSON data source. The graph renders as an SVG element, and nodes are draggable, with their positions updated on each tick of the force simulation.

Loading thumbnail…

GOGINENI's Tree ICE-8

This interactive tree diagram maps software technologies and related developer roles, using colored nodes and red links to show hierarchies from a root "Software Technologies" category down to specific job titles. Built with D3.js (version 3.5.17), it uses `d3.layout.tree` and `d3.svg.diagonal` to compute positions and draw curved paths, with animated transitions triggered by clicking nodes. The SVG rendering applies CSS styling for node strokes and background, while node expansion and collapse are handled through click events and `_children` toggling. The static dataset is embedded directly in the HTML.

Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This interactive family-tree visualization uses D3.js v3 with an animated, expandable node-link diagram. It displays a hierarchical dataset of animal classifications and family member names, rendered as colored rectangles connected by curved links. The tree layout algorithm, `d3.layout.tree`, computes node positions, while custom SVG elements and CSS styling via `tree-boxes.css` create the visual presentation. The implementation includes zoom and drag behavior, tooltips, and collision detection to manage overlapping nodes.

Loading thumbnail…

Fork of ICE - 8: Visualizing Tree

This interactive tree diagram visualizes the hierarchical ownership structure of major car companies, from the root "Car Company" down to subsidiaries like Audi and Lamborghini. Built with React and D3.js, the visualization uses an SVG rendering with animated node expansion. The code defines a tree layout using `d3.layout.tree()` and draws connections with `d3.svg.diagonal()`, while CSS styles the nodes and links. The underlying data is a static JavaScript array of nested objects representing the corporate hierarchy.

Loading thumbnail…

Fork of Anv_ICE8_Argentina_(Topojson)

This example displays a map of Argentina’s departments and provinces using a Transverse Mercator projection. The visualization colors each department in bright green, with provinces highlighted on hover, and renders the ocean in blue as a background sphere. Built with D3, it uses `d3.geoTransverseMercator` for the projection and `d3.geoPath` to draw the shapes. Data comes from a remote GeoJSON file, which is fetched via `d3.json` and processed with `topojson.feature`.

Loading thumbnail…

Fork of World_Map_ICE_8

This visualization presents a world map using the Natural Earth dataset, rendered with D3's geographic projections and React. It displays landmasses in purple, interior boundaries in red, and graticules in blue over a white sphere. The code utilizes D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions alongside topojson's `feature` and `mesh` methods, with data loaded from the `world-atlas` package via D3's `json` utility.

Loading thumbnail…

Fork of ICE 08 11540905 India Map

This visualization displays a choropleth map of Indian states, with each state filled by a distinct color from a categorical scale and labeled with its name. The map uses a Mercator projection customized through translation and scaling to center on India. Built with React and D3 v5, the code loads TopoJSON data representing India’s administrative regions, converts it to GeoJSON using `feature`, and renders paths via `d3.geoPath`. State names are positioned using `pathGenerator.centroid`, and hover effects change fill color to wheat.

Loading thumbnail…

World Map ICE-8

This interactive world map visualizes countries in blue on a light green background, with borders highlighted in black and a white hover effect. Built with D3.js (v5) and the TopoJSON package, it uses the geoEquirectangular projection and geoPath to render GeoJSON features derived from the world-atlas countries-110m dataset. The SVG rendering responds to mouseover events, changing each country's fill to white.

Loading thumbnail…

Fork of Europe Map ICE8

This example displays a map of Europe as a set of white, grey-outlined SVG paths. A Mercator projection centered on the continent shapes the geographic regions from a remote GeoJSON file. The visualization uses D3.js v5, employing the `d3.geoMercator` and `d3.geoPath` APIs within a React framework to render each feature. Geographic data is fetched asynchronously via `d3.json`, and the resulting paths are drawn on a 600 by 500 pixel canvas.

Loading thumbnail…

Fork of ICE-8 INDIA

This visualization presents a zoomable and pannable map of Australia, rendered as a collection of colored district and state boundary paths. The map initially centers on India using a Mercator projection, but a mouse-drag interaction allows users to rotate the globe orthographically, revealing other regions. The project implements these interactions using the `d3.drag` and `d3.zoom` APIs, updating paths via `d3.geoPath` with the changing projection. It loads geographic data from GeoJSON files and employs a `d3.scaleOrdinal` color scheme, with a hover effect turning districts black.

Loading thumbnail…

Fork of Europe Map ICE8

This example renders a static map of Europe using D3.js and React, displaying geographic boundaries as SVG paths. The visualization employs a Mercator projection centered on latitude 13 and longitude 52, with paths generated via `d3.geoPath`. GeoJSON features are fetched from a remote URL and styled with grey strokes and white fills. The code references React 16.9.0, D3 v5, and TopoJSON, though it appears incomplete, as it mistakenly defines a `LondonProjection` and loads data from a CSV URL that may not provide valid GeoJSON.

Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive map visualization displays global country boundaries with multiple geographic projections, including mercator, orthographic, and Albers USA. Users can click any country to switch between orthographic and mercator views, while dragging rotates the globe and zooming scales the display. The visualization uses D3.js with d3.geoPath for rendering, d3.geoOrthographic and d3.geoMercator for projections, and topojson to parse world-atlas country data. SVG paths render countries with hover highlighting, graticule lines, and animated transitions (750ms) when switching projections.

Loading thumbnail…

Fork of Fork of Fork of Fork of ice8-vignesh

This interactive globe displays country boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` with an orthographic projection. Users can drag to rotate the globe, which adjusts the projection’s rotation, and scroll to zoom via `d3.zoom`. Clicking a country switches between the orthographic, Mercator, and Albers USA projections, with a transition applied through `transition().duration()`. A graticule layer is also drawn, and country names are loaded from a TSV file to trigger projection changes.

Loading thumbnail…

Fork of ICE 08 11540905

This example presents an interactive world map using a geographic projection. It displays countries as colored regions with a blue sphere background, and hovering over a country changes its fill to red. The visualization is built with D3 v5 and TopoJSON, using `d3.geoEquirectangular` for the projection and `d3.geoPath` to render the map. Country boundaries and shapes come from the world-atlas dataset (countries-110m.json), with SVG paths styled via CSS classes.

Loading thumbnail…

Fork of world map w/ cities & countries pop!

A world map visualization displays cities with populations over 50,000 as scaled circles, while country polygons are shaded by population density with hover tooltips. Using React with the d3-geo-projection library, it applies a natural Earth projection and renders graticules, geographic lines, and country boundaries via `geoPath`. City radii use a square-root scale based on population data from Simplemaps, while country opacity maps to UN population data from a CSV file.

Loading thumbnail…

Fork of 2015 Internet Users World Map

This world map shows the percentage of internet users per country in 2015, with data from a Kaggle dataset. Hovering over a country reveals its exact percentage in a tooltip, and users can zoom in and out using the mouse wheel. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render the map, while d3.scaleOrdinal and a color legend map internet usage ranges to greens. Zoom is implemented via d3.zoom.

Loading thumbnail…

Bar chart with D3.js

This bar chart displays survey results on the most loved programming languages in 2018, with each bar representing the percentage of respondents who favor a particular field. The visualization uses d3.scaleBand and d3.scaleLinear to position bars and axes, with SVG rendering and hover interactions that highlight differences between values. Hovering over a bar triggers a transition that adjusts opacity and width, draws a dashed limit line, and displays divergence percentages between the selected value and others. The chart includes horizontal grid lines, axis labels, and a title, with data sourced from Stack Overflow and animated transitions powered by D3's transition system.

Loading thumbnail…

Bar chart with D3.js

A bar chart ranks the "most loved" programming languages by percentage, from Rust at the top to Clojure at the bottom. Built with D3.js v5, it uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles. On mouse hover, the chart highlights the selected bar, draws a dashed threshold line with `line#limit`, and displays the percentage divergence of every other language from the hovered one. A dataset of ten languages is hardcoded in the JavaScript.

Loading thumbnail…

Untitled

This example displays a 3D scatter plot of car sales data, with month, number sold, and price plotted along the three axes. It renders two distinct marker traces, one with a default style and another with a grey color and circular symbols, allowing for comparison. The visualization is built using Plotly’s `newPlot` API, which draws the chart into a designated `div` within an HTML page. The data is loaded asynchronously via `d3.csv` from a remote CSV file, and rows are transformed into arrays using a custom `unpack` helper function.

Loading thumbnail…

Students data representation in - 3D Bar chart

This example visualizes student enrollment counts across seven university departments from 2018 to 2023 using a 3D stacked bar chart. The chart displays yearly data as grouped columns, with each year assigned a distinct stack, and the x-axis listing departments while the z-axis labels the department category. Built with Highcharts and the highcharts-3d module, the visualization enables the chart’s options3d settings (alpha, beta, and depth) to render the three-dimensional perspective. The data is hardcoded as arrays in the series configuration, with each series representing a year and its values mapped to department indices.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing total cars manufactured by seven automotive brands across two stacked series per category. Each brand is plotted along the z-axis, with bar height representing manufacturing totals for the x-axis categories. The chart uses Highcharts with the highcharts-3d module, enabling the chart’s options3d settings (alpha, beta, and depth) for perspective rotation. Data is hardcoded as arrays, with series stacked via the stacking and groupZPadding properties, while the background is styled pink via CSS.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing download counts for seven apps (Instagram, Facebook, WhatsApp, Telegram, Zoom, Messenger, Snapchat) across six different app stores, including App Store, Playstore, OneStore, Softonic, GalaxyStore, and VivoStore. The chart uses Highcharts with the highcharts-3d.js module to render grouped, non-stacked columns in a perspective view, with alpha and beta angles set for rotation. The zAxis labels the store sources, while the yAxis measures total downloads. Data is hardcoded as arrays in the series definitions, and jQuery initializes the chart within a container div.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This visualization displays multi-series bar chart data in 3D, comparing monthly values across different manufacturers. The code loads CSV data from a GitHub gist, parses it into key-value pairs, and renders it using the `d3-x3d` library, which combines D3.js v5 with X3DOM for WebGL-based 3D graphics. The chart derives its data from the `d3.x3d.barChartMultiSeries()` component and uses D3 scales like `scaleLinear` for axes, with axes generated via `axisLeft` and `axisBottom`. The example demonstrates how to integrate external CSV data into a pre-built 3D chart component.

Loading thumbnail…

Fork of Bar chart with D3.js

A horizontally oriented bar chart rendered with D3.js v5 and React visualizes the percentage distribution of car colors, loading sample data from a GitHub gist. The chart includes a y-axis grid, value labels, and a subtle animation on mouse hover. When hovering over a bar, the chart highlights it, draws a red dashed horizontal line, and computes and displays the percentage divergence of other bars relative to the selected one. The implementation uses `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and D3 transitions for the interactive effects.

Loading thumbnail…

Bar chart with D3.js

This bar chart displays the distribution of car colors as percentages, using a dataset from a GitHub gist. Built with D3.js v5 in a React component, it renders as an SVG with animated bar interactions. The `d3.scaleBand` and `d3.scaleLinear` functions handle the axes, while `d3.axisBottom` and `d3.axisLeft` create the ticks. Hovering over a bar triggers a transition that highlights the bar and draws a red dashed line, showing the hovered value’s position, with divergence text displayed via `d3.selectAll` and `.transition()`.

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the distribution of colors in a sample dataset, with each bar representing a color percentage and labeled with its value. The D3.js v5 example uses an SVG rendering approach with interactive hover effects that highlight the selected bar, display a red dashed threshold line, and show divergence percentages between the hovered color and others. Built with `d3.scaleBand` and `d3.scaleLinear` for axes, the chart includes grid lines, a title, and axis labels, with animations driven by `transition` for bar highlighting and opacity changes on mouse events.

Loading thumbnail…

3D Bar Chart using D3.js

This 3D bar chart visualizes car manufacturer data from the first six months using the d3-3d, d3-x3d, and X3DOM libraries, rendered as an interactive WebGL scene within a browser. The visualization displays monthly sales figures for multiple manufacturers as three-dimensional bars on an XZ axis plane, with a blue domain line marking the origin. D3.js v5 handles the data binding and scene construction, while X3DOM renders the 3D geometry, including cylinders for the axes and tick lines, directly in HTML5.

Loading thumbnail…

Bar chart with D3.js

This bar chart displays the most loved programming languages from the 2018 Stack Overflow survey, using D3.js v5 and React within an SVG. Animations respond to mouse hover, highlighting a bar and revealing percentage divergence for other languages relative to the selected one. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, and `transition.attr` for smooth opacity and position changes on interaction.

Loading thumbnail…

Fork of Fork of Area Death's

This area chart displays the number of deaths per year, with the x-axis representing years and the y-axis representing the death count. The chart uses a smooth curve to connect data points, rendered as an SVG with a yellow fill. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for labeled ticks. The data, sourced from a CSV file, is loaded via `csv` and parsed into date and numeric values.

Loading thumbnail…

Fork of Area Death's

This fork of "Area Death's" displays a single area chart from a CSV dataset, plotting average life expectancy against a time series of years. The chart uses D3 v5’s `select`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the SVG axes, while the `area` generator with `curveBasis` and explicit `y0`/`y1` settings fills the orange region below the line. The reduced data, sourced from Data Canvas - Sense Your City, is parsed by converting the year string into a `Date` object and the life-expectancy values into numbers, with the final graphic rendered in an SVG canvas and styled via the `styles.css` class definitions.

Loading thumbnail…

Lilly Ice-7 Line chart

This line chart visualizes the relationship between year and births using a smooth curve. The chart displays the data with labeled axes for "Year" and "Births," applying a basis curve to the line path for a flowing appearance. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG graphic. The dataset is loaded from a CSV file hosted on GitHub Gist, and the code includes methods for selecting SVG elements, computing extents, and appending axis labels and a title.

Loading thumbnail…

Fork of Fork of Line_Stroke_Death

This line chart displays average life expectancy by year, using a single orange stroked path to trace the trend over time. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator with `curveBasis` for smoothing. The SVG renders within a fixed 960x500 viewport, with data parsed from a CSV hosted on a GitHub gist. The chart includes labeled axes for “Year” and “Averag_Life_Expectancy,” with gridlines drawn via tick sizes, and a title placed above the plot area.

Loading thumbnail…

ICE-7 Line Chart

This visualization presents a line chart of heart disease data, plotting cholesterol levels against patient age. The chart uses D3.js v5 to create SVG-based graphics, with time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) mapping data to positions on axes generated by `d3.axisBottom` and `d3.axisLeft`. A path generated by `d3.line` connects the data points. Data is loaded from a remote CSV file and parsed before rendering.

Loading thumbnail…

Area Death's

This area chart displays the average life expectancy for deaths by stroke across a series of years. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs to generate a smooth filled path, with axes created via `axisLeft` and `axisBottom`. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes labeled axes and a title, with the fill and text colors defined in a separate CSS file.

Loading thumbnail…

Line Chart

This line chart visualizes the relationship between sepal length and petal width, with sepal length on the x-axis and petal width on the y-axis. The chart uses D3 v6 with SVG rendering, loading data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.line` to generate the path, and `d3.axisBottom` and `d3.axisLeft` to display the axes. Axis labels are added as SVG text elements.

Loading thumbnail…

Fork of Fork of D3.js Line Chart

This line chart visualizes customer counts per year from 2000 to 2010 using a CSV dataset. It renders an SVG with D3 v7, employing a band scale for the x-axis and a linear scale for the y-axis. The line path is drawn with `d3.line()`, positioned at each band’s center, and styled with steelblue strokes. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of D3.js Line Chart

This line chart visualizes customer counts per year from 2000 to 2010, using data loaded from a CSV file. It renders an SVG path with a thick steelblue stroke via d3.line(), with d3.scaleBand positioning years along the x-axis and d3.scaleLinear mapping customer values on the y-axis. Axes are generated using d3.axisBottom and d3.axisLeft, and labels for “Year” and “customers” are added as SVG text elements.

Loading thumbnail…

ICE -7 Pie chart of the songs

This pie chart visualizes the durations of individual songs from a CSV dataset hosted on GitHub. D3 v5’s `pie` and `arc` generators create the segments, while a `scaleOrdinal` color scale assigns fills. Each slice is labeled with its numeric duration, and a legend pairs song names with their corresponding values. The SVG rendering approach positions the chart and legend explicitly via `translate` transformations.

Loading thumbnail…

Fork of Pie Chart

This visualization displays the basic cost of Netflix subscriptions for ten countries, represented as a pie chart with a legend and dollar amounts. It uses D3 v5 functions like `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color encoding, rendering SVG elements. Data is loaded from a CSV file via `d3.csv` and sorted before rendering. The chart is implemented in a React starter template, with interaction limited to console logging on mouseover.

Loading thumbnail…

Fork of Pie Chart

This example presents a pie chart visualizing the basic cost of Netflix across ten countries, with a legend listing each country's name and corresponding price. The chart uses D3 v5 to load CSV data from a GitHub gist, sorts it in descending order, and renders the slices using the `pie` and `arc` APIs. It employs a categorical color scale from `scaleOrdinal` and `schemeCategory10`, and attaches mouseover handlers for console logging. The visualization is built with React, SVG, and CSS styling for the title and legend text.

Loading thumbnail…

ICE - 7 Pie Chart

This example displays the pricing of Amazon Prime in various countries as a pie chart generated with D3.js. Each slice, colored using a categorical scale, represents a country’s subscription cost in dollars, with values labeled directly on the chart and in a legend. The visualization uses D3’s `pie`, `arc`, and `scaleOrdinal` functions to compute and render the arc segments, while the data is fetched from a remote CSV file. An interactive SVG canvas updates the chart to show total prices across all selected regions.

Loading thumbnail…

ICE -7 Scatter Plot

This scatter plot visualizes the Iris Dataset across four numerical axes, cycling through them every second to reveal the relationships among sepal and petal measurements. It uses D3 v6 with a reusable chart pattern, mapping species to distinct colors and SVG symbols. The visualization demonstrates reusable chart architecture with d3.scaleLinear, d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, and d3.symbol to render animated, multi-dimension comparisons.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example visualizes the Iris dataset as an animated scatter plot, cycling through four flower measurements as the x-axis every two seconds. Built with D3 v6, it demonstrates a reusable chart pattern where a `scatterPlot` function encapsulates scales, axes, and circle rendering via `selection.join`. The chart updates smoothly by calling `svg.call(plot)` with new x-value accessors, while D3's `scaleLinear` and `axisLeft`/`axisBottom` handle positioning and ticks. The full-screen SVG renders 150 data points with a fixed radius, using data loaded from a CSV and displayed with a tech-themed font.

Loading thumbnail…

Fork of SharanyaFork of ICE-7: Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length for individual iris flowers. The reusable chart, built with D3 v6, uses d3.scaleLinear for axes and d3.symbol with d3.scaleOrdinal to render distinct symbols colored by species (setosa, versicolor, virginica). A legend displays the color mapping, while a setInterval loop cycles through different column pairs every second, dynamically updating the x-axis mapping to explore correlations between sepal and petal measurements. The SVG rendering updates smoothly via a reusable function pattern.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds while sepal length stays on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data, and a reusable `scatterPlot` function that updates the circles and axes via SVG selections. The animation runs through `setInterval`, redrawing the plot with a new x-value accessor each cycle.

Loading thumbnail…

Fork of Pie Chart

This visualization displays the basic cost of Netflix subscriptions for ten countries, represented as a pie chart with a legend and dollar amounts. It uses D3 v5 functions like `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color encoding, rendering SVG elements. Data is loaded from a CSV file via `d3.csv` and sorted before rendering. The chart is implemented in a React starter template, with interaction limited to console logging on mouseover.

Loading thumbnail…

Fork of D3 Starter

This example is a minimal D3.js starter template that displays the text "Hello D3 version 7" centered on a blank page. It demonstrates the basic setup of a D3 project by loading the D3 library from a content delivery network and using the `select` function to target the document body, then chaining the `text` method to insert the greeting. The code relies on the `d3.select` API to manipulate the DOM and is intended as a foundation for building more complex visualizations.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, with axes for sepal length and petal width. The visualization cycles through different data columns every two seconds, updating the x-axis and circle positions via a `setInterval` callback. It is built with D3 v6, using `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and a reusable chart function pattern. The SVG rendering includes animated transitions as the data mapping changes.

Loading thumbnail…

Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements for three flower species. Users can switch between different measurement combinations using buttons, with each selection triggering an animated update of the axes and data points. The visualization uses D3.js v6 with SVG rendering, employing d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and a custom tooltip that appears on mouseover to show the species and exact values for each point.

Loading thumbnail…

Areachart1

This area chart visualizes the average life expectancy in a specific dataset, illustrating changes over time with a filled orange area beneath a line. The chart, titled "Death By stroke," uses a time-scaled x-axis for years and a linear y-axis for life expectancy values. Built with D3 v5, the visualization constructs the area using D3's `area()` and `curveBasis()` functions, with axes formatted via `axisLeft` and `axisBottom`, and includes custom labels. The data is loaded from a remote CSV file using D3's `csv()` method.

Loading thumbnail…

Untitled

This interactive scatterplot displays the Iris dataset, with each point colored by species (setosa, versicolor, or virginica) and sized by petal length. The visualization cycles through four feature pairs on the x-axis every few seconds, while the y-axis remains fixed on sepal length. Built with React and D3 v4, it uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a legend and axis labels added dynamically.

Loading thumbnail…

Line Chart Example

This line chart example visualizes the Iris Dataset, plotting sepal length against sepal width as a continuous line. The chart uses D3 v7’s `d3.line` and `d3.scaleLinear` to map the data, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering includes a steel-blue path with axis labels, and the data is loaded asynchronously from a CSV source using `d3.csv`.

Loading thumbnail…

Area Chart

This area chart visualizes the average life expectancy over time, using a blue filled region beneath a line to emphasize the trend. Built with D3 v7, the SVG graphic relies on `d3.area()` to generate the path, with linear scales for both axes and data parsed from a CSV file. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, while the chart's dimensions are set with explicit margins for clear presentation.

Loading thumbnail…

Fork of Area Death's

This fork of "Area Death's" displays a single area chart from a CSV dataset, plotting average life expectancy against a time series of years. The chart uses D3 v5’s `select`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the SVG axes, while the `area` generator with `curveBasis` and explicit `y0`/`y1` settings fills the orange region below the line. The reduced data, sourced from Data Canvas - Sense Your City, is parsed by converting the year string into a `Date` object and the life-expectancy values into numbers, with the final graphic rendered in an SVG canvas and styled via the `styles.css` class definitions.

Loading thumbnail…

Pie Chart with Labels using d3.js

A pie chart displays the distribution of Iris species counts, with each slice labeled by species name and its corresponding count, accompanied by a color-coded legend. Built with d3.js v5, the visualization uses the `d3.pie` layout, `d3.arc` generator, and `d3.scaleOrdinal` color scheme to create SVG paths and text elements. Data is loaded from an external CSV file using `d3.csv`, and the chart is rendered as a static SVG with an explicit width and height of 400 pixels.

Loading thumbnail…

scatter Plot

This scatter plot shows the relationship between flipper length and body mass for three penguin species, with each species color-coded as pink, silver, or gold. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions to map data from a CSV file loaded via `d3.csv`. Each point is an SVG circle with fixed radius, while bill length and depth are also encoded as attributes (`rx`, `ry`) on the circles. The chart renders in an SVG element sized to the window, with axis labels and a title styled using CSS.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart visualizes Amazon Basic subscription costs across twelve countries, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Axes are manually rendered with grid lines and tick labels, while red vertical guides and rectangular bars show the cost values. The chart updates asynchronously after fetching and parsing the data with `csv()`.

Loading thumbnail…

scatter plot

This scatter plot displays the duration of 100 popular songs on the y-axis against their titles on the x-axis, using a point scale for song names and a linear scale for duration. Each song is represented by a steel-blue circle with a radius of 10 pixels. The visualization loads data from a CSV file via `d3.csv`, scales axes with `d3.scaleLinear` and `d3.scalePoint`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The SVG output is generated through D3 v5, with margins applied to position the chart within a 960-by-1200 pixel canvas.

Loading thumbnail…

Fork of Fork of ICE-6 Bar Graph

This example displays a horizontal bar chart of the top 12 countries by internet cost, rendered as SVG, though the chart lacks axes and uses incorrect data fields, making the bars visually meaningless. The React component loads CSV data from a GitHub gist via d3.csv, then uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis to position rectangles. The code references United Nations population data in the README, but the visualization actually maps unrelated fields like bill_length and species, resulting in a broken chart. React state management triggers redraws through useEffect and useState.

Loading thumbnail…

Penguin Datasets

This visualization displays penguin flipper length against body mass as a scatter plot, with each point colored by species (Adelie, Gentoo, or Chinstrap) using orange, purple, or blue. The code loads the dataset via `d3.csv`, parses numeric fields, and scales axes with `scaleLinear` and `extent`. It renders SVG circles with `select` and `join`, adds labeled axes via `axisLeft` and `axisBottom`, and uses `d3.v5` for all data handling and DOM manipulation.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes shopping data by mapping Spending Score against Family Size, with age and annual income encoded as circle radii. Each point’s color represents gender, distinguishing male (blue) and female (yellow) shoppers. Built with D3 v6, the visualization loads CSV data via `d3.csv`, scales axes with `scaleLinear`, and renders SVG circles using `selectAll` and `join`. Axis labels are added with `axisLeft` and `axisBottom`, while explicit text elements provide contextual titles for the x and y axes.

Loading thumbnail…

Most streamed songs of all time

This visualization displays the most-streamed songs of all time, plotting each track’s name against its duration in minutes. The data is loaded from a CSV file and logged to the console. Built with React and D3 v7, the code uses the `csv` function from D3 to parse the tabular data, though no visual rendering is currently implemented.

Loading thumbnail…

Most streamed songs of all time

This visualization displays the most streamed songs of all time, plotting each track’s name against its duration in minutes using a simple scatterplot or bar layout. It loads data from a local CSV file with D3.js v7, using the `csv` and `select` APIs to parse the dataset and render the visual elements directly into the HTML page. The chart highlights how song lengths vary across popular hits.

Loading thumbnail…

Most streamed songs of all time

This visualization shows the most streamed songs of all time, plotting each song's name against its duration in minutes using a scatterplot. The horizontal axis represents duration, while the vertical axis displays the song titles, with points positioned to reveal the distribution of track lengths across popular hits. The chart is built with D3.js v7, using standard SVG rendering and scales to map the data from the CSV file to screen coordinates. The d3.csv function loads the dataset, and the scaleLinear and scaleBand APIs position the elements.

Loading thumbnail…

Salary Range Dataset

This example displays summary statistics for a salary range dataset, presenting the file size, row count, and column count derived from a CSV file. The visualization uses D3 v7 to fetch and parse the data via `d3.csv`, then computes and formats the statistics with `d3.csvFormat`. The rendered output appears as styled text within an HTML page, using CSS for presentation and an SVG background image.

Loading thumbnail…

most streamed songs of all time

This visualization displays a horizontal bar chart comparing the cost per month for basic internet plans across twelve countries. The chart uses SVG rendering with React and D3 v5, employing `d3.csv` to load the dataset and `scaleBand`/`scaleLinear` to position bars and axes. Red gridlines extend from each x-axis tick, with country labels shown on the vertical axis.

Loading thumbnail…

Most streamed songs of all time

This bar chart shows the populations of the top three countries in 2022, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3, using `scaleBand` for the categorical axis and `scaleLinear` for the numeric scale. Data is loaded from a CSV file via `d3.csv`, and the SVG renders axis ticks, gridlines, and rectangles for each bar, with the interactivity handled through React state and the `useEffect` hook.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This bar chart visualizes the 2022 population data for a subset of countries, displaying only the first three rows from a CSV dataset. The visualization uses D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering SVG rectangles as the primary marks. Built with React hooks (`useState` and `useEffect`), the code loads data via `d3.csv` and generates axes using `axisLeft` and `axisBottom`-style components. The chart includes gridlines and tick labels, with the population values encoded as bar widths.

Loading thumbnail…

Data Visualizer

This example displays a static SVG image of a salary-themed graphic alongside a text summary of a remote CSV dataset. The page uses D3 v7 to fetch the data via `d3.csv`, then formats and inserts a message showing file size in kilobytes, row count, and column count into a `<pre>` element. The SVG employs an `<image>` element with `xlink:href` to embed the external image, styled with grayscale and border effects. The dataset is loaded from a GitHub Gist URL, and the code uses `d3.csvFormat` to calculate the file size.

Loading thumbnail…

Gogineni's Vizhub

This example generates a colorful SVG field of randomly positioned, rotated polygons, layered via nested React array maps. It also embeds a hand-coded SVG path of a Buddha silhouette, scaled and translated as a static image. The page uses React and ReactDOM to render the visualization, while random values control polygon placement, color, and opacity. A marquee title and hyperlinks to related Vizhub projects frame the interactive gallery.

Loading thumbnail…

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

In a black-background SVG canvas, this React app renders a dense field of randomly positioned, semi-transparent polygons, each with random colors and rotated shapes. At the center sits a large, ornate path drawing of a Buddha figure, constructed from complex coordinate data. The app uses React with ReactDOM to generate the SVG elements, mapping over an array to create thousands of polygons with random fill and transform values, while the Buddha path is a hardcoded string rendered as an SVG path element.

Loading thumbnail…

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

This example layers hundreds of semi-transparent, randomly generated SVG polygons over a single, fixed path drawing of the Buddha, producing an overlapping, multicolored mandala-like effect. The random polygons cycle through three nested map functions, each using `Math.random()` to compute their coordinates, fill colors, and rotation transforms. The underlying Buddha path is rendered via React and SVG, with the entire composition drawn inside a black-background viewport. The visualization relies purely on React’s rendering of SVG elements without additional data libraries.

Loading thumbnail…

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

The visualization displays an overlapping Buddha composed of numerous semi-transparent, randomly colored polygons, created with React and rendered as SVG. The code maps through nested arrays to generate polygon elements, each with randomized positions, fill colors, and rotation transforms. A detailed Buddha path is also included via an SVG `<path>` element, layered beneath the generative shapes. The example uses React's `ReactDOM` for rendering and relies on JavaScript's `Math.random()` for stochastic placement and color generation.

Loading thumbnail…

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

A colorful scatter of semi-transparent circles is generated over a dark background, with a large SVG path outline of a Buddha figure layered on top. The circles are positioned and colored using repeated `Math.random()` calls within nested `Array.map` iterations, each rendered as a React `<circle>` element. The Buddha path is drawn via a `<path>` element with `stroke-width`, while the React app imports `React` and `ReactDOM` to render the static SVG output.

Loading thumbnail…

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

The visualization displays an overlapping Buddha composed of numerous semi-transparent, randomly colored polygons, created with React and rendered as SVG. The code maps through nested arrays to generate polygon elements, each with randomized positions, fill colors, and rotation transforms. A detailed Buddha path is also included via an SVG `<path>` element, layered beneath the generative shapes. The example uses React's `ReactDOM` for rendering and relies on JavaScript's `Math.random()` for stochastic placement and color generation.

Loading thumbnail…

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

This example presents a Buddha image composed of hundreds of overlapping, randomly colored circles, creating a dense, pixelated mosaic effect. Built with React and rendered as SVG, the code maps nested arrays to generate the circles, each with a random position, color, and opacity. The Buddha's intricate outline is drawn using a single SVG path with a complex coordinate sequence, layered over the colorful circle field. A second, differently styled Buddha image appears as a diamond-clipped photograph positioned within the same canvas.

Loading thumbnail…

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

This example displays a colorful, diamond-clipped Buddha image composed of overlapping, semi-transparent circles scattered across the viewport. The SVG rendering uses React to map nested arrays, generating circles with randomized positions and RGB fill colors. The fixed Buddha path is drawn with a thick stroke, while the CSS clip-path creates the diamond shape around the image. The visualization combines abstract generative patterns with a structured religious icon.

Loading thumbnail…

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

A field of randomly placed, semi-transparent colored circles overlaps a large Buddha silhouette drawn as an SVG path. The circles are generated via nested React map functions, while the Buddha shape is rendered with a single path element using stroke-width 5. The visualization uses React for component rendering and SVG for both the abstract point cloud and the central figure, set against a black background with the path outline in default black stroke.

Loading thumbnail…

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

A colorful visualization displays a Buddha silhouette overlaid with hundreds of randomly positioned, semi-transparent circles, creating a vibrant, chaotic collage effect. The scene combines a static SVG path tracing the Buddha’s shape with dynamic, overlapping dots whose coordinates and RGB fill colors are generated via JavaScript’s `Math.random`. Built with React and rendered as SVG, the code maps nested arrays to produce 20³ circle elements, while the path itself uses detailed coordinate data with a gold background and purple accents.

Loading thumbnail…

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

A set of scattered, overlapping Buddha silhouette paths is rendered in multicolor over a black background with a field of small, randomly positioned circles. The SVG output is generated through nested React loops in `index.js`, which map over arrays to create both the circle elements and the repeated `path` data. The code uses React and ReactDOM to manage the component, while the `Math.random()` function controls the circles' positions and colors. The Buddha shape itself comes from a lengthy SVG path definition, scaled and translated within a `<g>` element.

Loading thumbnail…

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

A colorful abstract visualization overlays hundreds of semi-transparent, randomly positioned SVG circles on top of a detailed line drawing of Buddha, rendered as a single complex SVG path. The circles use random RGB fill colors and opacity, creating a vibrant, chaotic backdrop. The Buddha path is stroked with a thick white outline, while the React app maps over nested arrays to generate the circles. The visualization uses React and ReactDOM to render SVG elements directly in the browser.

Loading thumbnail…

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

The visualization shows a dense cluster of overlapping, randomly colored circles scattered across a yellow background, paired with a single, large Buddha outline drawn as an SVG path. The circles are generated through three nested React `map` loops over an array of 201 numbers, with each circle’s position and fill color determined by `Math.random()`. The Buddha path uses a static `d` attribute with `stroke-width={5}` and no fill, rendered inside a `<g>` transform. The code relies on React and ReactDOM to render the SVG structure, with all random values computed at render time.