adapavaishnavi12

@adapavaishnavi12·37 public vizzes

Family tree

This interactive family tree chart displays three generations of the Adapa family, with the oldest member, Adapa Yadagiri, at the root and descendants branching downward. Users can click on nodes to expand or collapse the children of each individual, and the tree animates smoothly as positions update. Built with D3.js (version 3.5.17), the visualization uses a custom tree layout, SVG paths for connecting links, and CSS-styled circle and text nodes on a pink background.

Apr 13, 2023

Loading thumbnail…

Social Network graph

A social network graph displays nine named individuals as nodes grouped by color-coded categories, with weighted links connecting them by relationships. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link stroke-width scaled by the square root of the connection weight. Node circles are styled with blue fills and pink stroke, while purple links and text labels are rendered as SVG elements defined in CSS. Data comes from an external `graph.json` file containing node names, group assignments, and weighted edge pairs, and nodes support dragging through the force layout's drag behavior.

Apr 13, 2023

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This example displays a small social network of nine named individuals grouped into five categories, with weighted links connecting them. It uses the D3.js library, specifically `d3.layout.force`, to simulate the network layout, rendering nodes as blue circles with red labels and edges as black lines whose thickness varies with link weight. The visualization is drawn as an SVG element and loads data from a local JSON file, allowing nodes to be dragged interactively via `force.drag`.

Apr 13, 2023

Loading thumbnail…

INDIA

This interactive visualization presents a map of India, highlighting its states and districts in color. Users can explore the geography through zooming and panning via d3.zoom, while the map’s districts display hover tooltips that reveal district and state names. The visualization uses d3.geoPath with a geoMercator projection to render GeoJSON features built from TopoJSON data, which is sourced from external repositories for Indian state and district boundaries.

Apr 13, 2023

Loading thumbnail…

Fork of D3 Starter

This example displays an interactive map of India, showing both state boundaries and district-level divisions, with each district colored by its state. Users can zoom and pan the map using d3.zoom, and hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON data from two external sources, and d3.scaleOrdinal with schemeCategory10 for colors. The code also includes an orthographic world map with draggable rotation in a separate module.

Apr 13, 2023

Loading thumbnail…

world map

This example displays a world map rendered as an SVG using the Natural Earth 1 projection. Land masses appear in coral with pink country borders, while graticules and the sphere outline provide geographic context. The visualization fetches TopoJSON data from the World Atlas and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. React manages the component structure, while D3 utilities like `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the projection and path generation. The code also loads data asynchronously via `d3.json`.

Apr 13, 2023

Loading thumbnail…

Fork of World Map

This example presents a natural Earth projection of the world map, rendered as an SVG with a light blue spherical background and green landmasses outlined in black. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converting them to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country paths, demonstrating a straightforward choropleth-free geographic rendering workflow.

Apr 13, 2023

Loading thumbnail…

3D Scatter plot graph

This 3D scatter plot visualizes video game sales data, comparing North American and Japanese sales figures across different game titles and release years. The example uses Plotly's JavaScript API to render two interactive three-dimensional traces: one for North American sales and one for Japanese sales, with sales values plotted on the z-axis, years on the y-axis, and game names on the x-axis. The code loads the dataset using the `d3.csv` function from the D3 library and constructs the chart with `Plotly.newPlot`, styling markers with custom colors, sizes, and opacity settings.

Apr 6, 2023

Loading thumbnail…

Average Summer Temperatures - 3D Bar chart

This visualization displays average summer temperatures (June, July, August) for seven U.S. cities in an interactive 3D bar chart. It uses the Highcharts JavaScript library with the highcharts-3d module to render grouped columns along a perspective depth axis, allowing comparison of monthly temperature patterns across cities. The chart’s x-axis categorizes cities while the y-axis measures temperature in degrees Fahrenheit, with each month represented as a distinct series stack. The 3D effect is enabled through Highcharts’ `options3d` configuration, which sets rotation angles, view distance, and column depth for a spatial presentation.

Apr 5, 2023

Loading thumbnail…

3d scatter plot

This example creates a basic three-dimensional scatter plot visualization using D3 version 7.8.2. The code initializes a D3 selection on the HTML body element and renders the text "Hello D3 version 7" using the `select` and `text` methods. The visualization demonstrates the simplest possible D3 setup, where a static text output is displayed rather than an actual 3D scatter plot, despite the title. The HTML file loads the D3 library from a content delivery network and executes the JavaScript from an external bundle file.

Apr 5, 2023

Loading thumbnail…

3D Scatter plot graph

This example visualizes video game sales data in a 3D scatter plot, comparing North American and Japanese sales across different years and game titles. The code uses Plotly.js to render the scatter3d traces, with two marker series distinguished by color: one for North America and one for Japan. Data is loaded from a CSV file using D3.js’s `d3.csv` function, and the `unpack` helper maps specific columns to the x, y, and z axes. The chart is embedded in an HTML div and styled with a brief CSS file.

Apr 5, 2023

Loading thumbnail…

IRIS DATA IN 3D SCATTER PLOT GRAPH

This 3D scatter plot visualizes the classic Iris dataset, mapping sepal length, sepal width, and petal length onto the x, y, and z axes. Points are colored by species (setosa, versicolor, virginica) using a custom colorscale, with distinct marker colors and pink outlines highlighting cluster separation. The visualization is built with Plotly.js's `scatter3d` trace type, while D3.js loads the CSV data from a GitHub gist. Each axis includes a colored background and gridlines, rendered interactively in WebGL for smooth rotation and exploration.

Apr 4, 2023

Loading thumbnail…

Fork of bonus ice

This fork of bonus ice renders the text "Hello D3 version 7" in the center of the browser window using the HTML `body` element with a font size of 13em. The example demonstrates a minimal setup for D3.js version 7, importing the `select` function from the `d3` library. Using `select('body')`, the code chains a `.text()` method to set the displayed string, showing a basic DOM manipulation with D3's selection API. The page loads `d3.min.js` from the unpkg CDN for version 7.8.2.

Apr 4, 2023

Loading thumbnail…

bonus ice

This example displays the text “Hello D3 version 7” centered on a white page. The page loads D3 version 7.8.2 from a CDN and uses the `select` method to target the `body` element, then applies the `.text()` method to set its content. The page’s CSS sets a font size of 13em, making the message extremely large. The demonstration shows the simplest possible D3 v7 usage, requiring only a single JavaScript call to inject static text into an HTML document.

Apr 4, 2023

Loading thumbnail…

Untitled

This interactive 3D scatter plot displays the classic Iris flower dataset, mapping sepal length, sepal width, and petal length to the x, y, and z axes. Each point represents a flower specimen, with its color indicating the species: setosa, versicolor, or virginica. The visualization is rendered using Plotly’s JavaScript library, `scatter3d` trace type, and relies on D3’s `d3.csv` method to fetch the dataset from a GitHub gist. The code explicitly sets a custom colorscale and applies colored point markers with pink outlines to distinguish the three species.

Apr 4, 2023

Loading thumbnail…

PRODUCT MANUFACTURERS OF FIRST 6 MONTHS IN 3D BAR GRAPH

This example displays product manufacturer output for the first six months using a 3D multi-series bar chart. The visualization groups each manufacturer’s monthly values (January through June) as vertical bars, allowing quick comparison of production trends across brands. The code builds the chart with d3-x3d’s `barChartMultiSeries` component, which renders into an X3DOM scene. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into key–value pairs. The chart is attached to a DOM element using D3’s `selection.datum()` and `.call()` pattern, with layout sized by inline styles.

Apr 4, 2023

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This is a 3D multi-series bar chart rendering car manufacturer sales data for the first six months of a year. It uses the d3-x3d library to generate X3DOM-based 3D scenes, with D3.js v5 handling CSV parsing and data binding. The visualization displays each manufacturer as a group of six colored bars, one per month, with heights mapped to numeric values parsed from a GitHub-hosted CSV file. Axes and chart layout come from the d3.x3d.chart.barChartMultiSeries API, while d3.scaleLinear and d3.axis functions manage scaling and tick marks.

Apr 4, 2023

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This visualization presents car manufacturer sales data for the first six months of the year as an interactive 3D bar chart. It uses the D3.js library (v5) along with the d3-3d extension and the X3DOM framework to render the three-dimensional bars, with each bar representing a manufacturer's monthly sales figures. The data is loaded from a CSV file containing the monthly values for each manufacturer across the months of January through June. The chart uses a multi-series bar chart component from the d3-x3d library to display the dataset, with axes and bar series generated programmatically.

Apr 4, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page rendered through React, displaying a centered "Hello HTML!" message in massive 13em font size. The code uses standard HTML, CSS, and JavaScript, with the styling defined in an inline `<style>` block and the message contained in a `<div>` element. The `index.js` file is empty, so no additional JavaScript behavior is implemented. It serves as a basic starter template showing how static content can be styled and presented without any data visualization or external libraries.

Mar 30, 2023

Loading thumbnail…

population_of_women

This line chart shows the population of women over time, plotting the dataset from a CSV file sourced from a GitHub gist and rendered as an SVG. The x-axis represents the year, while the y-axis displays the population count, using a smooth basis curve to connect data points. The visualization is built with D3 v5, utilizing `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `curveBasis` APIs to create the scales, axes, and line path. Axes include labeled tick marks and a red stroke for the line path.

Mar 30, 2023

Loading thumbnail…

pie chart

This pie chart visualizes the prices of the top 11 products from a CSV dataset, sorted in descending order and drawn as SVG arcs. Built with D3.js v5, it uses the `pie` and `arc` functions to generate segments, `scaleOrdinal` with `schemeCategory10` for color coding, and includes an interactive legend showing each product name and its price in dollars. Data is loaded asynchronously via `csv` from a GitHub gist, and the chart is rendered on mouseover logging.

Mar 30, 2023

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example animates the classic Iris flower dataset, cycling through different measurement pairings on the x-axis while keeping sepal length as the y-axis. The scatter plot updates every few seconds, with each species (setosa, versicolor, virginica) represented by a distinct color. Built with D3.js v6, it uses the `csv` method to load data, appends SVG `circle` elements for marks, and relies on `setInterval()` to trigger the dynamic axis transitions. The visualization also includes a manually constructed legend and axis labels.

Mar 30, 2023

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, exploring relationships between sepal and petal measurements across three species. The visualization animates by cycling through different feature combinations on the x-axis, with each species represented by a distinct color. Built with React and D3.js, it uses CSV data loading, linear scaling, and SVG rendering. The code demonstrates reusable chart components, with axes and circles updated dynamically via D3’s join operation and `setInterval` for the animation loop.

Mar 30, 2023

Loading thumbnail…

Fork of Area Death's

This area chart visualizes the population of women from 1990 to 2000. The visualization uses a pink filled area path to represent the data over time, with labeled axes for years and population. Built with D3 v5, the chart employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to construct the smooth area shape. Data is loaded from a GitHub gist using `csv`, with the SVG rendering showing formatted tick labels on the y-axis and custom styling for the title and axis labels.

Mar 29, 2023

Loading thumbnail…

Fork of Pie Chart

This visualization displays the revenue of the top 20 makeup products using a basic pie chart with a legend to the right. The chart uses D3 v5's `pie` and `arc` generators to create the segments and `scaleOrdinal` with `schemeCategory10` for color encoding. Data is loaded from a CSV file via `d3.csv`, then sorted descending by revenue and sliced to the top 20 items. The SVG includes interactive mouseover logging and legend labels showing product names and dollar-formatted revenue values.

Mar 27, 2023

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, cycling through different feature pairs on the x-axis via an animation. The visualization uses D3 v6 to render SVG circles colored by species, with a legend and axis labels updating dynamically. The scatter plot is implemented as a configurable function via `scatterPlot()`, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. A `setInterval` updates the x-axis mapping, while the y-axis remains fixed to sepal length. The code loads CSV data from a Gist and displays it across the full viewport.

Mar 27, 2023

Loading thumbnail…

ICE-6

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis against petal width on the y-axis, with each of the three species (setosa, versicolor, and virginica) colored green, brown, and blue respectively. It also encodes sepal length and width as the rx and ry attributes of each circle, though these do not affect the default circular shape due to a fixed radius. The code uses D3 v6 methods including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and render axes in an SVG. Data is fetched from a remote GitHub gist URL.

Mar 27, 2023

Loading thumbnail…

Fork of COSMETICS PRODUCTS

This chart is a horizontal bar chart visualizing cosmetic product revenues in dollars. It compares the revenue of each product, with the bars sorted in descending order and labeled on the y-axis. The chart has a pink color scheme and uses a linear scale for the revenue axis and a band scale for the product categories. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG. The data is loaded from an external CSV file using `d3.csv`.

Mar 23, 2023

Loading thumbnail…

COSMETICS PRODUCTS

This bar chart displays cosmetic product revenue in dollars, with product categories listed on the y-axis and revenue amounts on the x-axis. The visualization uses d3.scaleLinear and d3.scaleBand to map data values to pixel coordinates, with d3.axisBottom and d3.axisLeft generating the axes. Data is loaded from a CSV file hosted on GitHub via d3.csv, and the chart renders as SVG rectangles filled pink, with formatting applied through d3.format to display values in billions.

Mar 23, 2023

Loading thumbnail…

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

This example visualizes the basic monthly cost of Netflix in 15 countries using horizontal bar marks encoded by length. It renders SVG via React components and D3 scales, including `scaleBand` for country categories and `scaleLinear` for cost values. Data loads asynchronously from a CSV using `csv` from D3 v5, and the code manually constructs axes with grid lines and tick labels through JSX. The implementation demonstrates a hybrid approach, letting React manage the DOM while D3 handles data parsing, scaling, and axis generation.

Mar 16, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart shows monthly Amazon Music subscription costs across different countries, ranking the first twelve countries from a Spotify dataset. The visualization uses React hooks to load and manage CSV data, while D3 v5’s `scaleBand` and `scaleLinear` handle positioning and scaling. SVG rectangles encode each country’s cost, with red gridlines and tick labels generated manually via `xScale.ticks()`. Data is fetched through D3’s `csv` function from a GitHub gist, and the chart is rendered entirely as SVG within a React component.

Mar 16, 2023

Loading thumbnail…

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

This example visualizes the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart, rendered as SVG through React components. The application loads data from a CSV file, parses the cost values, and displays them with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Grid lines and axis ticks are manually generated using `.ticks()`, with React’s `useState` and `useEffect` managing the asynchronous data loading and component rendering. The bars are simple `<rect>` elements positioned using D3’s scale functions.

Mar 16, 2023

Loading thumbnail…

Most played songs on spotify

This visualization displays the most played songs on Spotify using a static chart. It loads and parses CSV data containing CSS named colors, and relies on D3 v5 for data handling within a Vue framework. The chart is rendered as an SVG, with the visualization presented on a green background. The code includes styling for the chart area and buttons, though the main display is constructed through the SVG markup.

Mar 9, 2023

Loading thumbnail…

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

A dense, kaleidoscopic field of overlapping, rotated polygons fills a black SVG canvas, each shape filled with a randomized RGB color and rendered with high opacity. The code generates these polygons through nested iterations over a numeric array, using JavaScript’s `Math.random()` to determine positions, dimensions, and hues, with `transform` applying a 45-degree rotation. React and ReactDOM render the SVG structure, while an included `<path>` element traces a complex outline derived from the 'Buddha' dataset, layered within the same composition. The visual result emphasizes chaotic, generative abstraction over precision.

Mar 2, 2023

Loading thumbnail…

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

A colorful, overlapping Buddha silhouette emerges from a dense field of randomly placed, rotated polygons. The irregular, multi-colored shapes create a chaotic backdrop against the figure’s defined path. Built with React and rendered as SVG, the code uses nested `A.map` loops to generate hundreds of polygon elements with random coordinates, fill colors, and rotations. The Buddha itself is drawn as a detailed SVG path, layered on top of the polygon field.

Mar 2, 2023

Loading thumbnail…

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

Mar 2, 2023

Loading thumbnail…

Fork of Fork of Buddha blocks -overlapping Buddha

A grid of 441 circles, each with a random radius, position, and color, is rendered over a green background. The circles are generated by triple-nested loops over an array, with each circle’s fill color and coordinates computed using `Math.random()`. A large, yellow path element, taken directly from the source data, is overlaid and scaled, creating an overlapping Buddha-like figure. The visualization is built with React and SVG, using imperative `map()` calls to produce the circle elements.

Mar 2, 2023