Nirupama Karanam

@Nirupama-123·13 public vizzes

ICE_8_NIRUPAMA_NETWORK

This interactive network visualizes a family tree, mapping parent-child relationships from a CSV dataset loaded from a GitHub Gist. It uses a force-directed layout with d3.forceSimulation, incorporating forces for links, charge, centering, and collision. Node colors encode generation level, determined using d3.stratify, and draggable nodes with hover tooltips enhance exploration. The visualization is rendered in SVG using D3.js v7.

Oct 31, 2025

Loading thumbnail…

ICE_8_NIRUPAMA_TREES

This compact family tree visualization displays hierarchical relationships across multiple generations, with nodes colored by depth to distinguish family levels. It loads CSV data from a GitHub Gist using `d3.csv` and `d3.autoType`, converts rows into a hierarchy via `d3.stratify`, and positions nodes with the `d3.tree` layout. The SVG rendering employs curved path links through `d3.linkVertical`, color-coded circles using `d3.scaleOrdinal`, and an interactive tooltip on mouse events.

Oct 31, 2025

Loading thumbnail…

ICE_8_NIRUPAMA_WORLDMAP

This interactive world map displays the percentage of internet users per country in 2023, coloring each nation with a viridis sequential scale from blue to yellow. The visualization uses D3.js v7 with a Natural Earth projection, rendering country borders and a graticule as SVG paths. It employs `d3.geoPath` for geometry projection and `d3.scaleSequential` with `d3.interpolateViridis` for the color encoding, while a custom tooltip provides hover details. Data comes from a CSV containing internet usage statistics, with additional hardcoded values for demonstration purposes.

Oct 31, 2025

Loading thumbnail…

ICE_7_NIRUPAMA_AREACHART

This area chart displays the average car price per year, aggregated from a Cars.csv dataset. It uses D3 v7's `d3.csv` and `d3.rollup` to process the data, then renders an SVG area chart with `d3.area` and `d3.scaleLinear`. The chart includes axes, gridlines, and labeled axis titles, with interactive tooltips on data points showing the year, average price, and model count.

Oct 25, 2025

Loading thumbnail…

ICE_7_NIRUPAMA_LINECHART

This interactive line chart visualizes BMW car sales volume by year using D3.js v7. The chart loads CSV data from a GitHub gist and aggregates sales figures per year using d3.rollup and d3.sum. It renders an SVG line path with d3.line, along with axes, dashed gridlines, and circular data points. Hovering over each point triggers tooltip interactions using d3.transition and event handlers, displaying the year and formatted sales value. The visualization uses linear scales for both x and y axes to plot the trends.

Oct 25, 2025

Loading thumbnail…

ICE_7_NIRUPAMA_PIECHART

This pie chart visualizes the distribution of cars by brand, where each slice's angle represents the count of cars for that brand. The chart is rendered as an SVG using D3 v7, with data aggregated from a CSV file via `d3.csv` and `d3.autoType`, then grouped using `d3.rollup`. Slices are drawn with `d3.arc`, colored using a Tableau10 categorical scale, and labeled with brand names. An interactive legend on the right lists each brand alongside its count, with color swatches matching the slices.

Oct 25, 2025

Loading thumbnail…

ICE_7_Nirupama_Scatterplot

This scatterplot displays the relationship between mileage (MPG) and price for a dataset of cars, with each point colored by brand using a Tableau10 ordinal scale. The reusable component pattern in `index.js` builds the SVG chart with D3 v7, using `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Hover tooltips appear via the SVG `title` element, showing the car model, mileage, price, and brand. Data loads from a raw GitHub Gist CSV file, processed with `d3.csv` and `d3.autoType`. The legend, positioned to the right, lists all brand categories with matching colors.

Oct 25, 2025

Loading thumbnail…

Fork_ICE_6_Nirupama

This interactive scatter plot visualizes the relationship between car mileage (MPG) and price, with each point colored by car color. The chart uses D3 v7 and loads data from a GitHub Gist, presenting an SVG rendered via a viewBox for responsiveness. Users can hover over points to see details. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors from ColorBrewer, and d3.csv for data loading, with a d3-legend for the color key.

Oct 19, 2025

Loading thumbnail…

ICE_6 scatter plot_Nirupama

This scatter plot visualizes the relationship between Horsepower and Price_in_thousands for car models, with Sales_in_thousands encoded as circle size and Vehicle_type as color. The SVG visualization uses d3.v7 with a linear x-scale for horsepower, a linear y-scale for price, and a sqrt scale for the size encoding. Interactive hover tooltips reveal model-specific details. Data comes from Car_sales.csv, rendered with grid lines and axis labels. Color and size legends provide contextual mapping.

Oct 17, 2025

Loading thumbnail…

ICE-6_fork

This horizontal bar chart displays the top 10 car models by price, sorted from highest to lowest, with each bar assigned a distinct color from combined D3 color palettes. Built with React and D3 v5, the visualization renders as SVG and includes value labels at bar ends, gridlines, and an annotation for the highest-priced model. Hover interactions trigger a custom tooltip showing brand, price, and mileage. Data loads from a CSV file using d3.csv, with linear and band scales via scaleLinear and scaleBand.</s>

Oct 16, 2025

Loading thumbnail…

ICE_5_Nirupama

This example loads a cars dataset from a raw GitHub gist and presents an overview with summary statistics, a preview table of the first 10 rows, and a bar chart counting cars by color. It uses D3 v7 to parse the CSV, compute aggregated values with `d3.rollup`, and render the chart as an SVG with `d3.scaleBand` and `d3.scaleLinear`. Data is displayed in an HTML table, and the visualization includes styled axes and color-coded bar fills.

Oct 3, 2025

Loading thumbnail…

ICE_5

This visualization displays Fisher's Iris dataset, plotting sepal length against sepal width for three iris species (setosa, versicolor, and virginica) using a scatter plot. Each species is represented by colored circles with distinct BBC-inspired palette colors, and hovering over a legend item fades non-matching data points. The D3.js code loads CSV data via `d3.csv`, constructs linear scales with `scaleLinear`, and renders axes with `axisBottom` and `axisLeft`. A `ResizeObserver` manages responsive sizing.

Oct 2, 2025

Loading thumbnail…

ICE_5

This interactive scatter plot visualizes sepal length versus sepal width for three iris species from Fisher's dataset. Hovering over legend items dims non-matching points to highlight species-specific clusters. The visualization uses D3.js v7 with `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs. Circle size and styling draw from a configurable BBC color theme, while a `ResizeObserver` handles responsive dimension updates.

Oct 2, 2025