chalasanigayaetiri@gmail.com

ICE -7 AreaChart

This area chart visualizes student marks distribution using D3.js v7, rendering an SVG with a steelblue gradient fill beneath the line. The chart loads CSV data from a GitHub gist, parsing label and students columns, then maps them to x and y axes using `scaleLinear`. It constructs the area path via `d3.area()`, applies a `linearGradient` for the fill, and labels axes as “Total Marks” and “Students”. Styling includes a bordered, rounded container background.

Mar 28, 2024

ICE-7 LineChart

This line chart visualizes the relationship between total marks and student counts using a simple SVG-based line graph. The chart employs D3.js v7 with linear scales for both axes, rendering the data as a steelblue line with labeled axes and grid-free styling. It loads CSV data from a GitHub gist containing US Airline Traffic information, though the axis labels indicate educational metrics. The visualization demonstrates d3.csv for data loading, d3.scaleLinear for coordinate mapping, d3.line for path generation, and d3.axisBottom/axisLeft for tick marks.

Mar 28, 2024

Ice-7 Pie Chart

The Ice-7 Pie Chart visualizes the distribution of student marks across predefined score ranges, with each slice’s arc length proportional to the number of students in that range. It uses D3.js v7’s `d3.pie()` and `d3.arc()` to generate the SVG paths, while `d3.scaleOrdinal` with `schemeCategory10` assigns distinct colors. Data is loaded remotely via `d3.csv` from a GitHub Gist, and each slice is labeled with its range and student count. A separate legend, built with appended SVG rects and text, identifies the color-to-range mapping. The chart renders as a static, non-interactive SVG.

ICE-7 Area chart

This area chart visualizes a week of San Francisco temperatures in degrees Celsius, with a shaded band between lower and upper boundaries for each study hour. The data is loaded from a CSV via `d3.csvParse` and rendered as an SVG path using `d3.area()`, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are added with `d3.axisBottom` and `d3.axisLeft`. The chart is built with D3 v7 and styled with a semi-transparent steelblue fill.

ICE- 7 Line Chart

This line chart shows the relationship between study hours and average total marks, with a single line tracing how marks change as study time increases. The chart uses D3.js v7 to load CSV data from a GitHub gist and render an SVG visualization, employing `d3.line()` to generate the path and `d3.scaleLinear()` for both the x- and y-axes. The data, which includes fields for StudyHours and AverageTotalMarks, is fetched asynchronously via `d3.csv()` and converted to numeric values before plotting. Axes are appended using `d3.axisBottom()` and `d3.axisLeft()`, with the line styled as a steelblue stroke without markers.

ICE-7 Line Chart

The ICE-7 Line Chart visualizes time-series data with a single responsive line plotted against scaled axes. It shows how a continuous metric changes over time, with the line connecting data points across the chart’s inner region. The implementation uses D3’s `scaleTime`, `scaleLinear`, and `line` generators, while the `axes` helper from `@curran/responsive-axes` handles the labeled axis rendering. The chart draws a filled inner rectangle for the plotting area and a black stroke line, with data and margin dimensions passed as configuration props. The code relies on D3 v7.8.5 and supports responsive resizing.

ICE-7 Line Chart

The ICE-7 Line Chart visualizes the relationship between study hours and average total marks, using a single red line to trace the trend across categorical study-hour values. The chart displays axes with labeled ticks and a linear scale for marks, while the x-axis uses a band scale for study hours. Built with D3 v7, the code loads CSV data via `d3.csv`, applies `scaleLinear` and `scaleBand` for positioning, and renders the line using `d3.line` with SVG paths. The visualization is rendered entirely in SVG, with axes generated by `axisBottom` and `axisLeft`.

Mar 26, 2024

ICE-7 Pie chart

This example shows a pie chart of student marks, mapping country names to color-coded slices based on their associated death counts. The visualization uses React state to asynchronously load CSV data via `d3.csv`, then generates the pie layout with `d3.pie()` and renders each slice as an SVG path using `d3.arc()`. A `scaleOrdinal` assigns colors, and a separate legend lists the countries with matching color swatches. Charts are centered with a fixed 600x400 viewport, styled with white strokes between segments.

Mar 26, 2024

ICE- 7 pie chart

This pie chart displays the top 10 countries with the highest deaths from air pollution in 2020, with each slice labeled with the death count in thousands. The visualization uses d3.pie and d3.arc to generate the sectors, and d3.format to abbreviate the numbers. Data is loaded asynchronously from a CSV file via d3.csv, and the SVG is rendered using predefined colors for each section.

Mar 26, 2024

Project Visualizations

This scatter plot displays the Vancouver city humidity levels over time, with each data point colored according to its humidity value using a viridis color scale. The visualization loads CSV data from a GitHub gist via `d3.csv` and renders circles positioned by `d3.scaleBand` for both datetime and humidity axes. Gridlines enhance readability, while text labels above each point show the humidity percentage. The SVG is styled with custom CSS for axis colors, grid dashes, and background, and the code uses D3 v7 to construct the chart with margins and scales.

Mar 25, 2024

ICE -6 Scatterplot

This scatter plot visualizes the relationship between study hours and total marks for individual students, with each green marker representing one student's performance. The plot uses Plotly's JavaScript library, fetching data from a remote CSV file hosted on GitHub Gists and parsing it client-side. The x-axis displays study hours on a linear scale from 0 to 10, while the y-axis shows total marks ranging from 300 to 600, allowing viewers to identify patterns between study time and academic achievement. The visualization employs Plotly's `newPlot` function to render the interactive chart within an HTML container.

Mar 25, 2024

Fork of Responsive Scatter Plot

This scatter plot visualizes the relationship between total marks and study hours for ten students, with each point representing an individual’s academic performance. The canvas-based rendering maps study hours on the x-axis and total marks on the y-axis, using scaled coordinates to fit the data. The code explicitly draws axes, tick marks, and labels using the Canvas 2D API, while data points are plotted as blue circles. The visualization demonstrates a manual implementation of scatter plot construction, without relying on external charting libraries, instead using native JavaScript and Canvas methods for all drawing operations.

Mar 20, 2024

ICE-6 Student Marks BarChart

This example visualizes student marks as a bar chart using React and D3. It shows the total marks for each student, with bars encoded by height on a linear scale and names on a band scale. The code fetches CSV data from a remote URL, parses it, and renders an SVG with rectangular bars using `scaleBand` and `scaleLinear`. It leverages React’s `useState` and `useEffect` for data loading, and D3’s `axisBottom` and `axisLeft` for axes. The chart uses a green fill for bars and includes margins and a title, with no interactive or animated behavior.

Mar 20, 2024

Fork of Interactive barchart

This example shows an interactive histogram of humidity data, rendered as vertical bars in an SVG using D3 v5 within a React setup. The bars are colored cornflower blue and turn purple on hover, with a dashed line marking the mean humidity. A tooltip appears on mouseover, displaying the exact humidity range and day count for each bin. The chart also includes labeled axes and a styled tooltip with a pointer arrow.

Mar 19, 2024

Loading and parsing data using d3

This example demonstrates loading a CSV file from a URL and displaying its metadata, including file size in bytes and kilobytes, row count, and column count, within a styled message container. The visualization also includes a static SVG pie chart with two slices (20% and 80%) representing categorical proportions. The code uses D3 v7’s `d3.csv` to fetch and parse the remote CSV, then computes file size using `d3.csvFormat` and `.length`. The SVG chart is hand-coded with `<path>` elements and `<text>` labels, while the page layout relies on basic HTML and CSS for borders and background.

Mar 7, 2024

Pig Face

Rendered with React and D3, this visualization shows a pig face built from basic geometric shapes. The face uses gray circles for the head, dark eyes, and an orange elliptical snout with pink nostrils, while a D3-generated arc forms the mouth. The code relies on React for component structure and D3's `arc` function to define the mouth path, with dimensions and positions controlled by constants. The rendering approach uses SVG elements inside a React component, adapting to the full window size. The design modifies a prior "Smiley Face" example by changing the color scheme, adjusting the mouth's size and placement, and adding the three-part nose.

Fork of Dog graphics using Figma design. Used bezier curve.

The graphic depicts a stylized dog named "Rolex," built entirely with SVG shapes and Bézier curves, set against a blue background. It shows the dog’s head and snout with expressive eyes and a large nose, while two floppy ears and a body outline frame the composition. The illustration is rendered using raw SVG path elements, with curves defined by cubic Bézier commands, and filled circles for eyes and a nose. The design originates from a Figma export, and the code includes no external libraries, relying solely on inline SVG markup within an HTML file.

Fork of Fork of Bird's Landscape - D3.js

This example, titled "Fork of Fork of Bird's Landscape - D3.js," demonstrates a dynamic, full-viewport SVG landscape built with D3.js. The visualization features a continuously animating sky gradient that cycles through day and night colors, a procedurally generated terrain, three stylized birds with varied scales and rotations, and a tree. Each element is constructed programmatically using SVG, with gradients defined for the sky and a radial sun. The birds are duplicated and transformed to create depth and movement, while the sky’s color transitions smoothly over a 24-second cycle. The visualization highlights the use of SVG, JavaScript, and D3.js to create an interactive and animated natural scene.

Fork of The House

This visualization displays a schematic house built on a grid of vertical and horizontal lines, using SVG paths and shapes. It shows a simple dwelling with a brown roof, yellow windows, a blue door, and a small circular window. The rendering uses raw SVG elements like `path`, `rect`, and `circle` within a React component. The grid lines are drawn with stroke-based paths, while the house features use filled paths and rectangles. The code relies on React for rendering the SVG structure, with no additional data or animation libraries. The scene is static and purely geometric, emphasizing a clean, minimal illustration style.

Fork of Bowl of Fruit - General Update Pattern Special Cases

This animated visualization demonstrates the special-case update patterns in a butterfly graph, a structure used in Cooley–Tukey FFT algorithms. It shows how nodes and their connections evolve across logarithmic stages, with bit-reversed input labels and DFT output labels. The D3.js code builds the graph programmatically, computes node positions as percentages, and draws smooth Bezier curves between parent–child pairs. Hovering a node highlights its entire dependency chain—including connected circles, paths, and text—by transitioning their fill and stroke colors to steelblue, while non-hovered elements fade to gray. The visualization uses D3’s selection, transition, and event-handling APIs to animate these interactive highlights, with the SVG scaled via a viewBox.