P

Prathyusha0304

@Prathyusha0304·26 public vizzes

Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

Loading thumbnail…

Fork of SwedisH MAP

This visualization displays a choropleth map of Sweden’s counties, rendered as an SVG using React and D3 v5. The map uses the `geoMercator` projection and `geoPath` to draw both county features and interior boundaries from TopoJSON data. County regions are filled in brown with green strokes, while internal borders appear in black. The data comes from a GitHub-hosted TopoJSON file, and the projection is fitted to the viewport using `fitExtent`.

Loading thumbnail…

Fork of Social Network Graph ICE-8

A force-directed network graph of a small social circle, with seven people (such as Prathyusha and Vineela) as black nodes connected by green edges labeled with relationship types like "Friend with." Node size encodes the group value of 5, and edges are weighted by a numeric value. Built with D3 v6 (d3.forceSimulation, d3.forceManyBody, d3.forceCollide), the SVG visualization supports interactive drag-and-drop repositioning. Node highlighting occurs on mouseover via the nodeHover class, with styling defined in an external CSS file.

Loading thumbnail…

Fork of Family Tree ICE-8

This interactive family tree visualization displays a multi-generational hierarchy, with each node representing a person and colored by a `type` field. The SVG rendering uses D3.js v3’s layout tree and zoom behavior to support panning and scaling. Node colors distinguish generations, while red arrows mark links between relatives. The tooltip and clickable nodes provide additional interaction, with data loaded from an external JSON file.

Loading thumbnail…

Fork of Fork of ICE 8 Family Tree

This example displays a family tree as a horizontal dendrogram, with each node colored according to its branch. The visualization uses D3 v5’s `tree` layout and `hierarchy` to compute node positions, while `linkHorizontal` generates the curved links between parent and child nodes. Interactive pan and zoom are enabled via D3’s `zoom` behavior, and SVG `text` elements render labels with sizes scaled by depth. The data is loaded as JSON and parsed with `d3.json`, with node colors applied directly from the dataset’s `color` property.

Loading thumbnail…

World Map with Topojson data

This example displays a world map using TopoJSON data, rendering countries as blue-filled paths with pink strokes against a white spherical backdrop. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG paths, while the TopoJSON library’s `feature` method extracts country geometries from a remote JSON file. The visualization loads data asynchronously via `json` and appends each country path to the SVG canvas, demonstrating a straightforward choropleth-free baseline of global boundaries.

Loading thumbnail…

Fork of Fork of Fork of Area Chart

This chart shows ten years of car sales as a single black line with a filled area beneath it, using smoothed curves via `d3.curveBasis`. The visualization loads a CSV from a GitHub gist, parsing the year and sales columns, then renders the axes and marks as SVG paths. It uses `d3.scaleTime` and `d3.scaleLinear` to map data, and `d3.axisBottom` and `d3.axisLeft` for grid lines and tick labels. The chart is generated entirely with D3 v5 and rendered as SVG within a centered HTML layout.

Loading thumbnail…

Fork line chart section 3

This fork line chart visualizes 10 years of automobile production, plotting total sales over time with a black line on an SVG canvas. D3’s scaleTime and scaleLinear map the date and sales data, while axisBottom and axisLeft generate labeled axes with grid lines. The dataset is loaded from a gist CSV, and the line is drawn using d3.line, with years parsed via timeParse.

Loading thumbnail…

Fork of Fork of Area Chart

This visualization displays ten years of car sales data as a combination of a line chart and an area chart. The line traces the trend in sales over time, while the shaded area beneath it emphasizes the cumulative magnitude. The chart uses a black stroke for the line and a black fill for the area, with red axis labels and a bold title. It loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the SVG using `d3.line`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The visualization is built with d3.v5 and uses the `curveBasis` interpolation for smooth curves.

Loading thumbnail…

Fork of Fork of Area Chart

This example visualizes 15 years of car sales as a combined line and area chart, with a smooth curve showing sales trends over time and a grey filled region beneath the line. It uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.area` with a `curveBasis` interpolation to render the SVG paths. The data comes from a CSV file parsed with `d3.csv` and `d3.timeParse`, with axes labeled and gridlines generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Prathyusha Nemani

This pie chart visualizes the top three countries by deaths from water pollution in 2020, displaying each country’s death count in thousands as a labeled arc segment. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate and color the proportional slices, with SVG text positioned via `arcGenerator.centroid`. A custom legend shows country names and death values, while the data is fetched as CSV from a GitHub gist and formatted using D3’s `format` function.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its death count in thousands. The chart is rendered using D3.js v5, fetching CSV data from a GitHub gist. It uses d3.pie to compute arc segments, d3.arc to generate path geometry, and d3.scaleOrdinal for color mapping. Slice labels are positioned via arc centroid calculations, while a legend lists countries with their corresponding values and colored swatches. The SVG output is styled with custom CSS for typography.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Pie Chart

This example visualizes the top 5 countries by reported deaths in 2020 as a pie chart rendered in SVG. Each slice is colored and labeled with the number of deaths, while a legend to the right lists country names and their corresponding totals. The code fetches CSV data from a GitHub gist, parses it with d3.csv, and uses d3.pie and d3.arc to generate the chart. Colors are assigned via d3.scaleOrdinal, and labels are positioned using arc.centroid. The page loads d3 v5 from unpkg and embeds the logic in a bundle.js file.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Pie Chart

This D3 pie chart displays the top 5 countries by death count in 2020, with each slice labeled and a corresponding legend showing the country name and formatted value. It loads CSV data via `d3.csv`, computes arc segments using the `pie` and `arc` helpers, and colors slices using `scaleOrdinal` with a fixed range. The visualization is rendered as SVG, with custom text and legend elements added to the same canvas.

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Pie Chart

The visualization shows the top five countries by reported deaths in 2020 as a donut-style pie chart with a color-coded legend listing each country and its corresponding death count. Data is loaded from a CSV file via `d3.csv`, then processed with `d3.pie` and rendered as SVG paths using `d3.arc`, while `d3.scaleOrdinal` assigns the section colors. The chart also draws a legend group with rectangles and text, and uses `d3.format` to display concise numeric values. The SVG canvas is 900×250 pixels, with the pie centered at (250,250) and the legend placed to the right.

Loading thumbnail…

Fork of Fork of ICE 7 Pie Chart

This visualization shows the top five countries by deaths in 2020 using a pie chart, with a legend displaying each country’s name and death count. The code loads CSV data from a GitHub gist via `d3.csv`, processes it with `d3.pie`, and renders slices using `d3.arc` with SVG paths. Colors are assigned via `d3.scaleOrdinal`, and labels are positioned using `arc.centroid`. A separate legend group appends rectangles and text, formatting values with `d3.format`. The chart is built with D3 v5, rendering entirely as SVG elements.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This scatter plot visualizes the Iris dataset, displaying the relationship between petal width and sepal length. Each circle represents a flower, colored by species: grey for setosa, green for versicolor, and pink for virginica. The visualization uses D3.js's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render axes and the `join` operation for SVG circles. Data is loaded via `d3.csv` from a GitHub gist, with the plot rendered as an SVG, and the code demonstrates a reusable `scatterPlot` function with configurable dimensions, margins, and radius.

Loading thumbnail…

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

A horizontal bar chart displays the top 10 most populated countries for 2019, using React for component structure and D3 v5 for scales and data loading via `d3.csv`. The visualization maps country names to a `scaleBand` y-axis and population counts to a `scaleLinear` x-axis, rendering SVG rectangles with grid lines and tick labels. Data comes from a CSV file fetched asynchronously within a `useEffect` hook.

Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 most populous countries in 2019, with each bar’s length encoding population size. The visualization uses React for component structure and state management, while D3 v5’s `scaleBand`, `scaleLinear`, and `max` are used to compute scales and domains. CSV data is loaded asynchronously via the `csv` function, and the chart is rendered as SVG, with gridlines and axis tick labels drawn manually using React elements.

Loading thumbnail…

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

A bar chart displays the top 10 most populous countries, with horizontal bars representing each country's 2019 population. The chart uses React's `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks directly in JSX. D3's `scaleBand` and `scaleLinear` position bars, while tick marks and grid lines are drawn manually using SVG elements. The data comes from a GitHub-hosted CSV file, and bars are colored with a default dark tone.

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes, with points colored by species (setosa, versicolor, and virginica). It uses D3.js v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale scales, and render axes. The visualization is built with SVG circles in a React environment, with a fixed radius, and includes rotated axis labels for sepal length and petal length, styled with a custom font.

Loading thumbnail…

IRIS Dataset Scatter plot

This D3.js scatter plot visualizes the Iris Dataset, mapping sepal length on the x-axis and petal length on the y-axis. The SVG rendering uses `d3.csv` to load and parse the data, `d3.scaleLinear` for axis scaling, and `d3.extent` to compute domains. Circles are drawn with a fixed radius, and axes are generated using `d3.axisLeft` and `d3.axisBottom`. The plot includes axis labels for sepal length, petal length, and species, with a margin layout that accommodates the tick text. The code uses `d3.select` to append elements and the `join` operator for efficient circle creation.

Loading thumbnail…

Untitled

This example demonstrates a radar-like chart that visualizes multiple data series as concentric, polygonal rings, with each axis representing a different variable. The visualization uses D3.js’s `d3.forceSimulation` to dynamically position labels and nodes, while `d3.scaleLinear` maps data values to radial distances. The chart is rendered using SVG paths generated by `d3.lineRadial` and `d3.areaRadial`, with interactive hover effects that highlight individual series. The data is embedded directly in the `index.html` file, and the code relies on standard D3 v3 APIs for scales, axes, and transitions.

Loading thumbnail…

ICE-5: Loading And parsing CSV Data

This example demonstrates a minimal workflow for loading and parsing CSV data with D3.js. It fetches a remote dataset from a GitHub gist and displays a summary message showing the file size in kilobytes, the row count, and the column count. The visualization uses `d3.csv()` to asynchronously load the data, followed by `d3.csvFormat()` to compute its string length, and then updates a `<pre>` element with the resulting text. While no visual chart is rendered, the example highlights fundamental data-loading and parsing APIs from D3 v7.

Loading thumbnail…

Fork of homework smiley face

This example shows a stylized smiley face drawn with a pink circular head, green stroke, white eyes with smaller inner circles, yellow pupils, black eyebrows and eyelashes, and a green mouth. The face is composed using React to render SVG elements, with the mouth arc generated using the d3.arc function to create the path. All shapes are positioned relative to the center of a 930 by 500 canvas.