LakshmiPrasannaValdas@my.unt.edu

@Lakshmiprasana8·33 public vizzes

Fork of Hello VizHub

This example shows an area chart of time-series data from a diabetes CSV file, with a steelblue fill and labeled axes for date and value. It loads D3 via UNPKG and uses the `d3.csv` method to fetch the data, `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.area` for the area shape, and `d3.axisBottom` and `d3.axisLeft` for axes. The visualization also demonstrates ES6 module imports, including a local `message` module that sets text in the page, while the chart is rendered as SVG inside a dedicated `#chart` div.

Apr 26, 2024

Loading thumbnail…

Fork of Q2

A network-style comparison of airline delay proportions is shown as a multi-series area chart, with each colored band representing a delay category. The visualization uses D3 v6, loading data from a CSV file and rendering with SVG. The code applies `d3.area`, `d3.scaleBand`, and `d3.scaleLinear` to position the areas, with a legend mapped from `d3.schemeCategory10`. Axes are labeled for airlines and delay proportion, and the data is fetched asynchronously via `d3.csv`.

Apr 26, 2024

Loading thumbnail…

Q2

This example shows the proportion of flight delays for different airlines, displayed as a series of overlapping filled areas. It loads CSV data from a GitHub gist and maps each delay category—such as carrier, weather, or national airspace—to a colored area using d3.area, positioned with d3.scaleBand on the x-axis and d3.scaleLinear on the y-axis. The chart includes axes with labels and a legend, all rendered as SVG via D3 v6.

Apr 26, 2024

Loading thumbnail…

Fork of Q1

This example presents a world population pie chart, visualizing the distribution of population across continents. It loads data from a CSV file using `d3.csv` and renders the chart as an SVG. The chart uses `d3.pie` and `d3.arc` to construct the slices, with a custom `d3.scaleOrdinal` color scale. A legend with colored squares and text labels is added to identify each continent. The code demonstrates importing the `d3` module from UNPKG and a local ES6 module.

Apr 26, 2024

Loading thumbnail…

Q1

This example displays a world population pie chart broken down by continent. It uses D3 v7 to load CSV data from a GitHub gist, converts population values to numbers, and renders an SVG pie chart with an ordinal color scale and a custom legend. The chart is built with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, with slices styled with opacity and stroke.

Apr 26, 2024

Loading thumbnail…

Fork of Fork of q4

This chart displays the relationship between a country's GDP, social support, and its happiness score. Each bubble represents a country, positioned along the x-axis for GDP and the y-axis for social support, while its size corresponds to the happiness score. Hovering over a bubble reveals the country's name via a tooltip. The visualization uses D3.js (v7) with an SVG rendering and a color-coded legend to differentiate countries. Data is loaded from a CSV file, mapping each country to a distinct color from the interpolateTurbo scale.

Apr 16, 2024

Loading thumbnail…

Fork of task-4

This bubble chart visualizes the relationship between GDP, social support, and happiness scores across countries. Each circle represents a country, with its x-position indicating GDP, y-position indicating social support, and radius scaled by happiness score. The visualization uses D3.js v7’s `scaleLinear` for axes and bubble sizing, along with `scaleOrdinal` and `interpolateTurbo` for country-based coloring. Interactive tooltips appear on mouseover, showing the country name. The chart includes a legend for happiness scores and a color-coded list of countries, with SVG rendering.

Apr 16, 2024

Loading thumbnail…

Fork of Fork of Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for 31 car makes. The x-axis maps horsepower, the y-axis maps torque, while bubble size encodes highway MPG and color distinguishes car makes. Built with D3 v7, the SVG includes axes, a legend for MPG values, and an interactive tooltip displaying make on hover. Data is loaded from a CSV file using `d3.csv`. The chart relies on `d3.scaleLinear` for positional and size scales, and `d3.scaleOrdinal` with `d3.interpolateTurbo` for color assignment.

Apr 16, 2024

Loading thumbnail…

Fork of Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes. Each circle’s position encodes horsepower and torque, while its radius and color represent highway MPG and manufacturer, respectively, using a color ordinal scale and linear size scale. The D3 v7 code appends SVG elements, includes axes, a tooltip, and a legend for MPG values. A hover interaction displays the car make within a styled div.

Apr 16, 2024

Loading thumbnail…

Activity6_Task4

This example demonstrates a minimal VizHub project that displays the text “Hello VizHub!” in large, centered typography. The visualization relies on D3.js, loaded via UNPKG, to select the `#message` div and set its content. It also showcases the use of local ES6 modules, importing a message string from `myMessage.js` and combining it with D3’s `select` API. The page structure is defined in `index.html`, with styling from `styles.css`.

Apr 16, 2024

Loading thumbnail…

task8_q3

This scatter plot visualizes a diabetes dataset, plotting blood pressure against glucose levels. Each circle is colored skyblue for non-diabetic outcomes and lightgreen for diabetic outcomes, with the circle's horizontal and vertical radii encoding skin thickness and insulin values. The visualization is built with D3 v6, using `csv` to load the data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. The SVG rendering fills the full window, with axis labels and a title styled in green and blue.

Apr 16, 2024

Loading thumbnail…

Fork of Fork of Hello VizHub

A scatter plot visualizes diabetes patient data, showing Blood Pressure against Glucose Level, with each point colored skyblue for non-diabetic outcomes and lightgreen for diabetic outcomes. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load and parse the diabetes dataset from a GitHub URL, then render circles in an SVG. Circle radii are fixed, while additional data attributes for SkinThickness and Insulin are stored but not visually encoded. Axis labels and a title are added directly via SVG text elements.

Apr 16, 2024

Loading thumbnail…

Fork of task-3

This example shows the relationship between wine review points and price in a scatter plot, with each wine represented as a steelblue circle. The visualization loads wine review data from a local CSV file and plots points on the x-axis against price on the y-axis. The code uses D3 v7 APIs including `d3.csv` for data loading, `d3.scaleLinear` for coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for chart axes, and `d3.select` with `svg.selectAll` to append circles to the SVG renderer.

Apr 16, 2024

Loading thumbnail…

Fork of Task 8_tutorial3.2

This scatter plot maps sepal length against petal length for the Iris dataset, with each point’s shape encoding the species. A custom shape legend identifies the three species. The visualization uses d3.v7 with scaleLinear for axes, scaleOrdinal and symbolsFill for categorical shapes, and the axes and shapeLegend modules to compose the chart. Data is loaded via fetch and parsed with d3.csvParse.

Apr 16, 2024

Loading thumbnail…

Task 8_tutorial3.2

This scatter plot visualizes the Iris dataset, comparing sepal length against petal length for different iris species. The chart encodes each data point as a distinct shape, using the `d3.symbol` API with a `symbolsFill` scale to differentiate species, and includes a shape legend generated via `shapeLegend`. The visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for species mapping, with custom axis and legend utilities built on D3's selection join pattern. Data is fetched as CSV from a GitHub repository and parsed with `d3.csvParse`.

Apr 16, 2024

Loading thumbnail…

Fork of Fork of Fork of Fork of Hello VizHub tutorial 3.1

This example displays the Iris dataset through a scatter plot, mapping petal length and width to the x- and y-axes while coloring points by species (setosa, versicolor, or virginica). The visualization uses D3 v6 to load CSV data, apply linear scales with `d3.scaleLinear`, and render circles in an SVG container. It also draws axes via `d3.axisBottom` and `d3.axisLeft`, with labeled axis text, and handles the full window size for the plot area.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three flower species, with each species color-coded as skyblue, lightgreen, or orange. The visualization uses D3 v6 to load CSV data, create SVG circles, and generate axes with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The code maps the data fields to plot coordinates, with axis labels for petal and sepal measurements, providing a clear comparison of the dataset’s dimensions.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

A minimal demo of VizHub's module system and D3 integration, it displays "Hello VizHub!" as large centered text. The example loads D3 v5 from UNPKG and uses its `select` API to update the DOM, while also importing a local ES6 module (`myMessage.js`) to supply the text. It shows how to combine CDN libraries, local JavaScript modules, and CSS styling in a single embeddable page.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates how VizHub loads D3 and local ES6 modules to display a simple text message. The page uses D3’s `select` API to target the `#message` div and set its text to “Hello VizHub!”. The message string comes from an imported local module, `myMessage.js`, while styles are applied via an external CSS file. The code also includes an unused D3 import and a regular expression literal.

Apr 15, 2024

Loading thumbnail…

task-8-Q3

This stacked bar chart displays customer satisfaction ratings for six airlines, broken into five score ranges from “Below 5” to “Above 8.5.” Each horizontal bar shows the proportional share of ratings in each category, with the x-axis labeled as a percentage. The visualization uses d3.csv to load the data and d3.stack with d3.scaleBand and d3.scaleLinear to compute and position the stacked rectangles, while d3.axisBottom and d3.axisLeft render the axes. A color legend below the chart maps each rating range to its corresponding fill color.

Apr 15, 2024

Loading thumbnail…

Fork of Activity6_Task4

This stacked bar chart displays customer satisfaction ratings for six airlines, broken into five rating categories from "Below 5" to "Above 8.5" across a horizontal percentage scale. D3.js (v7) fetches the CSV data via `d3.csv()`, then uses `d3.stack()` with `d3.scaleOrdinal` for color coding, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis to render the SVG bars. Each airline’s proportional distribution of ratings is shown as stacked segments, with a legend below clarifying the color-to-rating mapping.

Apr 15, 2024

Loading thumbnail…

Fork of Question 2

This example presents an interactive stacked bar chart visualizing passenger reviews of British Airways, with population-like values aggregated by country and religion. A color legend allows users to hover over categories, highlighting matching segments in the chart while fading others. The visualization uses D3 v7 APIs including `scaleOrdinal`, `stack`, `flatRollup`, and `scaleBand`, with `@curran/responsive-axes` for layout. Data is loaded from a local CSV file, and interactivity is managed through `setState` and `observeResize`.

Apr 15, 2024

Loading thumbnail…

Fork of Activity6_Task2

This stacked bar chart shows the percentage of IMDb movie ratings across five genres, revealing how rating distributions vary by genre. Each bar is divided into five rating categories, from “below 5.0” to “above 8.5,” with hover tooltips displaying exact percentages. Built with D3 v7, it uses `d3.stack()` to compute the stacked layout, `d3.scaleBand` and `d3.scaleLinear` for positioning, and an ordinal color scale. Data comes from a CSV file with genre and rating percentages, rendered as SVG rectangles within a single chart.

Apr 15, 2024

Loading thumbnail…

Fork of Activity6_Task2

This stacked bar chart visualizes the percentage distribution of airline ratings across different genres. Each bar represents a genre, with colored segments showing the proportion of each rating level, summing to 100%. Hovering over a segment displays a tooltip with the exact percentage. The visualization uses d3.v7 with SVG rendering, employing `d3.stack()` for data stacking, `d3.scaleOrdinal()` for colors, and `d3.axisBottom()` for the percentage axis.

Apr 15, 2024

Loading thumbnail…

task 8_Q3

This stacked bar chart shows the distribution of passenger ratings across different categories (such as seat comfort, cabin staff service, and food) for various airlines. Each horizontal bar represents an airline, with colored segments showing the percentage of reviews for each rating level. The visualization uses d3.stack and d3.scaleOrdinal to create the stacked segments, with d3.axisBottom and d3.axisLeft for the axes. Hovering over a segment triggers a tooltip displaying the exact percentage for that rating category, implemented via mouseover/mousemove events. The data comes from a CSV of airline reviews, and the SVG rendering uses custom fonts from Yanone Kaffeesatz and Sofia.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a stacked bar chart that visualizes monthly fruit quantities for apples, bananas, and oranges from a CSV dataset. The chart renders as an SVG, using D3 v6 to load the data, stack the series with `d3.stack`, and draw the bars with scales for positioning. A categorical color scale maps each fruit to a distinct color, and a legend is manually appended to identify the categories. The bar heights and positions are computed from the stacked values, with axis margins defining the chart layout.

Apr 15, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, showing the proportion of films in each rating category. The horizontal bars represent genres, while segments show percentages for rating brackets below 5.0 through above 8.5. A hover interaction reveals precise percentage values via tooltips. Built with d3.v7, the chart uses `d3.stack()` for cumulative data, `d3.scaleOrdinal()` for color encoding, and SVG rendering for all graphical elements.

Apr 15, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of IMDb rating levels (below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, above 8.5) across six movie genres, revealing how genre impacts audience ratings. Using d3.stack() to accumulate rating segments per genre and d3.scaleOrdinal() for color encoding, hovering over a bar segment displays an exact percentage via a custom tooltip. The SVG visualization, built with D3 v7, plots genres vertically against a linear x-axis, with gridlines and axis labels styled by custom CSS.

Apr 15, 2024

Loading thumbnail…

Fork of Fork of Fork of Activity 6_Task 1

This interactive horizontal bar chart displays the population of 20 countries in the year 2000, ordered along a categorical y-axis and a linear x-axis. Built with React and D3 version 5, it loads CSV data from a remote URL, processes it, and renders the visualization as an SVG. The chart uses `scaleBand` and `scaleLinear` to map data to coordinates, with custom axis components and tooltips formatted using D3's `format` function.

Apr 14, 2024

Loading thumbnail…

Fork of Fork of Activity 6_Task 1

This example displays a horizontal bar chart of the 2010 population for about twenty countries, from a CSV file accessed via a URL. Built with React and D3 v5, the SVG visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The marks are rectangles, and the code includes custom components for axes and tooltips, using D3's `format` function to abbreviate population values. The chart is rendered with a green fill for bars, and its styling is defined in the accompanying HTML.

Apr 14, 2024

Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted along a horizontal linear scale with countries listed on a vertical band scale. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `max` to compute dimensions, while custom `AxisBottom` and `AxisLeft` components render SVG ticks and labels. Population values are formatted with `format('.2s')` and converted from thousands, and each rectangle includes a native SVG `<title>` tooltip. Data is loaded asynchronously via `d3.csv` from a GitHub raw URL.

Apr 14, 2024

Loading thumbnail…

Activity 6_Task 1

This bar chart displays the population of ten countries for the year 2000, with country names on the y-axis and population values on the x-axis. The visualization is built with React, D3 v5, and SVG, using `scaleBand` and `scaleLinear` for positioning. Data is loaded from a remote CSV file, and axis tick labels are formatted using D3’s `format` function to abbreviate large numbers with "B" for billions.

Apr 14, 2024

Loading thumbnail…

5 Buddhas

A grid of layered, diamond-like polygons in vibrant colors overlaps to form an intricate mandala of five meditating Buddhas. The SVG is generated with React, mapping over arrays to create hundreds of semi-transparent shapes with random positioning and rotating each by 45 degrees. The pure geometry repeats and stacks, producing a dense, kaleidoscopic effect where vivid hues emerge from the black background. Each Buddha figure is composed of these translucent, diamond-shaped cells, creating a modern, data-driven interpretation of a classic spiritual motif.

Mar 21, 2024