KusumaKumariDama@my.unt.edu

Map

Fork of ICE-8 Network graph

Fork of Fork of Network graph

Fork of Fork of D3.js collapsible tree ICE-8 kusuma

Fork of Fork of D3.js collapsible tree ICE-8 kusuma

Fork of ICE8 network graph

Network graph

Fork of ICE 8: Tree

ICE8 - Node-link diagram with force-directed layout

ICE-8 Network graph

ICE 8 Node link

ICE-8 Network graph

ICE-8:Network graph

Fork of ICE8-Tree graph

US Map

Fork of Goals Scatter Plot with Hover

This scatter plot visualizes top football league scorers, showing the relationship between goals and shots for players in 2018. The plot uses colored circles to represent different leagues—La Liga, Serie A, Bundesliga, and Premier League—with each circle sized and labeled by player name. Hovering over a circle enlarges it and displays a tooltip with the player's name. The visualization is built using D3.js, specifically the `select`, `scaleLinear`, and `axisLeft` APIs, while relying on the `@curran/responsive-axes` library for axes rendering. Data comes from the Top Football League Scorers dataset on Kaggle.

Fork of Scatterplot of the restaurant data

This scatterplot shows the relationship between a restaurant's rating and its total number of reviews. The visualization uses D3.js APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to render SVG circles, with each circle representing a restaurant. The data is loaded from a CSV file via the `csv` function, and the plot encodes ratings on the x-axis and total reviews on the y-axis. The chart is drawn with a blue background and beige circles, with labeled axes and a title.

ICE6

This example visualizes the Iris dataset using a scatter plot, showing the relationship between sepal length and sepal width. The plot encodes each flower as a point, with the species variable available in the data but not directly colored in the chart. The code uses Chart.js to render the scatter plot, pulling data from the `iris-dataset` package. It also includes a custom D3-based viz module that builds axes and circles with `scaleLinear`, though the primary rendering relies on Chart.js's scatter type.

Fork of Akhil -vizhub assignment bat-scatter

This bar chart visualizes the total vehicle price aggregated by vehicle type, showing how different car categories contribute to overall sales value. The chart uses horizontal bars with a green fill that darkens on hover, displaying the summed prices along a linear x-axis scale while the vehicle types are listed on a band y-axis. The visualization is built with React and D3.js v5, using the `csv` loader to fetch the cars dataset from a GitHub gist and the `scaleBand` and `scaleLinear` functions to construct the axes. Data is aggregated on the client side by reducing the raw records by the "Type" field, with axis labels for "Average Price" and "Vehicle Type" clarifying the chart's purpose.

ICE6

The visualization displays a BMI bar chart comparing height, weight, and BMI values for multiple individuals. It renders two side-by-side SVG bar charts using React and D3 v5. The left chart shows BMI scores with bars colored teal, while the right chart displays height and weight as paired orange and blue bars. Data is loaded from a remote CSV file using `d3.csv`, with scales created via `scaleBand`, `scaleLinear`, and axes drawn with `axisBottom` and `axisLeft`.

Fork of Simple Bar Chart

This example visualizes the top 10 most populous countries as of January 1, 2024, using a horizontal bar chart. It highlights each country’s total population in thousands, sorted in descending order to emphasize the largest nations. The visualization is built with D3.js, employing `scaleBand` for categorical country labels and `scaleLinear` for population values, while custom axis-label components from `@curran/axis-labels` clarify the axes. Data comes from the `@curran/un-population-estimates-2024` dataset, filtered to include only country-level entries. The chart renders SVG rectangles for bars, with a gray inner background, and uses D3’s selection and join methods to bind data efficiently.

Fork of Let's Make a Face Part I

This example shows a simple yellow circle face with two smaller circles for eyes, positioned on a black-outlined face against a blank background. The SVG rendering uses hardcoded coordinates for the face and eye placements, with no data-driven logic or interactive behavior. The visualization relies on basic SVG circle elements, setting the face at center (480, 250) with a radius of 245 and eyes at (350, 180) and (600, 180) with a radius of 50 each. The code directly specifies stroke and fill colors, and the page is styled to hide overflow, creating a minimal static graphic.

Fork of Fork of smiley

This example renders a cheerful, cartoon-style smiley face character using HTML and CSS, built with a plain `<div>`-based structure and styled through the `index.css` stylesheet. The scene depicts a white circular head with blue cap, brown ears and hands, black eyes and eyebrows, a red nose, and a curved mouth, all set against a light blue sky-like background. Positioning relies on absolute and relative coordinates, while shape is created using `border-radius` and CSS transforms for angled elements like the eyebrows and hands. No JavaScript or external libraries are used; the visualization is purely static.

Fork of smiley

This example shows a smiling human-like face with a blue cap, brown ears and hands, and a bright orange circular backdrop on a light blue sky background. The scene is built entirely with HTML and CSS, using positioned `<div>` elements styled with classes like `.head`, `.eye`, and `.mouth` to create the face structure. CSS properties such as `border-radius`, `transform`, and absolute positioning define the shape and placement of each facial feature, including the curved mouth and angled eyebrows. All colors and layout are specified statically in `index.css`.

Fork of Face with d3.js!

This example draws a simple creature composed of basic SVG shapes using D3.js version 7. It demonstrates how to construct a figure by manually positioning circles for the body and head, lines for the arms, legs, and tail, and strokes for outlines. The code selects an SVG element, sets its dimensions from attributes, and appends a group translated to the center. It uses D3’s `select` and `arc` imports, though only `select` is applied for shape creation. The visualization highlights manual coordinate specification rather than data-driven binding or scales.

Fork of Fork of Fork of Fork of Let's Make a Face Part I

A yellow circle forms a smiling face, featuring two white eyes and the text "SMILE PLEASE" centered within it. The SVG uses hardcoded coordinates for the circle and eye positions, with the text anchored at the center via `text-anchor="middle"`. The rendering is static, built with SVG elements inside an HTML document.

Fork of Fork of Fork of Let's Make a Face Part I

This example shows a static smiley face built from basic SVG shapes: a yellow circle for the face, two smaller white circles for the eyes, and the text “SMILE PLEASE” centered in black. The code uses raw SVG elements (`<circle>`, `<text>`) inside an HTML document, with inline CSS to remove page margins. The face is drawn with explicit pixel coordinates (center at 480, 250) and fixed dimensions (960×500). The rendering approach is direct SVG markup without any JavaScript libraries, animation, or data binding.

Fork of Fork of Let's Make a Face Part I

This visualization presents a simple smiley face built from three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. The code uses raw SVG elements within an HTML page, setting coordinates and radii explicitly rather than through a data-binding library. The rendering approach is direct and static, with no animation or interaction. The title references the "Let's Make a Face" exercise, and the current composition stops at the eyes, leaving the mouth for a later part. All styling is inline, and the viewport is fixed at 960 by 500 pixels.

Fork of Let's Make a Face Part I

This example shows a simple yellow circle face with two smaller circles for eyes, positioned on a black-outlined face against a blank background. The SVG rendering uses hardcoded coordinates for the face and eye placements, with no data-driven logic or interactive behavior. The visualization relies on basic SVG circle elements, setting the face at center (480, 250) with a radius of 245 and eyes at (350, 180) and (600, 180) with a radius of 50 each. The code directly specifies stroke and fill colors, and the page is styled to hide overflow, creating a minimal static graphic.

Fork of Fork of Flowers

A single purple flower with twelve animated petals and a yellow center grows above a green stem with two leaves, all set in a blue canvas against a brown vase. The animation uses D3’s `transition` and `attr` methods to expand petal and center radii from zero to full size over two seconds. Rendered with SVG primitives like `circle`, `rect`, `path`, and `ellipse`, the code builds the flower, stem, leaves, and vase directly via `select` and `append`. The static leaf and vase shapes use SVG path and geometry attributes without data binding.

Fork of Sol LeWitt Reproduction

This fork of a Sol LeWitt reproduction generates an abstract, grid-based composition entirely with SVG elements. It shows a central circular mask that reveals alternating horizontal and vertical stripes across the full screen. The code creates two masks—one with a black background and white circle, another with a white background and black circle—to control which stripes are visible. It uses the raw SVG DOM API via `document.createElementNS` to draw 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks applied to create the overlapping circle effect. No external libraries are used; only native JavaScript and SVG.