Niharika Reddy Amanaganti

@dewnina·12 public vizzes

Reusable D3 Scatter Plot_Niharika

This visualization displays the Iris dataset using an animated scatter plot that cycles through different feature combinations every two seconds. The plot represents each flower species with distinct symbols created through D3's `symbol` generator and `scaleOrdinal` color encoding, with axes updated dynamically via `axisBottom` and `axisLeft`. The reusable `scatterPlot` function leverages D3 v6 scales like `scaleLinear` and `scaleOrdinal` to map sepal and petal measurements, rendering everything as SVG elements that re-bind data on each interval.

Mar 26, 2023

Loading thumbnail…

Area_chart_Niharika

An area chart visualizes pollution percentages by year, filling the space beneath a smooth curve with orange. The data comes from a GitHub gist and is loaded via `d3.csv`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The area path is generated with the `d3.area` generator and a `curveBasis` interpolation, all drawn as SVG elements.

Mar 25, 2023

Loading thumbnail…

Fork of line_graph_Niharika

This line chart visualizes pollution levels over time, using a smooth, curved line to connect data points. The visualization is built with D3 v5 and rendered as an SVG, with axes labeled for "Year" and "pollution." The code uses D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the path. Data is loaded from a gist CSV file containing pollution percentages.

Mar 25, 2023

Loading thumbnail…

Fork of Pie Chart _Niharika

This pie chart displays the percentage marks achieved by a student in each class subject. The D3.js v5 code loads a CSV dataset from a GitHub gist, computes the pie layout, and renders colored SVG arc segments with percentage labels. A legend on the right maps each color swatch to its corresponding subject and value, while the chart uses `d3.pie()` and `d3.arc()` for geometry and `d3.scaleOrdinal` for color assignment.

Mar 25, 2023

Loading thumbnail…

Reusable D3 Scatter Plot_Niharika

This interactive scatter plot explores the Iris dataset, displaying sepal length against petal width as animated circles. It cycles through different column pairings every two seconds, letting viewers see relationships between all four flower measurements. The visualization uses D3 v6’s modular API, including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, to render axes and marks in SVG. Data is loaded from a CSV file, and the chart is built as a reusable function with configurable width, height, margins, and radius.

Mar 24, 2023

Loading thumbnail…

Penguin Data _Niharika Reddy Amanaganti

This scatter plot visualizes penguin measurements, with flipper length on the x-axis, body mass on the y-axis, and each point colored by species (orange for Adélie, red for Chinstrap, green for Gentoo). Using D3 v5 and React, the code loads a CSV dataset via `d3.csv`, parses numeric columns, and renders circles with `d3.scaleLinear` for axes and `d3.axisLeft`/`d3.axisBottom` for tick marks. The SVG is sized to the window, and point radius is fixed while culmen dimensions are stored but not visually mapped.

Mar 11, 2023

Loading thumbnail…

ICE_6 Niharika Reddy Amanaganti

This visualization displays a horizontal bar chart of the top 15 songs by duration, with song names on the y-axis and duration values on the x-axis. The chart uses React to manage state and render the SVG, while D3 v5 provides the scaling functions (`scaleBand`, `scaleLinear`), axis generation, and CSV data loading. Data is fetched from a GitHub gist containing song information, and the bars are drawn as SVG rectangles with blue tick lines and labels generated from the linear scale’s tick values.

Mar 10, 2023

Loading thumbnail…

ICE5_NiharikaReddyAmanaganti

This example displays metadata about a Top Songs dataset, including its size in kilobytes, row count, and column count, over a yellow background with an embedded SVG image. The page loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then formats the data with `d3.csvFormat` to calculate the file size. The computed message is inserted into a `<pre>` element via `textContent`. Styling is handled entirely through CSS, which sets the background image, colors, and text alignment.

Mar 4, 2023

Loading thumbnail…

Let's make a face with D3.js! By Niharika Reddy Amanaganti

A smiley face built with D3.js demonstrates fundamental DOM manipulation and animation. The face includes eyes, blush, a nose, mouth, teeth, ears, hair, and hands, all rendered as SVG elements. Eyebrows transition vertically using `transition()` and `attr()`, creating a moving expression. The code uses D3 v5 selections, `arc()` for path generation, and `selectAll().data().enter()` to bind data for drawing teeth.

Feb 24, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js! Niharika

A yellow smiley face with animated eyebrows demonstrates DOM manipulation with D3.js v5. The face is built using SVG primitives: a circle for the head, two circles for eyes, rectangles for brows, and a path generated with the `d3.arc` function for the mouth. Eyebrows move up and down through chained `transition().duration()` calls that change the group's transform attribute. The code imports `select` and `arc` from D3, sets coordinates dynamically from SVG dimensions, and runs entirely in the browser at 960x500 resolution.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's make a face with D3.js! By Niharika Reddy Amanaganti

A smiling face drawn with SVG shapes is centered on a pink background, with animated eyebrows that repeatedly move upward and downward. The code creates the face using D3 selections and shape generators, appending circles for the eyes and head, rectangles for the eyebrows, and a `d3.arc` path for the mouth. Eyebrow motion is driven by chained `transition().duration()` calls in D3 v5, manipulating a group element’s transform attribute.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering with D3.js. The face is constructed from SVG circles for the eyes and face, a path created with the `d3.arc` function for the mouth, and rectangles for the eyebrows. Animated eyebrow movement is achieved using `transition()` and `attr` chaining over two 2000-millisecond intervals. The example uses D3 v5 and shows how to select and manipulate SVG elements with data-driven methods.

Feb 24, 2023