neeharika2023@gmail.com

@neeharika0315·13 public vizzes

Jayasai Scatter Plot

This scatter plot visualizes the relationship between bill length and flipper length in the Palmer Penguins dataset from @curran/penguins. The visualization filters out rows with missing values, then uses d3.scaleLinear with extents to map data to x and y positions. Circles represent individual penguins with a radius of 153/20 and opacity of 629/1000, rendered over a light gray inner rectangle. The chart leverages the @curran/responsive-axes library for labeled axes and observeResize for responsive sizing, with all rendering handled through D3 selections.

Mar 28, 2024

Loading thumbnail…

jayasai reusable Scatter Plot

This animated scatter plot visualizes bird measurements, cycling through tail length, beak length, beak width, and wingspan as the x-axis variable against wingspan on the y-axis. Data is loaded from a CSV file using D3’s `csv` function, while the reusable `scatterPlot` module builds scales with `scaleLinear`, axes via `axisLeft` and `axisBottom`, and updates circles every two seconds with `setInterval`. The visualization resizes to the full viewport and uses SVG rendering.

Mar 28, 2024

Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes the opening prices of houses over time, with months on the x-axis and price on the y-axis. The visualization combines a smooth line and a semi-transparent red filled area beneath it, using D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis`. Rendered as an SVG within a React app, it loads CSV data from a remote gist. Axis labels and tick formatting are customized via `axisBottom` and `axisLeft`, with distinct styling for ticks and labels.

Mar 27, 2024

Loading thumbnail…

Fork of Line Chart

This example shows the opening price of houses over time as a smooth, curved line chart. The visualization uses D3.js version 7 within a React component to fetch and process CSV data, scaling time on the x-axis and price on the y-axis. The line is rendered using the `d3.line` generator with `curveBasis` for smooth interpolation, while axes are manually drawn with `scaleTime` and `scaleLinear`. The chart includes labeled axes for "Months" and "Opening price," with styled tick marks and a title, all rendered as SVG elements.

Mar 27, 2024

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes travel expenses by category, displaying each expense segment with its corresponding price label and an aligned legend that pairs color swatches with specification names and values. The chart uses D3 v5 APIs including `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal()` to compute the pie geometry and color mapping, with data loaded asynchronously from a remote CSV via `d3.csv()`. Rendered as an SVG, the chart positions segments and legend elements through D3’s selection and attribute methods, with text formatting applied via `d3.format()`.

Mar 27, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four measured attributes—tail length, beak length, beak width, and wingspan—on the x-axis every two seconds while wingspan remains on the y-axis. Built with D3.js, it uses `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes. The reusable chart pattern, defined in `scatterPlot.js`, updates smoothly via a `setInterval` loop that re-calls the chart function, rendering SVG circles and animated transitions.

Mar 27, 2024

Loading thumbnail…

Neeharika Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, mapping wingspan on the x-axis and beak length on the y-axis. It uses D3 v7 with SVG rendering and animation. The chart is built with a modular, reusable function that supports configurable dimensions, margins, and axis labels. Each data point is represented by a colored circle, with colors assigned from the categorical scheme. The example demonstrates how to structure a chart as a configurable function, separating concerns and enabling easy customization. Hover effects and transitions are included to enhance interactivity and visual feedback.

Mar 27, 2024

Loading thumbnail…

ICE-6 Scatter Plot

This example presents an ICE-6 scatter plot, a static visualization that displays individual data points as circles within a bounded area. The plot uses D3.js (v7) to create the visualization, with the code defining scales for positioning, axes for orientation, and SVG elements for rendering. The data appears to be plotted without any encoding for size or color, suggesting a focus on spatial distribution rather than multidimensional analysis. The implementation relies on standard D3 methods like `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, and the visualization is contained in a simple HTML file with a single container div.

Mar 27, 2024

Loading thumbnail…

Neeharika Reusable que1

This responsive scatter plot visualizes bird morphometric data from ICE7.csv, plotting wingspan against beak length for 30 observations across three species (Sparrow, Robin, and Finch). Built with D3.js v7 and rendered as SVG, the chart uses a reusable function pattern where the data container ID and attribute names are passed as arguments, making it flexible for different datasets. Points are drawn as steelblue circles, with linear scales mapping the quantitative attributes to pixel coordinates. The plot includes axes generated with D3's axis components, and the visualization is fully responsive due to the viewport meta tag. While the current implementation colors all points uniformly, the dataset includes a species column, suggesting potential for color encoding by species in future iterations. The code demonstrates a clean separation of concerns with a reusable chart function and data loading via d3.csv.

Mar 27, 2024

Loading thumbnail…

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

This example visualizes the top 10 food-producing countries using a horizontal bar chart rendered as SVG within a React component. It loads CSV data from a GitHub gist via `d3.csv`, scales the bars with `scaleBand` and `scaleLinear`, and draws tick marks and labels manually using `xScale.ticks()`. The code integrates React hooks (`useState`, `useEffect`) with D3 v5 selection and scale APIs, producing a clean, data-driven layout with orange bars and labeled axes.

Mar 18, 2024

Loading thumbnail…

Fork of Fork of HTML Starter

This example loads a small CSV dataset of color names from a remote URL and prints a summary of its size, row count, and column count into a preformatted text block. It uses d3.csv to fetch and parse the data, and d3.csvFormat to calculate the approximate file size. Below that, the page displays four static SVG circles, each filled with a hex color from the dataset and labeled with its color name. The page is a minimal React-free HTML document that combines D3 v7 with inline SVG rendering.

Mar 4, 2024

Loading thumbnail…

Neeharika

This example renders a simple SVG scene of a man waiting at a bus stop. It uses D3 v6 to append and position basic geometric shapes—rectangles and circles—onto a fixed 800x400 SVG canvas, creating a background, ground, bus stop sign, and a stylized human figure. The visualization is built entirely with D3 selection methods like `select` and `append`, and sets attributes such as `cx`, `cy`, `x`, `y`, and `fill` to define the scene. No data is loaded; the illustration is constructed directly through procedural code.

Feb 28, 2024

Loading thumbnail…

Fork of Neeharika

A force-directed network visualization renders five nodes as circles and five links as lines in an SVG canvas. The layout is computed with `d3.forceSimulation`, using `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements, while drag interactions are enabled through `d3.drag`. Node positions update on each simulation tick, with the data defined inline as JavaScript arrays.

Feb 28, 2024