18121a1545

@18121A1545·15 public vizzes

ICE_8_NIHARIKA_NETWORK

This interactive force-directed network visualizes the hierarchical relationships among programming languages, paradigms, families, and a root node. Node colors and radii encode type via `d3.scaleOrdinal`, while parent-child links are parsed from a CSV gist. The visualization uses `d3.forceSimulation` for layout and renders animated SVG elements in a dark-themed canvas. A fixed HTML legend overlays the chart, and the code is built with D3 v7.

Nov 1, 2025

Loading thumbnail…

ICE_8_NIHARIKA_TREES

A hierarchical tree visualization maps programming languages by paradigm and family, using a dataset loaded from a CSV gist. The visualization uses distinct shapes and colors for each layer: a diamond for the root, rounded rectangles for paradigms and families, and circles for individual languages. Built with D3 v7, the code employs `d3.stratify()` to build the hierarchy and `d3.tree()` for layout, rendering curved links and nodes as SVG elements with a dark gradient background.

Nov 1, 2025

Loading thumbnail…

ICE_8_NIHARIKA_WORLDMAP

This world map visualizes life expectancy by country, with a dark choropleth color scale and a continuous legend. The visualization uses D3.js with TopoJSON client to convert world-atlas data, joining it with a CSV dataset containing life expectancy values. Hovering over any country reveals its name and the corresponding life expectancy in years. The map renders with a Natural Earth projection, graticule lines, and an ocean background.

Nov 1, 2025

Loading thumbnail…

ICE-8 NIHA

Two map examples show how D3.js renders geographic data with TopoJSON and custom projections. The world map uses `d3.geoNaturalEarth1` and a sequential blue color scale to encode population values from a CSV, overlaid with a graticule. The US map uses `d3.geoAlbersUsa` with state boundaries from `us-atlas@3`. Both use SVG paths via `d3.geoPath` and a fixed tooltip on hover.

Oct 30, 2025

Loading thumbnail…

ICE8 NIHA

This example displays a world choropleth base map using the Natural Earth projection, offering a visually balanced view of global landmasses and country borders. The visualization loads country boundary data from the world-atlas TopoJSON file via `d3.json`, then converts it to GeoJSON features using `topojson.feature` and mesh borders with `topojson.mesh`. The projection is applied through `d3.geoNaturalEarth1()` and paths are generated with `d3.geoPath`, while the SVG output renders land polygons with hover tooltips and boundary lines through D3's selection and joining API.

Oct 30, 2025

Loading thumbnail…

Fork of Area Chart ICE-7

This fork of an area chart displays calories for campus snack items. It uses `d3.csv` and `d3.autoType` to load data, with a point-based x-axis (`scalePoint`) and a linear y-axis. The visualization combines a steel-blue area, a yellow line (`d3.line` with `curveMonotoneX`), and orange points. Interactive tooltips appear on mouseover, and SVG is rendered with animation support via D3 v7.

Oct 26, 2025

Loading thumbnail…

Fork of Line Chart ICE 7

This visualization shows a line chart of calorie counts for campus snack items, with each point labeled by snack name and a hover tooltip displaying the exact calorie value. The chart uses D3 v7 with SVG rendering, employing `d3.csv` to load data, `d3.scalePoint` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the orange line connecting red data points. Grid lines and a rotated x-axis label enhance readability, while mouseover events trigger the tooltip transitions.

Oct 26, 2025

Loading thumbnail…

Fork of pie chart ICE-7

This fork of a pie chart visualizes the distribution of campus snacks by category, aggregating counts from a CSV file and displaying each category’s share with percentage labels outside the slices. It renders an SVG using d3.pie, d3.arc, and d3.rollup to aggregate data, while d3.scaleOrdinal with schemeTableau10 assigns colors. A separate HTML legend lists categories with their counts, and the tooltip shows exact values. The chart loads data asynchronously via d3.csv and uses d3.format for percentage display.

Oct 26, 2025

Loading thumbnail…

Fork of Reusable Scatter Plot ICE-7

This scatter plot shows the relationship between calorie count and price for a cafe menu of drinks and snacks, using each item’s hex color to encode its identity. Built with D3 v7 (d3.select, d3.scaleLinear, d3.axisBottom, d3.axisLeft), it renders an SVG with hover tooltips that reveal the item name, category, and both plotted attributes. The legend lists categories, and the chart reads from a CSV file containing product specifications.

Oct 26, 2025

Loading thumbnail…

Niharika Piechart

This pie chart visualizes BMW car sales distribution by model, with each slice showing the total sales volume for a specific model. The chart renders as SVG using D3.js, with labels positioned around the outer arc showing each category’s percentage share. Data comes from a CSV file loaded via `d3.csv`, aggregated with `d3.rollup`, and visualized using `d3.pie` and `d3.arc`. A color legend and interactive tooltips are also included.

Oct 26, 2025

Loading thumbnail…

Fork of Fork of Scatter Plot Reusable - ICE7

This example presents a reusable scatter plot that visualizes the relationship between car weight and horsepower, using data from a CSV file. The plot displays each car as a point with labeled axes for both variables. The implementation uses D3 v7, demonstrating a modular approach with a scatterPlot function imported from a separate JavaScript module. The main script parses numeric values from the cars dataset and applies the reusable chart to an SVG element, with the chart configured to map weight to the x-axis and horsepower to the y-axis.

Oct 24, 2025

Loading thumbnail…

Fork of Scatter Plot Reusable - ICE7

A reusable scatter plot shows the relationship between car weight and horsepower, using a dataset loaded from a CSV file. The chart is built with D3 v7 and rendered as SVG, with axes labeled accordingly. The code defines a `scatterPlot` function that configures accessor functions for the x and y data fields, and the chart is instantiated and applied to an SVG element using `d3.select` and the chart's `.data()` method.

Oct 24, 2025

Loading thumbnail…

Barchart_Niharika_ICE_6

This interactive dashboard presents campus snack data through three coordinated visualizations: a bar chart comparing a chosen metric across categories, a scatter plot examining relationships between two quantitative attributes, and a multi-series chart combining bars with an overlaid line. Built with D3 v7, the SVG-based implementation uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and includes interactive controls for metric selection, fullscreen toggling, and glassmorphic tooltips via the `tooltip` helper function.

Oct 19, 2025

Loading thumbnail…

ICE 5_Niharika

This example presents a tabular preview and a suite of chart-based visualizations for a campus snacks dataset loaded from a CSV file. Using D3.js v7, it renders a bar chart, donut chart, scatter plot, and stacked charts directly into SVG elements, with a tooltip for interactions. The page also includes a U.S. map drawn with TopoJSON, loaded dynamically via the `topojson-client` library. Data is summarized and displayed across multiple chart types to explore patterns in the dataset.

Oct 3, 2025

Loading thumbnail…

ICE_5_Assignment_Niharika

This visualization displays the Iris dataset, comparing sepal length and sepal width across three iris species using a scatter plot. The chart uses color to distinguish species, with points styled using a BBC-inspired purple color theme. Built with D3 v7, it employs `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to map data and render axes. Interactive legend hover highlighting uses `on('mouseenter')` to focus specific species points. The visualization titles, axes labels, and source attribution provide context, while responsive sizing leverages `ResizeObserver` to adapt the chart to its container.

Oct 2, 2025