pilliprathimarani@my.unt.edu

ICE8-network graph

practice tree

iCE8-Tree-Prathima

practice

practice

ICE-8-TREE-religions

ICE-8-Religions in india-Prathima

ICE8-Tree graph

Fork of Area chart - Prathima

This example shows the sales volumes of various coffee products as a filled area chart, with green borders and pink fill, using data fetched from a raw gist URL and parsed manually by splitting CSV rows. It uses Chart.js to render the line chart on a canvas element, configuring the legend, title, and axis labels. The chart reads coffee names and numeric sales volumes from the dataset, and applies responsive options to display the visualization with a top legend and descriptive axis titles.

Reusable D3 Scatter Plot -ICE 7 -Prathima

This animated scatter plot explores the Iris Dataset, cycling the x-axis between price and sales volume every two seconds while the y-axis remains fixed on sales volume. Built with D3.js (v7), the visualization uses a reusable chart component created via a closure pattern, employing `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circle elements for data points. The chart's dimensions, margins, and radius are configurable through a fluent API, and a 2-second interval triggers data re-rendering with updated x-axis mappings.

scatterplot2

This animated scatter plot displays phone data, alternating the x-axis between Price and SalesVolume every two seconds to reveal different relationships in the dataset. Built with D3.js v7, it uses SVG circles with a fixed radius and steelblue fill, positioned via linear scales derived from the CSV data. The chart is constructed through a custom `createScatterPlot` function that leverages D3's `selectAll` and `join` for efficient DOM updates, while `setInterval` drives the periodic column switching animation.

Fork of Line Chart - Prathima

This line chart displays the sales volume for each coffee item, using a red line to connect data points across categorical labels on the x-axis. The visualization fetches a CSV dataset from a GitHub gist, parses the rows to extract item names and sales values, and renders the chart with the Chart.js library on an HTML canvas. The chart includes a title, axis labels, and a legend positioned at the top, configured through Chart.js options for the line plot.

fork of pie chart-prathima

This pie chart visualizes sales volume by item, with each slice representing a product and its corresponding unit count. The chart uses the Chart.js library in a canvas element to render the visualization, pulling data from a remote Gist-hosted CSV file. Each item is assigned a random color, while the legend displays the item name alongside its sales volume in units. The chart includes a title, a right-positioned legend, and custom tooltips that show the item name and unit count on hover.

fork of pie chart-prathima

This example displays a pie chart of total sales by category, using data fetched from a Walmart CSV file hosted on GitHub. The chart.js library renders the visualization directly onto an HTML canvas element, with each category’s sales value mapped to a slice and colored using a predefined palette. The code loads the CSV, splits it into rows, and extracts the item category and total sales columns before constructing the chart with a title and non-responsive sizing. The rendering is entirely client-side, using the Canvas API through Chart.js.

ICE6-Prathima-scatter plot

This scatter plot displays the relationship between the price and sales volume of various items, with each data point represented as a circle. The visualization uses D3.js version 7 to fetch data from a remote CSV file via `d3.csv`, then renders the chart as an SVG using `d3.scaleLinear` for both axes. Interactive tooltips appear on mouseover, displaying the item name, price, and sales volume. The axes are labeled and the chart includes a title, with styling applied through a separate CSS file.

ICE-6-Prathima -coffee-Bar chart

This bar chart visualizes the sales volume of different coffee shop menu items, with each bar representing a specific coffee type. The data is loaded from a remote CSV file via `d3.csv` and parsed to convert sales figures into numbers. Using D3.js v7, the chart applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels. The x-axis labels are rotated for readability, and bars change color on hover.

Fork of ICE-5-Prathima-coffee

This interactive visualization displays a coffee shop menu with item details, initially hidden until a user types “Menu” into a text input and clicks Execute. Using D3 v7, the page fetches CSV data from a GitHub gist via `d3.csv`, then dynamically renders an SVG table populated with the dataset’s columns and rows. The interface also shows data summary information (file size, row and column counts) and features decorative inline SVG graphics, including coffee cups and stars, alongside styled HTML elements. The visualization combines DOM manipulation with pure D3 data loading to create a simple, command-driven table display.

ICE-5-Prathima

This interactive data visualization presents a coffee shop menu as an SVG-based webpage. It shows a table of coffee and bakery items with their prices, which appears after a user types "Menu" into an input field. The page displays decorative coffee cup and star SVG graphics alongside the data. Using D3.js v7, the code loads a CSV file from a GitHub gist, then dynamically generates an HTML table from the parsed data. The visualization also provides a summary message indicating the dataset's row and column counts, rendered through D3's asynchronous data loading and DOM manipulation methods.

Fork of Snowman- ICE-4

This example uses only HTML and CSS, with no external libraries, to create a whimsical scene of a snowman-like "Rock the dog" character. The image shows a stylized cartoon face and body composed of nested CSS shapes, including a white circular body, button-like dots, and a face with eyes, eyebrows, a nose, and a mustache. It also includes decorative elements such as a crescent moon with a glow effect, a seven-colored rainbow made from stacked divs, and a star, all positioned with absolute coordinates. The rendering relies entirely on CSS styling for shapes, colors, and layout.

Fork of Snowman

This example creates a stylized snowman with D3.js, rendered as a collection of SVG circles, rectangles, lines, and a polygon on a sky-blue background. It shows a complete character composed of three white body circles, facial features like black eyes and a red tongue, orange nose, stick arms, and a black top hat. The code uses D3’s `select`, `join`, and data-binding methods to append and style each element, with hardcoded positions and colors. All shapes are drawn directly via SVG attributes, demonstrating a simple, programmatic approach to building vector illustrations.