adithiarikatla@gmail.com

ICE 8 making map

This choropleth map shows estimated country populations for 2023, with darker blue-green shades representing higher population counts and gray indicating missing data. It uses a Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath` from TopoJSON data loaded with `d3.json`. Population values from a CSV file are mapped to a sequential color scale, and hover tooltips display each country’s name and population. A gradient legend with a linear scale shows the population range, all rendered as SVG using d3.v7.

ICE 8 tree

This is a static tree diagram showing the hierarchical structure of World, Continents, and Countries. The root node (World) is blue, continents are purple, and country leaf nodes are green, with a color-coded legend on the right. The visualization uses the D3.js v7 `d3.tree()` layout, `d3.hierarchy()`, and `d3.linkVertical()` to compute and draw the SVG paths and circles. The data is a hardcoded JavaScript object representing the geographic parent-child relationships.

Fork of Tree

This visualization presents a world hierarchy as a tree, mapping the root node “World” to four continents—Asia, Europe, Africa, and North America—with two countries as leaf nodes under each continent. Node circles are color-coded by depth: blue for the root, purple for continents, and green for countries, with a legend clarifying the mapping. Using D3 v7, the code employs `d3.tree` and `d3.hierarchy` to compute the layout, then renders horizontal links via `d3.linkHorizontal` and draws circles and labels directly on the SVG, with text placement depending on whether a node has children.

ICE 8 networks

This interactive network visualization shows hierarchical relationships between the world, continents, and countries. Nodes are categorized by shape and color: blue rectangles for World, purple circles for Continents, and green ovals for Countries. Using D3 v7, the example employs `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while manually appended SVG shapes (rect, circle, ellipse) and text labels render each node. The tick event updates link coordinates and node transforms dynamically, creating a force-directed graph of six nodes and five links from simple, inline data.

ICE 8 making maps

This choropleth map shows the percentage of renewable energy use by country worldwide, using a yellow-green sequential color scale where darker shades indicate higher adoption. It loads country boundaries from the world-atlas TopoJSON dataset and joins them with renewable energy percentages from a GitHub-hosted CSV file. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to render each country as an SVG path, and d3.scaleSequential with an interpolateYlGn interpolator to encode values. An interactive tooltip via SVG title elements reveals exact percentages, while a gradient legend below the map provides a reference scale.

ICE 8 making map

A world map shades each country according to its latest reported population, using a yellow-orange-red sequential color scale; countries without data appear gray. Hovering reveals a tooltip with the country name and its population. The visualization loads a world TopoJSON atlas and a population CSV, then projects the GeoJSON features with `d3.geoNaturalEarth1` and draws them as SVG paths via `d3.geoPath`. A linear gradient legend with axis ticks shows the population range.

ICE 8 NETWORKS

A force-directed network diagram shows a hierarchical dataset of continents and countries, with a root node for "World" linked to Asia and Europe, which further connect to India, Japan, and Germany. Each node type is rendered as a distinct SVG shape: a blue rectangle for the root, purple circles for continents, and green ellipses for countries. The layout is computed using d3.forceSimulation with forceLink and forceManyBody, while positioned nodes and links are updated on each simulation tick.

Fork of Tree

A compact tree diagram visualizes a four-level hierarchy: the root node "World" branches into continents, which split into countries. The code defines custom node shapes—a blue rounded rectangle for the root, purple circles for continents, and green ellipses for countries—with each node labeled. Using the d3.hierarchy and d3.tree layouts with a vertical link generator, the graph is centered horizontally on the page. The visualization is rendered as SVG with distinct colors per level, sourced from a static inline JavaScript data structure.

ICE 8 tree

This compact world tree uses a hierarchical layout to visualize a small dataset of continents and countries. The root node represents the World, with continents as blue circles and countries as green ellipses. Implemented with D3.js v7, it uses `d3.hierarchy` and `d3.tree` to compute node positions, with `d3.linkVertical` drawing the connecting links. The SVG is styled via CSS variables, and node shapes vary by type, while labels are added as text elements.

ICE 8 tree

This example displays a three-level hierarchical tree of programming languages, grouped by paradigm (Object-Oriented, Functional, Scripting). The SVG visualization uses color-coded nodes—orange for the root, blue for paradigm categories, and green for individual languages—with horizontal links. The code builds the hierarchy using `d3.hierarchy()` and applies a tree layout, drawing connections with `d3.linkHorizontal()` and labeling nodes via appended SVG text elements. The data is a static JSON object embedded in the script, with all elements rendered directly into an SVG canvas.

making map

This example shows a choropleth world map of population by country for 2022, with each country shaded according to its population using a sequential blue color scale. Countries with no data appear in light gray. The visualization loads population data from a GitHub-hosted JSON file, then uses `d3.json` to fetch country geometries from the world-atlas package, applies a Natural Earth projection with `d3.geoNaturalEarth1`, and renders the map as SVG paths via `d3.geoPath`. Tooltips display exact population values for each country.

Fork of making map 2

This world map visualizes 2022 renewable energy consumption percentages across countries, using a sequential green color scale where darker shades represent higher renewable energy usage. The visualization loads geographic boundaries from the world-atlas TopoJSON dataset and renders them as SVG paths using d3.geoPath with a natural Earth projection. The code creates a color mapping from an inline dataset of country-specific percentages and tooltips display exact values on hover. D3 v7 handles the data join, while the topojson library converts the geographic data into GeoJSON features for rendering.

ICE 8 making map

This choropleth map shows global population by country in 2022, with darker blue shading indicating higher population counts. The visualization uses d3.geoNaturalEarth1 for the map projection and d3.geoPath to render country outlines from TopoJSON data loaded via the world-atlas package. Population values are joined to country geometries using CSV data from a GitHub repository, with missing countries shown in gray. A sequential square-root color scale (d3.scaleSequentialSqrt) maps population values to the interpolateBlues color scheme, and hovering reveals a tooltip with the exact population via appended `<title>` elements.

ICE 7 area chart

This area chart visualizes phone screen time in hours across the seven days of the week, with a monotone-smoothed curve filling the space beneath the line in light steel blue. The SVG rendering uses D3 v7’s `d3.scalePoint` for the categorical day axis and `d3.scaleLinear` for the numeric hours axis, while `d3.area` with `d3.curveMonotoneX` generates the filled path. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`, drawing from the hardcoded dataset of daily screen-time values.

area chart countries and GDP

This area chart displays the average petal length for different flower species, using a green line and translucent fill to highlight the trend across species. The visualization is built with D3.js v7 and renders as an SVG. It loads a CSV dataset, calculates group means with `d3.rollups` and `d3.mean`, then draws the area, line, and data points. Axes are scaled with `d3.scaleBand` and `d3.scaleLinear`, and annotations are added via SVG text elements.

ICE 7 line chart

This example visualizes the GDP of countries in trillions of USD as a line chart, with the data sorted in descending order and sourced from a CSV file hosted on GitHub. The chart plots each country along a point scale and connects the values with a smooth monotone curve, while orange dots mark individual data points. Built with D3.js v7, it uses `d3.csv` for loading, `d3.scalePoint` and `d3.scaleLinear` for axes, and `d3.line` with `d3.curveMonotoneX` to generate the SVG path. Axis labels, rotated tick text, and a bold title complete the presentation.

line chart ICE 7

This line chart visualizes the relationship between petal width and petal length from the Flowers dataset. Using D3.js v7, the SVG visualization plots a monotone interpolated line with individual data points, showing the trend between the two measurements. The chart is constructed with D3 scales, a line generator, and axis components. The data is loaded from a remote CSV file, then rendered with a steelblue stroke for the line and orange circles for the data points on a white background.

pie chart ICE 7

This pie chart displays monthly sales data for a company across 2024, with each slice labeled by a three-letter month abbreviation and a legend showing full month names with corresponding sales figures in thousands of dollars. Using D3 v7, the visualization employs `d3.pie()` and `d3.arc()` to generate the slices, `d3.scaleOrdinal` with color schemes to distinguish months, and SVG text elements positioned via `arc.centroid()` for in-slice labels. A legend is constructed with colored rectangles and accompanying text, all rendered in an SVG container.

pie chart ICE 7

This pie chart visualizes the distribution of total points accumulated by IPL teams from 2015 to 2024, using a CSV dataset loaded via `d3.csv`. Each slice represents a team’s aggregate points, with percentage labels positioned using `d3.arc` centroids and a color-coded legend rendered inside the SVG. The chart uses `d3.pie` and `d3.arc` to generate the slices, while `d3.scaleOrdinal` with `d3.schemeTableau10` assigns colors, all built with D3 v7 and SVG.

scatter plot fruit

A scatter plot compares sugar content and calorie count for fifteen fruits, encoding each fruit's dominant vitamin (A, B, or C) through both color and point shape. Built with D3 v7, the visualization uses a linear scale for both axes, ordinal scales for the categorical styling, and SVG paths drawn with `d3.symbol()` variants. The chart includes labeled axes, a title, and a legend mapping vitamin types to their corresponding visual encodings.

scatter plot 7

This scatter plot displays the relationship between horsepower and fuel efficiency (MPG) for ten car models, with each point labeled with the car’s name. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.symbol` with a circle shape to render the points. The SVG output includes axis labels and hover tooltips showing car details, all within a reusable `scatterPlot()` function. The dataset is hardcoded in the script.

reusable scatter data

This example demonstrates a scatter plot built with D3, using spherical projections to render the data points as textured discs that appear to ripple and pulse. The visualization leverages D3’s `forceSimulation` for layout and `svg` paths with custom `d3.geoPath` projections to map the data onto a globe-like appearance. Rendering is done through SVG paths and canvas layers, where the code applies a custom texture and animation loop. The data points are generated procedurally, and the effect is achieved through a combination of CSS filters and JavaScript timing functions, providing a playful, interactive feel without external data sources.

scatter plot 7

This scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for a small sample of cars, with each point representing a vehicle and a tooltip revealing its name. Built with D3.v7, the reusable `scatterPlot` function from `scatterPlot.js` uses `scaleLinear` and `axisBottom`/`axisLeft` to map the data to SVG coordinates. The `index.html` file demonstrates the chart with a static dataset, rendering circles via a D3 selection join, though the primary focus is on the configurable chart generator.

scatter plot

This interactive scatter plot animates through the columns of the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while keeping y-axis fixed at sepal length. The visualization uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, with SVG circles positioned dynamically. The code applies a reusable `scatterPlot` module that recalculates data mappings on each interval, rendering a full-screen SVG that updates in place.

reasuable saatter plot

This reusable scatter plot, built with D3 v7, displays the relationship between car horsepower and fuel efficiency (MPG) for a small dataset. It is implemented as a configurable JavaScript function that accepts data, value mappings, and visual properties via a fluent API. The visualization uses D3's `scaleLinear` for axes, `symbol` shapes for data points, and `axisBottom`/`axisLeft` for tick marks. The example also demonstrates a second implementation using D3 v6 that loads the classic Iris dataset from a CSV file and maps species to different point symbols.

Fork of reasuable saatter plot

This fork of a reusable scatter plot displays the Iris dataset, mapping petal width against sepal length and encoding species with different symbol shapes. The code uses d3.csv to load the data, d3.scaleLinear for axes, and d3.scaleOrdinal to assign symbols from d3.symbols. It renders SVG paths with a d3.symbol generator sized via the `size` property. Axis labels use d3.axisLeft and d3.axisBottom, with a margin object controlling layout.

Fork of Fork of reasuable saatter plot

This reusable scatter plot compares car attributes—horsepower against fuel efficiency—using an SVG-based D3 v7 visualization. The code implements a configurable chart function with settable accessors for data, width, height, margins, and symbol size. Points are rendered as D3 symbols with hover tooltips showing car names and values. A separate implementation loads the Iris dataset via D3’s `csv` fetcher and uses ordinal scaling to assign distinct symbol shapes to different species, demonstrating the chart’s adaptability across datasets.

reasuable saatter plot

This interactive scatter plot shows the relationships between iris flower measurements, with each data point rendered as a distinct symbol based on species. Built as a reusable D3 module, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbols` to map categorical species to different glyphs, and `d3.axisLeft` and `d3.axisBottom` for labeled axes. The code loads the Iris dataset from a GitHub gist via `d3.csv`, parses numeric columns, and dynamically sizes the SVG to the browser window, demonstrating a flexible symbol-based scatter plot template.

ICE 7 scatter plot

This interactive scatter plot displays the classic Iris dataset, dynamically cycling the x-axis through four flower measurements while keeping sepal length on the y-axis. Each point updates its position every two seconds using a D3 reusable chart module and data joins. The visualization leverages D3 scales, axes, and SVG circles to map petal width, sepal width, petal length, and sepal length, rendering smooth transitions as the axes swap attributes. The code uses D3's `csv` loader to fetch remote data and a `setInterval` to trigger re-renders.

ICE 7 scatter plot

This interactive scatter plot displays the classic Iris dataset, dynamically cycling the x-axis through four flower measurements while keeping sepal length on the y-axis. Each point updates its position every two seconds using a D3 reusable chart module and data joins. The visualization leverages D3 scales, axes, and SVG circles to map petal width, sepal width, petal length, and sepal length, rendering smooth transitions as the axes swap attributes. The code uses D3's `csv` loader to fetch remote data and a `setInterval` to trigger re-renders.

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, using D3's linear scales and axes to map flower measurements. The view cycles through different feature pairs every two seconds. Built with D3 6.7.0, it renders SVG circles whose positions are computed via a reusable scatter plot module. The code demonstrates D3's join operator for updating graphical elements, and axes are created using axisLeft and axisBottom.

ICE 7 scatter plot

This animated scatter plot visualizes BMW car sales data, mapping four quantitative attributes—Engine Size, Mileage, Price, and Sales Volume—against each other on dynamic axes. The visualization cycles the x-axis variable every three seconds, using D3.js v6 modules including `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` for coloring. Data points are rendered as SVG symbols (`symbolCircle`, `symbolDiamond`, `symbolTriangle`, `symbolSquare`) representing fuel types, which are also displayed in a separate legend. The chart updates smoothly via setInterval, re-calling the reusable scatter plot component with new mappings while preserving the y-axis and color encoding.

ICE 7 scatter plot

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three iris species. The chart uses color-coded points to distinguish species, with an interactive legend that dims non-hovered data points for focused comparison. Built with D3.js, it employs `scaleLinear` for axes, `scaleOrdinal` for colors, and `axisBottom`/`axisLeft` for tick rendering. The visualization loads CSV data from a remote URL and applies a BBC-inspired color theme with customized point styling, including radius, opacity, and stroke properties.

ICE 7 scatter plot

This scatter plot visualizes the Iris dataset, comparing sepal length and sepal width across three iris species. The chart uses color-coded points to distinguish species, with an interactive legend that dims non-hovered data points for focused comparison. Built with D3.js, it employs `scaleLinear` for axes, `scaleOrdinal` for colors, and `axisBottom`/`axisLeft` for tick rendering. The visualization loads CSV data from a remote URL and applies a BBC-inspired color theme with customized point styling, including radius, opacity, and stroke properties.

reusable scatter plot ICE 7

This scatter plot visualizes the Iris dataset, comparing sepal length against sepal width for three species using colored circles. The visualization uses d3.csv for data loading, d3.scaleLinear for axes, and d3.scaleOrdinal with a BBC-inspired color theme to distinguish species. Interactive legend items trigger hover effects that fade non-selected points, while d3.axisBottom and d3.axisLeft render the coordinate axes. Styling is applied through CSS classes, with the chart supporting responsive resizing via ResizeObserver.

reusable scatter plot ICE 7

This scatter plot visualizes the Iris dataset, comparing sepal length against sepal width for three species using colored circles. The visualization uses d3.csv for data loading, d3.scaleLinear for axes, and d3.scaleOrdinal with a BBC-inspired color theme to distinguish species. Interactive legend items trigger hover effects that fade non-selected points, while d3.axisBottom and d3.axisLeft render the coordinate axes. Styling is applied through CSS classes, with the chart supporting responsive resizing via ResizeObserver.

sales data

This visualization displays monthly sales data as a bar chart, with the x-axis representing the month and the y-axis showing sales figures. The bars are rendered in steel blue and turn orange on hover, providing interactive feedback. The chart is built using the D3.js library (d3.v7) with SVG rendering, and data is loaded from a CSV file hosted on GitHub via `d3.csv` with `d3.autoType` for type conversion. Axes are generated using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`.

sales data

flower data

This visualization displays Fisher's Iris dataset, comparing sepal length against sepal width across three flower species. The scatter plot encodes species with distinct colors and includes interactive mouseover tooltips showing detailed measurements. The implementation uses d3.csv to load the data, d3.scaleLinear and d3.scaleOrdinal for scales, d3.axisBottom and d3.axisLeft for axes, and d3.selectAll with circle elements for rendering points. A legend supports hover-driven opacity highlighting to isolate specific species.

flower

This interactive scatter plot visualizes Fisher's Iris dataset, comparing sepal length and sepal width across three iris species. Colored dots distinguish species, and hovering over a legend item highlights that species while fading others. Built with D3.js (v7) using scales, axes, and SVG rendering, it loads data via CSV from a remote gist and displays points with a white stroke for clarity.

flower

This visualization displays Fisher's Iris dataset as a scatter plot comparing sepal length against sepal width, with points colored by species (setosa, versicolor, and virginica). The chart includes axis labels, a legend with hover interactions that highlight and fade points by species, and BBC-style color theming. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and `ResizeObserver` for responsive sizing. The data loads from a remote CSV file, and interactive hover states raise matching points to the foreground while fading others.

flower

This visualization displays Fisher's Iris dataset as a scatter plot comparing sepal length against sepal width, with points colored by species (setosa, versicolor, and virginica). The chart includes axis labels, a legend with hover interactions that highlight and fade points by species, and BBC-style color theming. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and `ResizeObserver` for responsive sizing. The data loads from a remote CSV file, and interactive hover states raise matching points to the foreground while fading others.

flower

This visualization displays Fisher’s Iris dataset as a scatter plot, plotting petal length against petal width, with each species represented by a distinct color. The chart titles itself as a comparison of sepal dimensions. Built using D3 v7, the code loads data via `d3.csv`, creates scales with `scaleLinear` and `scaleOrdinal`, and renders axes with `axisBottom` and `axisLeft`. Points are styled with configurable radius, opacity, and stroke, and hovering over the legend fades non-matching species using a `setHoveredColorValue` callback.

Fork of flower

This interactive scatter plot visualizes Fisher's Iris dataset, comparing sepal length and width across three species. The chart uses color-coded points and a clickable legend that highlights a selected species while fading others, enhancing comparison. Built with D3.js, it employs `scaleLinear`, `scaleOrdinal`, and `axisBottom` for scales and axes, using `ResizeObserver` for responsive sizing and `renderSVG` for output. Styling follows BBC color themes, with data loaded from a CSV source.

flower

This visualization displays Fisher's Iris dataset as a scatter plot comparing sepal length against sepal width, with points colored by species (setosa, versicolor, and virginica). The chart includes axis labels, a legend with hover interactions that highlight and fade points by species, and BBC-style color theming. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and `ResizeObserver` for responsive sizing. The data loads from a remote CSV file, and interactive hover states raise matching points to the foreground while fading others.

GDP

This visualization displays GDP values by country as horizontal bars. Built with D3 v7, it loads CSV data from a GitHub repository using `d3.csv`, then maps country names to the x-axis and GDP values to the y-axis with linear and band scales. Bars change color on hover, and a tooltip shows the country name and GDP value. The SVG chart is rendered with rotated x-axis labels for readability, with axes styled via CSS classes.

D3.js

A scatter plot visualizes sepal length versus sepal width from Fisher's Iris dataset, with points colored by species and a hoverable legend that fades non-matching points. Built with D3.js v7, the code uses `d3.csv` for data loading, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` for scales and axes, and a `ResizeObserver` to make the SVG responsive. A BBC-inspired color theme distinguishes the three species.

D3.js

A scatter plot visualizes sepal length versus sepal width from Fisher's Iris dataset, with points colored by species and a hoverable legend that fades non-matching points. Built with D3.js v7, the code uses `d3.csv` for data loading, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` for scales and axes, and a `ResizeObserver` to make the SVG responsive. A BBC-inspired color theme distinguishes the three species.

Fork of fork d3.js 1

This visualization displays the classic Iris dataset, plotting sepal length against sepal width and coloring each point by species. It employs D3.js v7 APIs such as `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render the scatter plot, with a linked legend that fades non-hovered species. The code loads CSV data via `d3.csv` and applies BBC-inspired color styling from the theme configuration.

fork d3.js 1

This example visualizes the Iris dataset, comparing sepal length and width across three species with colored points and an interactive legend that highlights selected species. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading. It renders SVG elements with d3.selection, incorporates ResizeObserver for responsive dimensions, and applies BBC-inspired styling with custom CSS classes.

adithi

This scatterplot visualizes the Iris dataset, comparing sepal length and width across three species—setosa, versicolor, and virginica—using distinct BBC-inspired colors. The chart includes labeled axes, a title with subtitle, a source attribution, and an interactive legend that dims non-hovered species when moused over. Built with d3.v7, it loads CSV data via `d3.csv`, maps dimensions through scales like `scaleLinear` and `scaleOrdinal`, and renders points as circles with configurable styling, while the legend uses `mouseenter` and `mouseleave` events to trigger the hover fade effect.

Adithi_Assignment5

This interactive dashboard displays trends and distributions from a student grades CSV. It presents a dataset summary, bar charts for average scores and grade distribution, a line chart tracking final score trends, and a ranked table of the top five students. The page uses a hover-triggered flip card for summary details, fetches data via the `fetch` API, and constructs the line chart using raw SVG elements within JavaScript. Custom CSS grid layouts and styling structure the dashboard's layout.