akshitha.rapala@gmail.com

TR Fork of ICE7 - Reusable Scatter Plot

ICE - 8 Network graph

Tree ICE - 8

Fork of ICE7 - Reusable Scatter Plotsdffxgch

This reusable D3 scatter plot visualizes weather data from a CSV file, mapping visibility, temperature, humidity, and wind speed onto x/y axes. It uses a chainable scatterPlot function with configurable accessors, scales, and margins, rendering SVG shapes that change (square, triangle, circle) based on the Summary column. The plot dynamically cycles through x-axis columns every two seconds, updating the visualization through d3’s scaleLinear, axisLeft, axisBottom, and join operations for seamless redraws.

AkshithaRapala - Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, displaying body mass and culmen length measurements with animated cycling through different x-axis attributes every two seconds. It uses D3.js v6 with SVG rendering and transitions to redraw the plot dynamically. The chart encodes penguin species through distinct SVG shapes: squares for Adelie, triangles for Chinstrap, and circles for Gentoo, with axes rendered via d3.axisLeft and d3.axisBottom. The reusable chart pattern in scatterPlot.js enables smooth updates as the x-axis cycles through numerical columns. Data loads from a CSV file hosted on GitHub Gist.

Akshitha Rapala - ICE -7 Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through four numerical attributes of the Palmer Penguins dataset, alternating which variable maps to the x-axis every two seconds while the y-axis remains fixed on culmen length. Built with D3 v6, it uses reusable chart components, linear scales, and SVG circles to render the data. The plot refreshes its axes and points via a `setInterval` callback, updating the x-value accessor to demonstrate dynamic data binding. The dataset is loaded from a GitHub Gist as a CSV, with margins and radius configured through a chainable scatter plot factory function.

Akshitha Rapala - ICE -7 Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four flower measurements as the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3.js v6, it uses reusable chart patterns via `scatterPlot()`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The animation, driven by `setInterval`, updates the x-value accessor and re-renders the chart, showing how petal width, sepal width, petal length, and sepal length distribute against sepal length. Data loads from a remote CSV using `d3.csv`.

Akshitha Rapala Fork of ICE-7 Area Chart

This area chart visualizes monthly electronics sales for 2023, displaying a smooth trend line and a filled pink region beneath it to highlight sales volume variations. The chart uses D3 v5’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `area` with `curveBasis` to create the smoothed area shape. Data is loaded from a CSV via `d3.csv`, and axes are rendered with `axisBottom` and `axisLeft`, including custom tick formatting and labels, all within an SVG.

Fork of Fork of HTML Starter abc

This visualization presents electronics sales data over time using a line and area chart, with monthly values plotted along a categorical x-axis and a linear y-axis for sales figures. The render function uses d3’s scaleBand, scaleLinear, line, and area generators with curveBasis smoothing to draw the paths, while axisLeft and axisBottom add labeled axes with gridlines. The data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered inside an SVG element. The code also includes a separate scatterplot.js module with d3.scaleLinear for potential scatter plot rendering.

Akshitha Rapala Fork of ICE-7 Line Chart

This example shows monthly electronics sales for 2023 as an orange line chart, with month names on the x-axis and sales values on the y-axis. The visualization uses D3 v5 to load CSV data from a GitHub gist and render an SVG. It constructs the chart with `scalePoint` for categorical months, `scaleLinear` for the numeric axis, and `line` to generate the path, while custom axis labels and a title are styled via CSS.

Akshitha Rapala - Fork of ICE7

This pie chart displays product sales data for January 2023, with each slice labeled by its sales value in millions and a corresponding legend listing product names and amounts. The visualization uses D3.js v5, loading CSV data via `d3.csv` from a GitHub gist, and renders the chart with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color assignment. Interactive styling and labels are applied through SVG selections and a color palette of ten predefined colors.

Fork of ICE7-Pie Chartsdfb

This example displays a donut-style pie chart of US state pollution data, drawn with SVG and D3 v5. The visualization uses `d3.pie` to compute arc segments and `d3.arc` for centroid labels, with a categorical color scale from `d3.scaleOrdinal`. Population values, fetched from a CSV, are shown inside each slice, while a legend lists states and their corresponding millions. The code also leverages D3’s `select` and `format` APIs for layout and number formatting.

ICE-6 Fork of HTML Starter

This example shows a horizontal bar chart of product sales data, displaying the December sales figures for the top 10 products. The visualization uses React with hooks like `useState` and `useEffect` to fetch and manage the data, while D3 v5 functions `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. The SVG rendering maps products to the y-axis and sales values to the x-axis, with axis ticks and grid lines drawn manually. Data comes from a CSV file loaded via D3’s `csv` method, and the chart updates dynamically once the data arrives.

Akshitha ICE-6 Fork of HTML Starter

This example visualizes December sales figures for various products using a scatter plot, where each dot represents a product's sales value. The visualization emphasizes clarity by placing product names along the y-axis and sales amounts on the x-axis, with axis labels for context. It loads data from a CSV file using D3 v5’s `csv` function, then constructs the chart with `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders circles via `selectAll` and `enter`/`append`. The SVG output includes styled axes and text, with the code running in a React framework.

TCE-5: Fork of HTML Starter

This example demonstrates loading a CSV dataset and displaying basic summary statistics as text on a webpage. It shows the file size, row count, and column count of the "Heart" dataset after fetching and parsing it with D3.js v7. The page also includes a static SVG image and uses styled HTML elements for visual presentation. The code specifically relies on `d3.csv` and `d3.csvFormat` to handle data parsing and formatting, while the result is rendered into a `<pre>` container using the DOM API.

Fork of HTML Starter_ Akshitha Rapala

This example demonstrates loading and parsing a remote CSV dataset using D3 v7, displaying metadata about the data in a styled HTML page. It shows the data’s size in kilobytes, row count, and column count within a `<pre>` element. The page also embeds a static SVG illustration of a house, rendered via an `<img>` tag. The code uses `d3.csv()` to fetch and parse the data, then updates the DOM with template literals. CSS styles the heading and metadata display, while the SVG provides a simple visual anchor. The dataset is sourced from a GitHub gist URL.

Fork of Let's make a face with D3.js!

A forked D3.js example builds a static penguin illustration using SVG shapes, including ellipses, circles, polygons, and paths, all positioned relative to a central group. The code demonstrates fundamental DOM manipulation with d3-selection, using `select` and `append` to construct the body, head, eyes, beak, legs, and wings from scratch. A gray body and orange beak and legs define the character, rendered entirely through hardcoded attributes rather than data binding or interaction. No animation or eyebrow movement is present, despite the original title referencing a moving face.