rohithannadurai@my.unt.edu

Rohith Annadurai ICE-8 Network graph

Rohith Annadurai ICE-8 Network graph

Rohith Annadurai ICE-8 Tree graph

ice 8 Rohith Annadurai Tree structure

ice 8 Rohith Annadurai NETWORK GRAPH

Fork of ICE-7 (Part-4) Rohith Annadurai

This area chart visualizes the number of cancer deaths per year, sourced from a CSV file hosted on a GitHub gist. The chart uses an SVG rendering with a steelblue filled area beneath a line, with axes labeled for Year and Number of Cancer Deaths. The visualization is built with D3.js v7, employing `d3.csv` for data loading, `d3.scaleLinear` for scaling axes, and `d3.axisBottom` and `d3.axisLeft` for ticks.

ICE-7 (Part-4) Rohith Annadurai

This example presents two visualizations: a reusable scatter plot and an area chart, both built with D3.js v7. The scatter plot maps movie budgets against revenues using `d3.scaleLinear` for axes and SVG circles, with hover styling. The area chart displays cancer deaths over years, using `d3.area` to generate a filled path and `d3.axisBottom`/`d3.axisLeft` for scales. Both load data from external CSV files via `d3.csv`, and render interactively with SVG elements, including labeled axes and a steelblue fill for the area chart.

ICE-7 (Part-3) Rohith Annadurai

This example demonstrates a line chart visualizing movie revenue over time, with each movie labeled by name and genre. The chart uses D3.js v7 to load CSV data from a GitHub gist, parse dates, and render an SVG line plot. The x-axis employs a band scale to display categorical movie-genre labels with rotated text for readability, while the y-axis linearly maps revenue values. The visualization includes labeled axes for clarity, and the line path connects revenue values across the dataset, providing a clear view of revenue trends across different movie entries.

ICE-7 (Part-2) Rohith Annadurai

This example demonstrates a reusable scatter plot and a pie chart for visualizing movie data, created with D3 v7 and rendered as SVG. The scatter plot maps movie budgets to revenues, with circles colored steelblue and an orange hover effect, while the pie chart displays the distribution of movie genres as percentage-labeled slices with a custom color palette and a separate legend. Both visualizations are driven by a shared CSV dataset loaded from a gist, and the code is structured to allow easy reuse and adaptation for other datasets.

Fork of ICE-7 (Part-1) Rohith Annadurai

A reusable scatter plot displays the relationship between movie budget and revenue. The D3.js code loads data from a CSV file, converts the numeric fields, and uses linear scales with padding to map values to SVG circles, which are colored steel blue and turn orange on hover. The plot includes labeled x- and y-axes for budget and revenue, with a fixed chart size and margins, and is built entirely with D3 v7's selection, scale, and axis APIs.

Fork of ICE-7 Scatter plot

This example presents a scatter plot of movie budget versus revenue, sourced from a CSV file fetched via a Gist URL. The visualization maps budget on the x-axis and revenue on the y-axis, with each point represented by a blue, semi-transparent circle. The chart’s axes are scaled to include a 10% buffer above the maximum values for clarity. Built with D3.js v7, the code uses `d3.csvParse` to parse the data, `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` to render the axes, and appends SVG circles within a `#scatterplot` div.

Fork of ICE-7 Scatter plot

This interactive scatter plot visualizes Test Cricket records, showing the relationship between two selected metrics for each player. It cycles through different x-axis fields—Runs, Average, Strike Rate, and Innings—every three seconds, allowing for dynamic comparison of player performance. The visualization uses D3.js, specifically the `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs, to render the plot with symbols and colors representing player type and country. Data is loaded from a remote CSV file hosted on GitHub Gist, and the plot is drawn as an SVG element that updates in place.

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot that visualizes a fictional movie dataset, mapping budget and revenue for a selection of films. The implementation is built using D3.js v7, where circles are rendered through SVG elements and positioned using linear scales. The code also includes a fork that displays the Palmer Penguins dataset, cycling through different measurement columns on the x-axis every two seconds using `setInterval`. The reusable chart pattern, inspired by Bostock’s approach, is demonstrated through a function that accepts data, attribute names, and a container ID to generate the visualization.

Rohithice6 Q2

A scatter plot shows the relationship between a film’s budget (ranging from $1M to $3.5M) and its revenue (between $5M and $12M), with each circle representing a movie. The visualization uses D3.js v7 to load CSV data from a remote GitHub gist and render an SVG chart with linear scales for both axes. The code applies `d3.csv` for data loading, `d3.scaleLinear` for coordinate mapping, and `d3.axisBottom`/`d3.axisLeft` to draw labeled axes. The plot encodes individual data points as steelblue circles, with fixed margins and an 800×600 pixel container, but no trend line or interactive features are included.

Rohithice6

Rohithice6 is a bar chart that visualizes data from a CSV file fetched from a GitHub Gist, displaying labeled categories against numerical values. The chart renders using the Chart.js library on an HTML5 Canvas element, with a `fetch` request retrieving the remote data before parsing it. The visualization applies a semi-transparent blue fill and a solid blue border to each bar, with y-axis tick marks starting at zero. The chart is centered within a 600-pixel-wide container.

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This example visualizes the 2022 populations of movies in the "RICH" dataset as a bar chart using React and D3.js. The chart displays each movie’s runtime as a vertical bar, with movie names on the x-axis and runtime values on the y-axis. The code uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.csv` to load data from a remote CSV file. SVG elements render the bars, axis ticks, and gridlines, with margins and dimensions explicitly defined. React’s `useState` and `useEffect` hooks manage asynchronous data fetching and re-rendering.

Fork of Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This bar chart displays the 2022 population of three countries using horizontal bars, with country names on the y-axis and population values on the x-axis. It uses React with a D3.js v5 backend, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a remote GitHub gist. The chart renders as an SVG, drawing grid lines, axis labels, and rectangles for each bar.

Rohith ICE 5

This example demonstrates a minimal interactive visualization setup in the VizHub V3 Runtime Environment, rendering a circular SVG logo with a blue background and the title "Rohith ICE 5". The visualization is built using the `main` function, which receives a `container` DIV and an options object with `state` and `setState`, enabling reactive updates and hot reloading. The SVG rendering is static, but the structure highlights the runtime's capability for interactive widgets with continuous development feedback. The source code is authored by ra0912 and licensed under MIT.

Fork of Fork of Face with d3.js!

This example draws a panda face beside a small tree using SVG shapes, including paths for the ears and smile, circles for the eyes, nose, cheeks, and leaves, plus a rectangle for the trunk. The visualization is built entirely with JavaScript and D3.js, which is loaded via UNPKG, and rendered directly into an HTML page. The code uses the D3 library to construct and assemble the SVG elements, and demonstrates importing from local ES6 modules as well as from the D3 package.

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

This example displays a stylized panda face composed of SVG shapes, rendered within a 400 by 400 canvas on a light gray background. The graphic is built from circles and paths, including ears, eyes, a nose, and eyebrows, all defined with explicit coordinates and styling. The code uses basic SVG elements and inline JavaScript to construct the image dynamically, with bezier curves (Q commands) shaping the ears and mouth. The design originates from a Figma mockup and is presented in a minimal HTML page with a linked stylesheet.

Fork of Tweak a Face Assignment by Enze Liu

This example shows a stylized panda face built from basic geometric shapes, with eyes, ears, a nose, and a mouth composed of arcs and ellipses. The rendering uses React for component structure and D3’s `arc` generator to define curved paths, while SVG elements like `circle`, `ellipse`, and `path` are placed within a single `<g>` group. The face is centered in a 960×500 viewport, with a white circle as the head and black strokes outlining each feature. Transformations rotate and translate the arcs to position the ears and mouth symmetrically, demonstrating a declarative approach to constructing a static illustration with mixed D3 and React.

Fork of Fork of homework smiley face

This example displays a large smiley face rendered with SVG, featuring a circular head, eyes with green irises and purple pupils, and a mouth drawn as a thick arc. It uses React and D3 v7, specifically calling the `arc` function from the `d3` module to define the mouth’s path, while all other shapes are created via React’s SVG primitives. The code applies viewport-relative translations and centers the composition, with hardcoded coordinates for the facial features.

Fork of homework smiley face

This example shows a stylized smiley face built with React and D3 v7, rendered as SVG. The face consists of a large circle with a mouth drawn using D3’s `arc()` generator, plus eyes, eyebrows, and other facial features created from basic SVG shapes like `circle`, `ellipse`, and `line`. The code explicitly sets dimensions, stroke widths, and offsets, with green pupils and purple irises added to the eyes. No external data source is used; the visualization is purely static, constructed entirely from hardcoded values within the React component.

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

This visualization shows a stylized dog graphic named "Rock," built with SVG paths and Bézier curves. It renders the dog’s head, ears, and facial features, including expressive eyes and a mouth, using filled and stroked shapes. The code uses raw SVG elements (`<svg>`, `<path>`, `<circle>`, `<text>`) within an HTML page, with CSS styling for layout and background. The design originates from a Figma mockup, and the rendering is entirely vector-based via SVG, with no external JavaScript libraries like D3.js involved.

Fork of Fork of Fork of Create a face with d3.js!

This example demonstrates how to build a simple cartoon face using D3.js v7, rendered as SVG shapes. It shows a blue-outlined face with elliptical eyes, rectangular eyebrows, and an arc-based red mouth, all positioned relative to the SVG center. The code imports `select` and `arc` from D3, uses `svg.append` and `attr` to construct the shapes, and applies transformations to group elements for coordinated positioning. It relies on the D3 arc generator to create the mouth path, while the overall layout uses static pixel offsets rather than data binding.

Fork of Fork of Create a face with d3.js!

This example demonstrates how to assemble a simple, stylized face using D3.js version 7, drawing each feature as a separate SVG shape. It shows the construction of a face from a large circle for the head, two ellipses for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all centered within a 960×500 SVG canvas. The code imports `select` and `arc` from the D3 module, uses a group element with a translation transform to center the face, and positions features via absolute pixel coordinates. The example illustrates fundamental D3 data-join-free DOM manipulation, where shapes are appended directly to the SVG tree, with no external data source involved.

Fork of Fork of Flowers

This example shows a stylized animated flower with a stem, leaves, and a vase, rendered in a light blue canvas-like SVG area. The flower grows by transitioning its petal and center circles from a radius of zero to their full size, creating a blooming effect. The code uses D3.js to select the container, append SVG shapes, and drive the animations with the `transition().duration()` method. A single stem is drawn as a rectangle, leaves as quadratic paths, and the vase combines a rectangle and an ellipse. The visualization relies on hardcoded dimensions and positions rather than an external dataset.