D

divyagunuguntla

@divyagunuguntla·23 public vizzes

Loading thumbnail…

country map

This visualization displays a map of the United States at the county level, using a green fill with black borders that highlight individual county boundaries. Hovering over any county changes its fill color to yellow. The map is rendered as SVG using D3 v5, with geographic projections handled by `d3.geoAlbersUsa` and `d3.geoPath`. County boundaries are generated from TopoJSON data loaded from the us-atlas package, and the code relies on `topojson.feature` to extract geographic features and `topojson.mesh` for boundary calculations.

Loading thumbnail…

family tree

A family tree visualizes lineage relationships among named individuals, with circles representing family members and yellow lines connecting parents to children. The visualization uses a hierarchical tree layout, where node colors distinguish generations: green for the root, light green for children, yellow for grandchildren, and grey for further descendants. Built with D3 v6, the code employs the `.stratify()` API to structure parent-child relationships, `.tree().size()` for layout dimensions, and SVG transitions to animate the connection paths from parent nodes to their offspring over 1.5 seconds. Text labels display each member's name in blue.

Loading thumbnail…

network

This network visualization shows a small social graph of seven named individuals with weighted connections between them, rendered as green nodes with yellow labels on a black background. The force-directed layout, built with d3.layout.force from d3.v4, positions nodes and links while supporting drag interaction. The code loads data from data.json via d3.json, then uses SVG line elements for links with stroke-width determined by the square root of each link's weight, and groups for nodes with attached circles and text labels.

Loading thumbnail…

world map

This example renders a world map using the Natural Earth projection, displaying country boundaries as green SVG paths with yellow strokes on a green background. It fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from topojson. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project and draw the paths, while d3.json loads the remote dataset asynchronously before appending the country shapes to the SVG canvas.

Loading thumbnail…

area chart ic7

This area chart displays bike users from 2012 to 2022, with the x-axis mapping years and the y-axis showing user counts. The visualization combines a black line chart with a purple filled area beneath it to emphasize the trend over time. Built with D3 v5, the code uses the `line` and `area` generators with a `curveBasis` smoothing function, and scales data with `scaleLinear`. The SVG is constructed using the `select`, `append`, and `attr` methods, with axes rendered via `axisBottom` and `axisLeft`. Data is loaded from a remote CSV file using `csv`, and tick labels are formatted with `format`.

Loading thumbnail…

line chart ice7

This line chart displays bike users from 2012 to 2022, with time on the x-axis and user counts on the y-axis. The SVG visualization uses d3.scaleTime and d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.line to generate the path. Data is loaded via d3.csv from a GitHub gist, then parsed with Date and numeric conversions before rendering.

Loading thumbnail…

ice7 area plot

This area plot visualizes car sales in India from 2009 to 2019, with a smooth curve showing sales trends over time. Using d3.scaleTime and d3.scaleLinear for the x and y axes, the chart combines a filled area path and an overlaid line path, both generated with d3.area and d3.line using the curveBasis interpolation. Data is loaded from a CSV file via d3.csv, and SVG rendering displays axes with tick marks and labels.

Loading thumbnail…

pie chart ic7

A pie chart visualizes the top 10 bike models ranked by cost. Each slice represents a bike, with colors assigned via `d3.scaleOrdinal`, and the chart is rendered using D3's `pie` and `arc` functions within an SVG canvas. The legend, positioned to the right, uses `d3.select` and `d3.arc` to list bike names and their costs in thousands. Data is loaded asynchronously from a CSV using `d3.csv`, with cost values formatted via `d3.format`. Text labels at slice centroids display the bike names, though the code sets the fill to black and font size, which may affect readability against colored slices.

Loading thumbnail…

piechart ic7

This pie chart visualizes the top 10 car-producing countries in the world for the year 2019, using data loaded via `d3.csv` from a Gist URL. It renders an SVG pie chart using `d3.pie`, `d3.arc`, and a `d3.scaleOrdinal` color scheme, with segments positioned by `d3.arc` and filled based on each country's total value. A legend, built with SVG circles and text, labels each country and its corresponding value, formatted with `d3.format`. The chart is centered on a light blue background with a red title, providing a clear comparison of production figures.

Loading thumbnail…

ic7 pie chart

A pie chart visualizes the cost distribution of protein present in various cereals, with each slice colored by cereal type and accompanied by a legend showing names and cost values. The data is loaded from a CSV file using `d3.csv` via the `getData` module, then processed with `d3.pie` and rendered as SVG arcs using `d3.arc`. Colors are assigned through `d3.scaleOrdinal`, and legend text formats costs with `d3.format`. The chart uses D3 v5 and is authored by divyagunuguntla.

Loading thumbnail…

Ice7 Pie Chart

This visualization presents a pie chart of the top ten cricketers based on their total runs, using D3.js (v5) to render the SVG. Each slice's size corresponds to the player's run count, and a color-coded legend identifies each player by name and their runs, formatted with scientific notation. The code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to create the chart, with data loaded from a JSON file and styled via external CSS. The chart is generated procedurally, positioning the pie at a fixed coordinate and appending legend entries in a separate group.

Loading thumbnail…

ic7 divya scattered plot

This interactive scatter plot visualizes the Iris dataset, showing how petal width and sepal length relate across three flower species. Built with D3.js, the visualization uses an animated SVG display that cycles through different variable pairings every two seconds, while a color-coded legend distinguishes setosa, versicolor, and virginica species. The code implements a reusable scatter plot API with `scaleLinear`, `scaleOrdinal`, and `axisLeft` functions, rendering circles with dynamic sizing based on additional sepal dimensions. Data is loaded from a CSV file hosted on GitHub Gists, and the entire visualization adapts to the browser window dimensions.

Loading thumbnail…

Ic7 scattered plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length while distinguishing species through different symbols. Built with D3.js and SVG, it employs a reusable chart architecture with modular accessors for configuration. Every 15 seconds, the x-axis dynamically cycles through different dataset columns, animating the plot to reveal alternative feature relationships. The visualization uses D3's linear scales, ordinal symbol scales, and axis generators to create an adaptive, self-updating exploration tool.

Loading thumbnail…

Fork of 3d for bar chart

This example presents a 3D bar chart of bike data, showing cost and quantity metrics for each bike type. The visualization renders an interactive X3D scene using the d3-x3d library combined with d3-3d, d3.v5, and x3dom. The code loads CSV data from a GitHub gist, parses each row into a multi-series format, and binds it to the chart via `chartHolder.datum(data).call(myChart)`. The chart component is created with `d3.x3d.chart.barChartMultiSeries()`, displaying the dataset as three-dimensional bars within a web page.

Loading thumbnail…

3d for bar chat

This example renders a 3D bar chart of car manufacturer sales data for the first six months of the year. The multi-series bar chart displays monthly values for each manufacturer, with the third dimension provided by the d3-3d library and visualized in an X3DOM scene. The code loads CSV data from a GitHub gist, parses it into monthly series per manufacturer, and uses d3-x3d's `barChartMultiSeries` component alongside d3.v5 scales and axes for layout, all within a React-compatible HTML page.

Loading thumbnail…

bar graph in 3d

This example visualizes the top bikes based on cost as a 3D bar chart. The chart displays multi-series bars, comparing each bike's cost and quantity sold in June, using data loaded from a CSV file. It uses the `d3-3d` and `d3-x3d` libraries, which integrate with D3 v5 and the X3D renderer to create the three-dimensional scene. The code defines a `d3.x3d.chart.barChartMultiSeries()` component and populates it with parsed data via the `csv()` function.

Loading thumbnail…

Untitled

This interactive 3D scatter plot visualizes the Iris dataset, displaying sepal length, sepal width, and petal length along the three axes. The visualization is built with Plotly.js, using its `scatter3d` trace type to render markers with a green outline. Data is loaded asynchronously via D3's `d3.csv` function, which parses rows from a remote CSV file. Each axis is configured with custom titles and distinct background and grid colors, while the plot's layout margins are minimized to maximize the chart area within its container.

Loading thumbnail…

scattered plot 3d

This example displays the Iris dataset as an interactive 3D scatter plot using Highcharts. Each point represents a flower sample, plotted across petal length, sepal length, and petal width axes. The chart supports mouse and touch dragging to rotate the view, adjusting the alpha and beta angles of the 3D perspective. Data is loaded from a CSV file via D3.js, while the scatter points are rendered with Highcharts’ scatter3d chart type, featuring radial gradient colors and a visible frame.

Loading thumbnail…

ic6 scattered plot

This visualization displays the Iris dataset as a scatter plot, encoding petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa in light green, versicolor in purple, and virginica in red). The code loads CSV data via `d3.csv`, parses numeric columns, and uses `d3.scaleLinear` with `d3.extent` to set the scales and `d3.axisLeft`/`d3.axisBottom` for the axes. It renders circles with SVG, though it also attempts to set `rx` and `ry` attributes (using sepal measurements) for each mark, a quirk that has no visual effect on circles. The chart is built in React with D3 v6, filling the browser window and labeling axes as "Petal length" and "Sepal length."

Loading thumbnail…

ic6: cost of bikes data

This chart displays the cost of various bikes using a horizontal bar chart, with bike names on the y-axis and dollar amounts on the x-axis. The bars are rendered as SVG rectangles colored green, with axes generated using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The data is loaded from a CSV file via `d3.csv` and parsed to numeric cost values. The visualization demonstrates custom axis formatting with `format` and removal of domain lines for a cleaner presentation.

Loading thumbnail…

Rendering marks and channels with D3.js and SVG

This example displays a bar chart of store data, showing the relationship between store size and type. Written in React, the visualization uses D3.js to load CSV data from a remote URL, then maps the data to SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with axis ticks and labels generated via `xScale.ticks()`.

Loading thumbnail…

loading and parsing the csv data

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset’s size, row count, and column count in a styled HTML `<pre>` element. It fetches stock data from a remote GitHub gist URL via `d3.csv`, then uses `d3.csvFormat` to calculate the file size in kilobytes. The page includes a heading, an embedded star SVG image, and applies CSS for visual formatting, all within a basic React-free HTML document.

Loading thumbnail…

Smiley

This example shows a smiley face rendered as an SVG graphic using React and D3. The face consists of a skyblue circle for the head, two smaller circles for eyes, and a mouth created with D3’s `arc` generator. The code defines constants for dimensions, positions, and radii, then uses a React component to output SVG elements. The `mouthArc` uses `d3.arc` with specified inner and outer radii and start/end angles to form the smile. The rendering approach combines React’s declarative UI structure with D3’s shape-generation API.