Abhinay-Mannepalli

@Abhinay-Mannepalli·5 public vizzes

Dynamic Linechart

A dynamic line chart visualizes electric production over time, progressively revealing data points as the animation advances. The chart uses D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while a `line()` generator draws the path and circles mark each observation. Data from the Electric_Production dataset is loaded via `d3.csv` and parsed with `d3.timeParse`. The visualization animates by incrementing the number of plotted points, updating the SVG in a `setInterval` loop.

Feb 24, 2023

Loading thumbnail…

Dynamic Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying relationships between sepal and petal measurements. Users can dynamically switch which measurement appears on each axis using dropdown menus built with a custom D3 module. The visualization uses D3's `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `transition()` animates point movement when axis selections change. Circles enter with a radius-growing animation and smoothly transition positions over one second, with the SVG rendered in React.

Feb 24, 2023

Loading thumbnail…

Vizhub3

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository as an interactive scatter plot, mapping miles per gallon against horsepower. Each circle represents a car model, with color encoding the country of origin, size encoding weight, and tooltips revealing the model name. The code uses the Vega-Lite API (via the `vega-lite-api` wrapper) to define the chart declaratively, with D3.js handling CSV data loading. Custom configurations adjust axis styling and typography for readability, and the visualization auto-fits to the browser window dimensions.

Feb 24, 2023

Loading thumbnail…

Fork of Daily new cases of Covid in Italy - Scatter Plot

This scatter plot visualizes the daily new Covid-19 cases in Italy over time, with point radius encoding the number of patients in intensive care. The x-axis uses `d3.scaleTime`, while the y-axis and point size use `d3.scaleLinear` and `d3.scaleSqrt`, respectively. A button toggles an overlaid path generated by `d3.line`. Data is fetched as CSV from the Italian government’s public repository and rendered as SVG circles.

Feb 24, 2023

Loading thumbnail…

scatterplot

This D3.js v7 scatter plot visualizes the Iris Dataset, plotting sepal length against petal length for 150 flowers. The chart uses `scaleLinear` to map the continuous measurements and `axisLeft`/`axisBottom` from D3 for labeled axes. Data is loaded from a CSV file via `fetch` and parsed with `csvParse`. Points are rendered uniformly without encoding the species variable, though the dataset includes three iris species. The plot updates responsively to fill the browser window.

Feb 24, 2023