D

DivyaVellanki

@DivyaVellanki·43 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Tree 7

This interactive tree diagram displays a hierarchical dataset loaded from a local JSON file, showing the root node “Ganne” branching into descendants with clickable nodes. The visualization uses D3.js 3.5.17’s tree layout and SVG rendering with animated transitions. Node positions compute via `d3.layout.tree`, while clicking toggles children visibility using a collapse/expand function. The code employs `d3.svg.diagonal` for curved links, styled with green circular nodes and gray paths, and updates nodes with smooth 1100-millisecond transitions.

Loading thumbnail…

Fork of Fork of Fork of Fork of Force Network

A force-directed network diagram visualizes connections between Tom Hanks, film directors, and movies. It uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes and edges, rendered as SVG circles and lines. Node colors come from a `scaleOrdinal`-like color array based on group membership, while link markers are defined via `defs`. The chart loads JSON data and supports drag interactions, though labels and arrowheads remain unfinished.

Loading thumbnail…

Fork of Fork of Fork of Fork of Tree 7

This interactive visualization displays a hierarchical tree diagram, using the root node's single child "mupparaju" as the starting view. The tree expands into branches for "kalyan" and "Divya", showing a family-like structure with names like "shashank", "vellanki", and "anjali". Users can click on any node to collapse or expand its children, with smooth transitions animating the nodes and links to their new positions. The example leverages the `d3.layout.tree` API for the tree layout, `d3.svg.diagonal` for the curved link paths, and D3 transitions for the animated updates, rendering as an SVG.

Loading thumbnail…

Fork of Fork of Fork of Tree 7

This example shows an animated, collapsible tree diagram built with D3.js v3, displaying hierarchical data loaded from a JSON file. The tree layout positions nodes by depth, and clicking a node toggles its children in or out with smooth transitions. The visualization uses `d3.layout.tree`, `d3.svg.diagonal` for curved links, and SVG elements for circles and text labels. Node and link styling uses pink circles and gray paths, with all interactions handled by a click function that updates the layout.

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization displays a zoomable map of India with all its districts and states, rendered as SVG paths. The map uses categorical colors for districts and overlays state boundaries with red strokes. Built with D3 v5, it employs `d3.geoMercator` for projection and `d3.geoPath` to generate paths from TopoJSON data. The map supports interactive zooming via `d3.zoom`, and hovering over districts changes their fill to silver, while tooltips show district and state names from the loaded data.

Loading thumbnail…

Fork of Fork of india map

This visualization displays India’s states and districts as vector paths overlaid on a Mercator projection. The map distinguishes administrative levels with red state boundaries and brown district borders, while district fills use an ordinal color scale. It loads two TopoJSON datasets (state and district boundaries) and renders them as SVG paths using `d3.geoPath` and `d3.geoMercator`. The implementation also applies `d3.zoom` for interactive pan and zoom, with hover effects that highlight districts. The map is built with React and uses the `topojson` library to process the geographic features.

Loading thumbnail…

Fork of Fork of Fork of Fork of World Map

This interactive world map combines country polygons from the World Atlas TopoJSON dataset with TSV country names. Using d3.geoPath, it renders an orthographic projection of the globe, allowing users to drag to rotate the projection, and click a country to switch between Mercator and orthographic views. The visualization employs d3.geoGraticule, sphere paths, and a zoom feature.

Loading thumbnail…

Fork of Fork of Fork of World Map

This interactive map displays world countries using an orthographic projection by default, rendered as SVG paths. Users can rotate the globe by dragging, with d3.drag and d3.geoPath updating the projection dynamically. Clicking the United States switches to a Mercator projection via d3.geoMercator, while other clicks revert to orthographic. Country boundaries come from the world-atlas TopoJSON dataset, with names from a TSV file. Zooming is handled through d3.zoom, applying a transform to the map group.

Loading thumbnail…

Fork of Fork of Fork of Fork of World Map

This interactive map displays world countries using an orthographic projection that can be rotated by dragging, with a click on the United States switching to a Mercator projection. Built with D3.js and the d3-geo-projection library, it renders countries and a graticule as SVG paths via d3.geoPath. Country names come from a TSV file, while geometries load from world-atlas GeoJSON. The visualization also supports zooming through d3.zoom, and includes hover highlighting and animated projection transitions.

Loading thumbnail…

Fork of Fork of Fork of World Map

This interactive visualization displays a world map with multiple projection options, defaulting to an orthographic view. Users can drag to rotate the globe and click on countries to toggle between Mercator and orthographic projections—clicking the United States switches to Mercator, while other countries return to orthographic. The map uses topojson data from the world-atlas package to render country boundaries and includes a graticule overlay. Built with d3-geo-projection and d3-geoPath, it supports zooming and panning via d3.zoom, with SVG paths and transition animations for smooth updates.

Loading thumbnail…

Fork of Fork of Fork of World Map

This interactive world map visualizes geographic data using multiple map projections. Users can rotate the globe by dragging and switch between Mercator, orthographic, and Albers USA projections by clicking on countries. The visualization renders country boundaries as SVG paths using d3.geoPath, with data from the world-atlas package. A graticule overlays the map, and interactive zooming is enabled through d3.zoom while rotation utilizes d3.drag, both updating the projection's rotate and scale parameters dynamically.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart shows the sales of cars in India from 2009 to 2019, with a red line tracing the trend and a filled red area beneath it. The visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.line and d3.area with d3.curveBasis for smooth curves, and d3.axisBottom/axisLeft for labeled gridlines. Data is loaded from a CSV via d3.csv, with sales parsed as numbers and year strings converted using d3.timeParse. The SVG output includes styled tick marks and axis labels.

Loading thumbnail…

Fork of ICE 7 Area Chart

A fork of ICE 7 Area Chart visualizes car sales in India from 2009 to 2019. A red line traces yearly sales over a filled area, with a yellow-tinted grid and bold green axis labels. Using D3.js v5, the code applies `scaleTime` and `scaleLinear` to map years and sales values, while `line` and `area` generators with `curveBasis` create the smooth line and filled region. Data is loaded from a CSV via `csv()` and parsed with `timeParse`. The SVG is rendered through `axisLeft` and `axisBottom` for the axes.

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Line Chart

This line chart visualizes car sales in India from 2009 to 2019, with a line path connecting annual sales data points. The chart is rendered as an SVG using D3 v5, with time-scaled x-axis and linear-scaled y-axis. The visualization employs `d3.axisBottom` and `d3.axisLeft` for axes, `d3.line` for the path generation, and `d3.scaleTime` and `d3.scaleLinear` for scaling, with data parsed from a CSV source using `d3.csv` and `d3.timeParse`.

Loading thumbnail…

Fork of Fork of ICE 7 Line Chart

This visualization shows the sales of cars in India from 2009 to 2019 as a single red line chart. It uses D3 v5’s `scaleLinear` and `scaleTime` for axes, `axisBottom` and `axisLeft` for gridlines, and the `line` generator to draw the path. The SVG is rendered from CSV data parsed with `csv` and `timeParse`, with a styled dark background and colored axis labels.

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart visualizes car sales in India from 2009 to 2019, with the x-axis representing time and the y-axis showing sales volume. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render the SVG path, with grid lines styled via `.tick line`. Data is loaded as CSV from a GitHub gist and parsed using `d3.timeParse`. The chart includes labeled axes and a styled red line, with formatting applied to tick values.

Loading thumbnail…

Fork of Fork of ICE 7 Pie Chart

This visualization shows the top 10 car-producing countries in the world based on 2019 values, displayed as a pie chart with a color-coded legend. It loads CSV data from a GitHub gist using d3.csv, then computes each country’s total value from the 2019 column. Using d3.pie and d3.arc, it generates SVG path segments, while d3.scaleOrdinal assigns colors. The legend, built with appended SVG circles and text, labels each country and its formatted value (in thousands). The chart is rendered entirely as SVG within a 960×500 viewport.

Loading thumbnail…

Fork of ICE 7 Pie Chart

This pie chart visualizes the top 10 car-producing countries in the world, using data from a CSV file loaded via `d3.csv`. The chart displays each country's 2019 production value as a slice, with a legend showing country names and their corresponding values (in thousands). It is rendered as an SVG, built with D3 v5 APIs including `pie`, `arc`, and `scaleOrdinal` for coloring. The color palette assigns a distinct hue to each segment, and the chart is positioned with a `translate` transform.

Loading thumbnail…

Fork of Fork of fork of fork of iCE - 7 Reusable Scatter Plot

This animated scatter plot cycles through four different pairings of Iris flower measurements, visualizing the classic Iris dataset from a CSV file. Colored dots represent three species—setosa in blue, versicolor in red, and virginica in yellow—with white outlines for clarity. Every two seconds, the plot switches which petal or sepal dimension is mapped to the x-axis while the y-axis remains sepal length. The implementation uses D3.js modules like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with a reusable `scatterPlot` function driving the SVG rendering and updates.

Loading thumbnail…

Fork of Fork of fork of iCE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through different pairs of flower measurements every two seconds. Data points are colored by species (blue, red, yellow) and rendered as SVG circles with white strokes. The visualization uses D3 v6 modules including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, while a reusable `scatterPlot` function manages the chart configuration and updates. The code loads data from a CSV file hosted on GitHub and animates by changing the x-axis variable in a `setInterval` loop.

Loading thumbnail…

Fork of Fork of iCE - 7 Reusable Scatter Plot

This scatter plot animates through four Iris flower measurements (petal width, sepal width, petal length, and sepal length) every two seconds, swapping which variable appears on the x-axis while keeping sepal length on the y-axis. Each point is colored by species (blue, red, or yellow) with white outlines, rendered as SVG circles. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll(...).join(...)` within a reusable `scatterPlot` module. Data comes from a CSV of the classic Iris dataset, loaded via `d3.csv`.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This animated scatter plot cycles through the four measurements of the Iris dataset, re-mapping the x-axis every two seconds to show different pairwise relationships. Built with D3.js, it uses a reusable `scatterPlot` function that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles. The SVG visualization color-codes each species—setosa, versicolor, and virginica—in blue, red, and yellow, with a black background and white strokes.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization shows the top 10 countries by deaths from air pollution in 2020, rendered as a pie chart with labeled percentage values and a legend listing country names alongside their death tolls. The code fetches CSV data from a GitHub gist, parses it with d3.csv, and uses d3.pie and d3.arc to generate SVG path segments. A d3.scaleOrdinal maps death counts to distinct colors, while text labels are positioned using arc.centroid. The chart is built with d3 v5 and rendered entirely as SVG elements within a static HTML page.

Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by air pollution-related deaths in 2020 as a pie chart, with labeled segments showing death counts in thousands and a legend listing country names alongside values. The chart uses d3.pie to compute arc angles, d3.arc for path generation, and d3.scaleOrdinal to assign colors. Data is loaded asynchronously from a CSV file via d3.csv, with death values parsed numerically and formatted using d3.format. The SVG rendering positions the pie at a fixed coordinate, with legend rectangles and text elements appended programmatically.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the number of deaths in 2020 attributed to air pollution for the top 10 countries, with each slice labeled with its value in thousands and a corresponding legend listing country names and figures. The chart is built using D3 v5, loading CSV data from a GitHub gist, and renders SVG elements via `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format`. Each slice is colored using a fixed array of colors, and text labels are positioned using the arc centroid.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization displays the top 10 countries by deaths from air pollution in 2020, using a pie chart with colored slices and value labels. It loads CSV data from a GitHub gist and renders an SVG via d3.pie, d3.arc, and d3.scaleOrdinal to map deaths to colors. A legend lists each country with its corresponding count, formatted with d3.format. The code uses d3.csv for data fetching and d3.select to manage the SVG elements.

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This example shows a scatter plot of Iris flower measurements with a color-coded legend for species. The axes represent sepal length and petal length, while each circle is colored by species using a static `d3.scaleOrdinal` with `d3.schemeCategory10`. The code uses `d3.csv` to load external data, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.legendColor` from the d3-legend library to render the color legend. All elements are drawn as SVG circles and text within a single SVG container, with custom CSS styling for guide lines and labels.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length with points colored by species. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and the `d3-legend` library to generate a circle-shaped color legend. The chart features hidden domain lines, styled tick marks, and large axis labels.

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This D3 v5 visualization displays the Iris dataset, mapping sepal length and petal length along the x and y axes, with species encoded as color. The scatter plot uses circles to represent individual samples. The code loads data from a CSV file, employs `d3.scaleLinear` and `d3.scaleOrdinal` with `d3.schemeCategory10`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. A color legend is added using the `d3.legendColor` API from the d3-legend library.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, using D3 v5 to map sepal length and petal length on the x- and y-axes, with each circle representing an iris flower and colored by species via a categorical color scale and an accompanying legend. The code loads data from a remote CSV using `d3.csv`, builds linear scales with `d3.scaleLinear`, and renders axes and SVG circles. It also leverages the `d3-legend` library’s `legendColor` to draw the color key, with axis labels and grid lines styled through CSS.

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This fork of the stylized scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers. The code uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for species colors, and the `d3.legend` library to display a color legend. It also utilizes `d3.axisBottom` and `d3.axisLeft` with tick lines spanning the chart, plus axis and legend labels styled via CSS.

Loading thumbnail…

Untitled

This example shows a basic HTML page that uses CSS and JavaScript to render a simple interactive visualization. The code uses React to structure the UI, with a bundled JavaScript file controlling the behavior. It demonstrates a minimal setup for building browser-based graphics, relying on standard web technologies rather than specialized charting libraries. The rendering approach is straightforward DOM manipulation, and the data source appears to be static or locally defined within the script. The page serves as a starting point for more complex React-based visualizations.

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against petal width for individual flowers. Each point is colored by species, using blue, red, and black to distinguish setosa, versicolor, and virginica. The visualization uses D3 v6 APIs including `select`, `scaleLinear`, `extent`, and `axisBottom` to map data to SVG circles, with point radius fixed while sepal dimensions are encoded as rx and ry attributes on the circle elements. The chart fills the entire browser window.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width while color-coding each point by species—setosa in blue, versicolor in red, and virginica in black. The SVG scatter plot is rendered using D3 v6, with axes created via `axisLeft` and `axisBottom`. Data is loaded asynchronously from a GitHub Gist using `d3.csv`, then transformed with `scaleLinear` and `extent` to map values to screen coordinates. Though the code sets `rx` and `ry` attributes, circles remain round with a fixed radius of five pixels.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in a large, 13-em font. It demonstrates a minimal setup using plain HTML, CSS, and JavaScript, with the styling applied via a CSS class in the document’s `<style>` block. The page uses no external libraries or data sources, relying instead on built-in browser rendering. It serves as a basic starter template for building more complex visualizations.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in a large, 13-em font. It demonstrates a minimal setup using plain HTML, CSS, and JavaScript, with the styling applied via a CSS class in the document’s `<style>` block. The page uses no external libraries or data sources, relying instead on built-in browser rendering. It serves as a basic starter template for building more complex visualizations.

Loading thumbnail…

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

This horizontal bar chart displays the ten countries with the highest populations, using bar length to encode population size and the y-axis to list country names. Built with React and D3.js, the visualization loads CSV data from a GitHub gist, then uses D3's `scaleBand` and `scaleLinear` to map data to SVG rectangles. The chart includes grid lines and axis tick labels generated from D3's scale methods, with a title indicating the data represents the highest population figures.

Loading thumbnail…

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

This visualization displays a horizontal bar chart of the top ten countries by population for 2019, with a title indicating the highest population. The bars are rendered as SVG rectangles, with axes drawn using D3’s scaleBand and scaleLinear. The app is built with React, using hooks like useState and useEffect to fetch and process CSV data via d3.csv. Axes ticks and labels are manually generated from the scales, avoiding d3.axisLeft or axisBottom.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data with D3.js, displaying the dataset's size in kilobytes, row count, and column count in a styled HTML page alongside a static SVG image. The code uses `d3.csv` to fetch the remote CSV file from a GitHub gist and `d3.csvFormat` to calculate the data size. The page is built with HTML, CSS, and vanilla JavaScript, with the D3 library loaded via CDN.

Loading thumbnail…

Untitled

This example demonstrates loading and parsing a CSV file using D3.js, displaying the file size in kilobytes, row count, and column count in a styled HTML page. The visualization includes a decorative cityscape SVG illustration. The code uses `d3.csv` to fetch data from a GitHub gist and `d3.csvFormat` to calculate the data size. The page is built with HTML and CSS, featuring a highlighted heading and a large message container for the parsed data summary.

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal VizHub setup that renders a custom message using D3.js. It imports the `select` function from D3 via UNPKG and uses it to set the text of an HTML `#message` div, referencing a local ES6 module (`myMessage.js`) for the greeting string. The page also loads an external script from a gist and applies centered, oversized text styling via the included `styles.css` file. The visualization is static, focusing on modular JavaScript imports and basic DOM manipulation rather than data-driven graphics.

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This example shows a minimal D3.js visualization that displays a single text message centered on the page. It loads D3 from a CDN, imports the `select` function from D3, and imports a local ES6 module to provide the string content. The code then uses `select('#message').text()` to set the text content of a div element, with styling applied via an external CSS file. The example demonstrates basic D3 selection, ES6 module imports, and CSS integration in VizHub.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load D3 via UNPKG and use ES6 modules in a VizHub project. It uses the `select` function from D3 to target a `#message` div and set its text content. The text string comes from a local module, `myMessage.js`, which exports a `message` constant. The final page renders a centered, large-font "Hello VizHub!" message using CSS from `styles.css`, showcasing basic module imports and DOM manipulation.