Skip to main content
Log in
V

vandanakosuri@my.unt.edu

@Vandanakosuri·13 public vizzes

Loading thumbnail…

Fork of task9(b)

This example shows an area chart of residual sugar measurements colored by wine quality, with the x-axis representing the row index in the dataset and the y-axis showing residual sugar values. The chart uses d3.area() to generate a single filled path in steelblue, with d3.scaleLinear for both axes and d3.axisBottom plus d3.axisLeft for tick marks. The SVG is rendered with D3 v7, rotating the x-axis labels to avoid overlap. The data is a static array of twenty objects with quality categories and residual_sugar values.

Apr 24, 2024
Loading thumbnail…

task9(b)

This area chart visualizes residual sugar levels for wine samples categorized as “bad” or “good” quality. Using D3.js v7, an SVG path is filled via the `d3.area` generator, mapping each data point’s index to a linear x-scale and its sugar value to a y-scale. Axes are added with `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis tick labels. The dataset is embedded directly in the script, and the chart is rendered with a steelblue fill on a 600×400 canvas, with margins and no external data source.

Apr 24, 2024
Loading thumbnail…

Fork of task9

This fork shows a pie chart of categorical quality values, with each slice colored and paired with a legend and axis labels for quality and frequency. It uses D3 v7’s `d3.rollup` to count data points per quality category from an inline array, then `d3.pie` and `d3.arc` to generate SVG paths. A `d3.scaleOrdinal` maps categories to two colors, and hand-built SVG rect and text elements form the legend.

Apr 24, 2024
Loading thumbnail…

task9

This visualization displays the frequency distribution of categorical data values ("bad" and "good") using a pie chart, with a legend and axis labels for "Quality" and "Frequency". It builds the chart with d3.pie to compute arc segments, d3.arc for path geometry, and d3.scaleOrdinal for color mapping. The SVG is created via d3.select and appended to a container, with data aggregated using d3.rollup. The source dataset is a simple array of quality attributes, rendered as a static SVG graphic.

Apr 24, 2024
Loading thumbnail…

Activity-6(Task4)

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for 32 different vehicle makes. It uses d3.csv to load the data and renders circles with d3.scaleLinear for x, y, and bubble size, while d3.scaleOrdinal assigns colors based on each make. Interactive tooltips appear on mouseover, and a legend displays the MPG size scale. The visualization is built with SVG and includes d3.axisBottom and d3.axisLeft for the axes.

Apr 14, 2024
Loading thumbnail…

Activity-6(Task4)

This example demonstrates a minimal D3.js visualization that renders a static text message, “Hello VizHub!”, into a centered HTML div. It shows how to set up a VizHub project by loading D3 v5 from a CDN and importing both the `select` function from the `d3` module and a local ES6 module. The code uses `select('#message').text(message)` to update the DOM, with styling provided by CSS. It also includes a regular expression and variable declaration, though these do not affect the visual output.

Apr 14, 2024
Loading thumbnail…

Activity-6(Task3(1))

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis, with each point’s shape representing the species of iris. The implementation uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to map data values to positions and shapes, while `axisLeft` and `axisBottom` render the axes. A custom legend, built with `symbol().type()`, identifies each species by its corresponding shape. Data is loaded asynchronously from a CSV file and parsed using `csvParse`.

Apr 14, 2024
Loading thumbnail…

Activity-6(Task3(1))

This example demonstrates a minimal D3.js setup within VizHub, rendering a static message to the page. It shows how to import functions from the D3 library using ES6 modules, alongside a local custom module, to manipulate the DOM. The code uses `select` from D3 to set text content on an HTML element, and also defines a regular expression and a number variable for illustrative purposes. The rendering approach relies on a simple HTML page with CSS styling, loading D3 from a CDN via UNPKG.

Apr 14, 2024
Loading thumbnail…

Activity-6(Task3)

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length while distinguishing the three species of iris flowers through different symbol shapes. The visualization uses D3 v7 with scales and axes from the d3-scale and d3-axis modules, and encodes species using d3.scaleOrdinal with symbolsFill and symbol generators. Data is loaded from a remote CSV file, and the chart includes custom axis labels and a shape legend to identify species categories.

Apr 14, 2024
Loading thumbnail…

Activity-6(Task2)

This stacked bar chart displays the percentage distribution of movie ratings across six genres, with each bar segmented into five rating categories from "below 5.0" to "above 8.5," showing how genre influences rating outcomes. The visualization uses d3.stack with d3.scaleOrdinal for color encoding, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis, rendering as an SVG. Interactive tooltips, implemented via d3.select and mouseover events, display precise percentage values on hover, while the data originates from a CSV file depicting customer satisfaction and performance metrics.

Apr 14, 2024
Loading thumbnail…

Activity-6(Task1)

This example visualizes the 2010 populations of the top 20 countries as a horizontal bar chart, using a linear scale for population and a band scale for country names. The chart is rendered as an SVG via React, with D3 v5 handling the data loading, scaling, and tick formatting. Data is fetched from a CSV file, and hover tooltips display each bar’s value, formatted with D3’s `format` function.

Apr 14, 2024
Loading thumbnail…

Activity-6(Task1)

This bar chart displays the population of 30 countries in 2020, using horizontal bars that encode population values by length. The visualization is built with React and D3 v5, leveraging D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG rendering for crisp output. The chart includes custom tick formatting that converts scientific notation to readable numbers, and tooltips show exact population values. Data is loaded from a remote CSV file using D3’s `csv` parser.

Apr 14, 2024
Loading thumbnail…

5 buddhas

Five Buddha silhouettes are rendered as colored geometric shapes on a black background, each generated from a dense SVG path. The code uses React to build the visualization, mapping over an array to produce overlapping rotated polygons with randomized fill colors and positions. The primary Buddha figure is drawn via a large SVG path, while the others emerge from the polygon generation. The rendering is purely SVG-based, with no data source or interaction, showcasing a decorative, procedural art piece.

Mar 24, 2024