Mounikadontireddy

@Mounikadontireddy·15 public vizzes

DV ICE 8 Network Graph

This network graph visualizes friendships among eight people. Using D3.js v6, it employs `d3.forceSimulation` with force-directed layout, including `forceLink` for connections, `forceManyBody` for repulsion, `forceCollide` for node spacing, and `forceCenter` for centering. Nodes are draggable circles with labels, and links are directed with arrow markers. The code reads data from `data.json`, renders via SVG, and highlights nodes on hover with a red stroke.

Apr 13, 2023

Loading thumbnail…

DV ICE-8 Country Map

This example renders a choropleth-style map of India’s states, colored via `d3.scaleOrdinal` with `schemeCategory10`. It uses `d3.json` to load a TopoJSON file, `topojson.feature` to extract state polygons, and `d3.geoPath` with a `geoMercator` projection to draw each state as an SVG path. State names are placed at path centroids. Hovering highlights a state in green via CSS, while the background uses a linear gradient. Data comes from a GitHub-hosted TopoJSON dataset.

Apr 13, 2023

Loading thumbnail…

DV ICE - 8 World Map

This example presents an interactive world map rendered as an SVG using D3 v5 and TopoJSON. It displays country boundaries and ocean areas based on the world-atlas countries-110m dataset, which is loaded via d3.json. The map uses d3.geoMercator projection and d3.geoPath to convert GeoJSON features into paths. Hovering over a country changes its fill color via CSS.

Apr 12, 2023

Loading thumbnail…

ICE 7 Area Chart for Rice Production

This area chart visualizes rice production in the US from 1991 to 2021, using an SVG rendered with D3 v5. The chart displays a smooth curve (via `curveBasis`) with a filled teal area beneath it, while axes include gridlines and labeled ticks. The code loads CSV data, parses years with `d3.timeParse`, and uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes. `line` and `area` generators draw the data, with the Y-axis formatted using `format('.3s')`.

Mar 26, 2023

Loading thumbnail…

ICE 7 Line Chart Production of Rice

This line chart displays rice production in the US from 1991 to 2021, with the y-axis showing production in tonnes and the x-axis representing years. The visualization uses D3 v5 to load and parse CSV data, then applies `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` to generate the path. Grid lines and colored labels are styled via CSS, with the SVG rendering the final chart in a centered layout.

Mar 26, 2023

Loading thumbnail…

ICE-7 DV Billionaire details

A pie chart displays the net worth of the top 10 billionaires, with each slice labeled in billions of dollars and a color-coded legend listing names and values. The data is loaded from a CSV file using `d3.csv` in D3 v5. The visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with an SVG renderer to generate segments, labels, and interactive legends.

Mar 26, 2023

Loading thumbnail…

ICE-7 DV Pie Chart Car Sales

This pie chart displays 2022 US auto sales by brand, showing each manufacturer’s market share as a percentage and total units sold in thousands. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw SVG path segments, with `scaleOrdinal` assigning categorical colors. A legend on the right lists each brand with its percentage and sales volume, formatted via `d3.format`. Data is loaded asynchronously from a CSV gist using `d3.csv`, and the chart is rendered with SVG elements in a blank 960×450 canvas.

Mar 26, 2023

Loading thumbnail…

ICE-7 DV Line Graph

This SVG line graph visualizes overseas GDP data from 1971 to 1980, plotting the change in data values over time. The chart uses a time-scaled x-axis for the period and a linear y-axis for GDP value, with axis labels and a blue line path. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render the visualization, loading CSV data from a GitHub gist. Data processing parses dates into time objects before scaling and mapping coordinates to the SVG canvas.

Mar 26, 2023

Loading thumbnail…

ICE-7 DV Pie Chart for ODB Data

This example visualizes monthly spending across countries using a D3 pie chart. It displays each country’s GDP per capita as a proportional slice, with country names overlaid on the segments and a legend showing the dollar values. The chart is rendered as an SVG, using d3.pie, d3.arc, and d3.scaleOrdinal for slicing and coloring. Data is loaded asynchronously from a CSV file via d3.csv, and the legend is manually drawn with SVG rects and text elements.

Mar 25, 2023

Loading thumbnail…

ICE-7 DV Reusable Scatter Plot for Iris Data

This reusable scatter plot displays the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes. The visualization is rendered as an SVG using a custom `scatterPlot` factory function, which leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` from D3. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with numeric columns parsed on ingestion. The chart dynamically fills the browser window, showing all three Iris species with symbols differentiated by the `symbolValue` accessor.

Mar 25, 2023

Loading thumbnail…

Scatter Plot for Penguin Dataset

This scatter plot visualizes the Penguin Dataset, mapping flipper length on the x-axis and body mass on the y-axis. Each circle represents a penguin, colored by species (cyan, gold, and light green), with additional culmen dimensions stored as attributes. The visualization uses d3.csv to load data, scaleLinear for axes, and axisBottom/axisLeft for ticks. SVG circles are rendered with d3 selection and join methods, while axis labels and a title are appended as text elements.

Mar 12, 2023

Loading thumbnail…

ICE-6 Bar Charts

A horizontal bar chart displays the GDP per capita for 15 countries, sourced from a CSV file. The chart uses SVG for rendering and is built with React, D3 v5, and D3's scaleBand and scaleLinear for axis scaling. It uses D3's csv loader and max functions, and renders the chart with a blue gridline, labeled axes, and colored bars.

Mar 12, 2023

Loading thumbnail…

ICE-5 Data Visualization

This example displays metadata about an overseas dataset, including file size, row count, and column count, on an HTML page with a custom background image. It loads a CSV using `d3.csv` from a GitHub gist URL, then uses `d3.csvFormat` to calculate the data size in kilobytes. The page is styled with CSS and uses D3 v7 to fetch and process the dataset. Both the page title and the dataset link are presented as clickable elements, with the metadata output displayed in a preformatted block.

Mar 4, 2023

Loading thumbnail…

This is a smiley face

This example renders a smiling face as an interactive-less SVG composition using React to define reusable visual components and D3's `arc` generator to draw the mouth. The smiley consists of two black eyes with wheat-colored pupils, a red nose, and a pink circular head with a curved mouth path. All shapes are positioned within an SVG canvas, mirroring the classic smiley structure but with custom colors and styling applied through CSS classes. The code demonstrates integrating D3’s geometric path utilities with React’s component-based rendering approach.

Mar 2, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A fork of Smiley Face Part II renders a full-screen yellow smiley face using React and D3 v7, with SVG circles for the head, eyes, and mouth. The face is centered dynamically based on window dimensions, and the head radius is calculated from the viewport height minus half the stroke width. The code uses ReactDOM to mount the component and relies on D3 only for its version-loaded library, while the drawing itself is pure SVG primitives within a transformed group.

Mar 2, 2023