L

likithabaddam@my.unt.edu

@likithabaddam·24 public vizzes

Loading thumbnail…

TASK9_DV_LB_Question2

This visualization shows an area chart of Setosa species data, plotting petal length against an index of observations. The chart uses a semi-transparent steel blue fill to represent the area beneath the line, with axes labeled “Index” and “Length” and a title indicating the species and petal information. It fetches the iris dataset from a GitHub repository using `fetch` and parses it with `d3.csvParse`, then filters for Setosa records. The SVG rendering uses `d3.area` and `d3.scaleLinear` to construct the chart, with axes generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

TASK9_DV_LB_Question1

This pie chart visualizes the distribution of movie ratings below 5.0 across different genres. The D3.js v5 code fetches CSV data from a GitHub repository and uses `d3.pie` to compute arc segments, `d3.arc` for path generation, and `d3.scaleOrdinal` for color mapping. Each slice displays its numeric value using `d3.format`, with a legend generated from the genre field. The visualization is rendered as an SVG with a fixed width and height, using a categorical color palette.

Loading thumbnail…

TASK9_DV_LB_Q1

This pie chart visualizes the distribution of internet usage rates across African countries, specifically showing the proportion of countries with below-5% internet penetration. The visualization uses a categorical color scheme (`schemeCategory10`) to differentiate each country segment, with labels displaying country names. The chart is rendered as SVG using D3.js v7, employing the `pie` layout function and `arc` generator to create the circular segments. Data is loaded from a GitHub-hosted CSV file, and the `select` API manages the SVG container and chart positioning.

Loading thumbnail…

Activity8_Task1_DV_LB_Q1.2

This visualization is a horizontal bar chart showing the populations of 20 countries in 2010. It also displays a user-friendly x-axis label, "POPULATION-2010." The chart uses React to render SVG elements, with custom components for axes and marks. The code leverages D3 v5 functions like `scaleBand`, `scaleLinear`, `max`, and `format` to handle data scaling and tick formatting, using the `csv` function to load data from a GitHub repository.

Loading thumbnail…

Activity8_Task1_DV_LB_Q1.1

This chart displays the population of ten countries in the year 2000 as horizontal bars, with country names on the y-axis and population counts on the x-axis. Using React with D3 v5, the code loads CSV data via `d3.csv`, transforms the population field, and renders an SVG through React components for axes and marks. The bars are drawn as `rect` elements using `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. A tooltip shows the formatted population value, and a custom tick formatter converts values like billions into a compact label.

Loading thumbnail…

Activity8_Task4_Q4

This bubble chart visualizes the correlation between sepal length, sepal width, petal length, and petal width across three iris species. The x-axis maps sepal length, the y-axis maps sepal width, and petal length controls bubble radius, while color distinguishes species. Built with D3.js v7 and rendered as SVG, it uses `scaleLinear` for axes and bubble sizing, `scaleOrdinal` with `schemeCategory10` for colors, and includes an interactive tooltip on mouseover. The data comes from the classic Iris dataset, loaded via `d3.csv`.

Loading thumbnail…

Activity8_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle's position determined by the x- and y-scales and its size encoding MPG via the `d3.scaleLinear` z-scale. Color mapping via `d3.scaleOrdinal` and `d3.interpolateTurbo` distinguishes makes, while animated hover effects and a custom tooltip built with D3 event handlers reveal the make name. The SVG chart includes labeled axes, a legend with circles for MPG values and color swatches, and reads from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of Activity8_Task3_DV_LB_Q3

This scatter plot visualizes the Smoking dataset, showing the relationship between gross income and the age at which individuals began smoking, with each point colored pink for females and sky blue for males. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load and scale the data, then renders SVG circles positioned by income and age. The data is fetched from a remote GitHub CSV file, and the plot fills the browser window with labeled axes for Gross_Income and Smoking_At_Age.

Loading thumbnail…

Activity8_Task3_DV_LB

This visualization uses a scatter plot to examine the relationship between gross income and age within the Smoking Profits dataset, with each point colored pink or light blue to differentiate between female and male respondents. Data is loaded from a remote CSV file using the `d3.csv` method. The plot is rendered as an SVG using D3 version 6.7.0, with linear scales via `d3.scaleLinear` and axes generated with `d3.axisLeft` and `d3.axisBottom`. Circles, added through a `join` operation, represent individual data records.

Loading thumbnail…

Activity8_Task3-2_DV_LB_Q3.1

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and encoding species through distinct point shapes. The visualization uses a custom D3.js v7 implementation with modular functions for axes and legend rendering, employing `scaleLinear`, `scaleOrdinal`, and `symbolsFill` for proportional scaling and shape encoding. The code imports specific APIs including `axisLeft`, `axisBottom`, and `symbol` from D3, while fetching data from a GitHub-hosted CSV file. A shape legend positioned at the right displays the species categories with sample symbols.

Loading thumbnail…

Activity8_Task3-2_DV_LB

This visualization displays the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with points colored by species shape using distinct symbols. The chart uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbolGenerator` to render marks, while a custom shape legend with `axisLeft` and `axisBottom` from the axes module clarifies the categorical mapping. Data is loaded from a CSV file via `csvParse`, and the plot is built with `select`, `join`, and margin-based scales.

Loading thumbnail…

Activity8_Task3_DV_LB

This scatter plot visualizes the Iris dataset by mapping petal length and petal width on the x- and y-axes, with each point colored by species (setosa, versicolor, or virginica) using orange, skyblue, and lightgreen fills. Built with D3 v6, it renders as an SVG and loads data via `d3.csv`, scales axes with `d3.scaleLinear`, and draws circles with `selectAll('circle')` and a `.join('circle')` operation. Axis labels use green text, and the plot adapts to the browser window’s dimensions.

Loading thumbnail…

Activity8_Task2_DV_LB_Q2.1

This stacked bar chart displays the efficiency of fourteen car makes by comparing their average horsepower, torque, and highway MPG values. The visualization uses D3.js version 7 to implement a horizontal stacked bar layout, where each make is a row and the three metrics are stacked segments. The data is loaded from a CSV file and processed with the `d3.stack()` API to create the cumulative bars. The chart includes interactive tooltips that display the exact numeric value for each metric segment when hovered, and uses a custom color scale to distinguish between the three efficiency metrics.

Loading thumbnail…

Activity8_Task2_DV_LB_Q2.1

A stacked bar chart displays the percentage distribution of five rating levels across movie genres, with each bar segment colored by rating category. Hovering over a segment highlights it and reveals an accurate percentage via a tooltip. The visualization uses D3 v7 with `d3.stack()` for data stacking, `d3.scaleOrdinal` for categorical colors, and `d3.scaleBand`/`d3.scaleLinear` for axes. Data comes from the provided CSV, rendered as SVG elements with interactive mouse events.

Loading thumbnail…

Activity8_Task2_DV_LB

This stacked bar chart illustrates the distribution of movie ratings across six genres, showing the proportion of films falling into five rating brackets from “below 5.0” to “above 8.5.” The visualization uses D3.js (v7) and renders as an SVG, with genres on the y-axis and percentage on the x-axis. Hovering over any segment reveals a tooltip displaying the exact percentage for that rating category within the genre. The chart uses `d3.stack()` for the stacked bars, `d3.scaleLinear()` for the x-axis, and `d3.scaleBand()` for the y-axis. Data comes from the provided CSV file.

Loading thumbnail…

Activity6_Task2_DV_LB

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The chart uses d3.stack() to create the stacked segments, d3.scaleBand() for the genre axis, and a d3.scaleOrdinal() for color encoding. Interactive tooltips appear on mouseover, displaying the precise percentage for each rating category within a genre. The data comes from an external CSV file, and the SVG rendering uses D3 v7 with custom styling from a CSS file.

Loading thumbnail…

Activity8_Task2_DV_LB

This stacked bar chart compares the distribution of movie ratings across six genres, showing the percentage of films falling into five rating brackets from “below 5.0” to “above 8.5.” Each genre’s bar is segmented by rating level, colored via a categorical scale, with tooltips revealing exact percentages on hover. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to construct the chart, reading data from a CSV file and rendering into an SVG canvas.

Loading thumbnail…

Activity8_Task1_DV_LB_Q1.2

A horizontal bar chart displays the population of twenty countries in 2020, with bars sorted by country name and scaled linearly along the x-axis. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the axes. D3's csv loader fetches the dataset from a GitHub raw URL, multiplies the 2010 value by 1000 to represent population, and formats tick labels using d3.format. Light green bars include native SVG tooltips showing the formatted population value.

Loading thumbnail…

Activity8_Task1_DV_LB

This visualization is a horizontal bar chart showing the 2020 population for 30 countries, sorted by country name. Population values are read from a remote CSV file using `d3.csv` and multiplied by 1000 to convert from thousands. The chart renders as an SVG using React, with axes and bars built from custom components. D3’s `scaleBand` positions the categorical y-axis, while `scaleLinear` scales the quantitative x-axis. Each bar includes a tooltip formatted via D3’s `format` function, displaying abbreviated numbers (e.g., “1.5B”).

Loading thumbnail…

Fork of Activity8_Task1_DV

This fork renders a horizontal bar chart of population data for 30 countries in 2020, using React to compose an SVG scene. The code imports D3 v5 utilities like `scaleBand`, `scaleLinear`, and `max` to position bars and axes, while custom components (AxisBottom, AxisLeft, Marks) generate tick lines and rectangles. Population values are loaded from a CSV via D3’s `csv` function, then formatted with `format('.2s')` to display billions with a 'B' suffix. The visual emphasizes green bars against a clean white background, with tooltips revealing precise values on hover.

Loading thumbnail…

Fork of Fork of Activity8_Task1_DV

This horizontal bar chart displays the 2020 population for 30 countries, sourced from a CSV file loaded with `d3.csv`. Built with React and D3 v5, it renders as an SVG. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the x-axis, and `d3.format` to abbreviate large numbers to billions. A `<title>` element provides tooltips.

Loading thumbnail…

Fork of Activity8_Task1_DV

This example presents a horizontal bar chart ranking the populations of 30 countries in 2020, using green bars to encode the population values along the x-axis, with country names on the y-axis. Written in React with D3 version 5, the code defines reusable components for axes and marks, leveraging `d3.scaleBand`, `d3.scaleLinear`, and `d3.max`. Data is loaded from a CSV file via the d3 `csv` function, and the rendering uses SVG `rect` elements. The chart includes axis labels, tick marks, and a tooltip showing abbreviated population values.

Loading thumbnail…

Activity8_Task1_DV

This example demonstrates how to load D3 from a CDN, import local ES6 modules, and render dynamic text into a DOM element. It uses the `select` function from D3 v5 to update the text content of a `div` with the ID `message`, pulling the string from a separate `myMessage.js` module. The visualization also initializes a constant and a regular expression, though these do not affect the displayed output. Styling is applied via an external CSS file to center the large text.

Loading thumbnail…

5 Buddhas

Five translucent, multicolored diamond shapes are arranged in a grid pattern, overlaid on a black background. Each diamond, created with a custom SVG polygon, rotates 45 degrees and uses randomized coordinates and fill colors generated from repeated array mappings. The composition references Buddhist iconography through the repeated Buddha-inspired form, with the five shapes creating a rhythmic, almost meditative visual cadence against the dark backdrop.