Skip to main content
Log in
V

vaishnavi6gan@gmail.com

@VaishnaviGunnaReddy·63 public vizzes

Loading thumbnail…

Assisgment 2 - Question 2

This area chart displays chocolate sales data for a single categorical series, with value labels positioned above each point. The visualization uses D3 v7 to fetch a CSV from a GitHub gist, then constructs a band scale for the x-axis and a linear scale for the y-axis. The chart renders a filled area path using `d3.area`, with axes generated by `d3.axisBottom` and `d3.axisLeft`, and individual sales values added as SVG text elements.

Apr 12, 2024
Loading thumbnail…

Assisgment 2 - question 2

This example projects a world map from TopoJSON country boundaries using the `topojson-client` library’s `feature` function. The map is rendered into an SVG canvas via D3’s `select` and `join` operations. It fetches remote geospatial data from a GitHub gist URL, initially setting a loading state before drawing. The visualization dynamically sizes to the browser window’s width and height, displaying the geographic shapes once the data is loaded, using the `map` module for the final rendering.

Apr 12, 2024
Loading thumbnail…

Fork of Fork of Hello VizHub

This example visualizes a simple network of nodes and links using a force-directed graph layout. The code creates a simulation with `d3.forceSimulation` and `d3.forceLink` to position the elements, rendering them as SVG circles and lines. It also includes a text message displayed in a `div` element, updated via D3’s data join. The visualization is built with D3 v5, pulling the library from a CDN, and uses local CSS for styling. The data is hardcoded in the script, showing a basic interactive force layout.

Apr 12, 2024
Loading thumbnail…

Assisgment 2 -question 1

This example shows a pie chart of monthly sales totals, with each slice labeled by its month name directly on the chart. It loads CSV data from a GitHub Gist, aggregates the raw records by month using `d3.rollup` and `d3.sum`, then draws the chart with `d3.pie()` and `d3.arc()`. The SVG rendering uses `d3.scaleOrdinal` with `d3.schemeCategory10` for slice colors and places text labels at arc centroids.

Apr 12, 2024
Loading thumbnail…

Fork of Activity7question1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000. The chart uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning, while rendering SVG rectangles. Country names appear on the y-axis, and population values are formatted with D3’s `format` function, converting values to billions. Data is loaded asynchronously from a CSV file using `d3.csv`, and axes are drawn with custom React components, with tick lines highlighted in blue.

Apr 11, 2024
Loading thumbnail…

Fork of Fork of Activity7question1

This example displays a horizontal bar chart comparing the populations of ten countries in the year 2000, using a D3 v5 scaleBand for countries and a scaleLinear for population. The React-based rendering utilizes SVG, with `AxisBottom` and `AxisLeft` components generating ticks, while `Marks` creates rectangles whose widths encode population values. A tooltip, defined via `<title>`, shows the abbreviated population figure. Data is loaded asynchronously from a remote CSV file using D3's `csv` function.

Apr 11, 2024
Loading thumbnail…

Fork of Activity7question1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, with bars encoded by a d3.scaleLinear x-axis and a d3.scaleBand y-axis. The chart uses React components (AxisBottom, AxisLeft, Marks) to render SVG elements, with tick marks styled in blue and bars filled in light green. Data is loaded asynchronously via d3.csv from a remote GitHub dataset, and the population values are formatted using d3.format to display billions with a "B" suffix.

Apr 11, 2024
Loading thumbnail…

assi

This example shows a horizontal bar chart that ranks ten countries by their population in the year 2000, using a green fill and tooltips that format values with a "B" suffix. The React-based visualization relies on D3’s `scaleBand` and `scaleLinear` for axes, and builds the SVG from `<rect>` marks, with custom `AxisBottom` and `AxisLeft` components rendering tick lines and labels. Population data is loaded via `d3.csv` from a GitHub-hosted dataset. Blue gridlines and Poppins typography style the chart, which is rendered entirely as SVG.

Apr 11, 2024
Loading thumbnail…

Fork of Activity7question1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, with bars encoded by a d3.scaleLinear x-axis and a d3.scaleBand y-axis. The chart uses React components (AxisBottom, AxisLeft, Marks) to render SVG elements, with tick marks styled in blue and bars filled in light green. Data is loaded asynchronously via d3.csv from a remote GitHub dataset, and the population values are formatted using d3.format to display billions with a "B" suffix.

Apr 11, 2024
Loading thumbnail…

Fork of Fork of Activity7question1

This example displays a horizontal bar chart comparing the populations of ten countries in the year 2000, using a D3 v5 scaleBand for countries and a scaleLinear for population. The React-based rendering utilizes SVG, with `AxisBottom` and `AxisLeft` components generating ticks, while `Marks` creates rectangles whose widths encode population values. A tooltip, defined via `<title>`, shows the abbreviated population figure. Data is loaded asynchronously from a remote CSV file using D3's `csv` function.

Apr 11, 2024
Loading thumbnail…

Fork of Fork of Activity 6 - Question 4

This bubble chart displays the relationship between screen size, price, and horizontal resolution for electronic devices. The visualization uses a linear scale for both axes, while bubble radius is mapped to resolution. Built with D3.js v7, it renders as an SVG with interactive tooltips that appear on mouseover, displaying complete product specifications. The circles are semi-transparent skyblue with black strokes, and data comes from a static CSV file containing 30 TV models from various brands.

Apr 11, 2024
Loading thumbnail…

assign

A horizontal bar chart displays the populations of ten countries in the year 2000, sorted by country name along the y-axis and scaled linearly by population on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, `format` to abbreviate tick labels (e.g., converting billions), and SVG `rect` elements for bars. Data is loaded via `csv` from a remote GitHub dataset.

Apr 11, 2024
Loading thumbnail…

Fork of Assignment-2

This example visualizes a force-directed network graph built with d3.forceSimulation, displaying circular nodes connected by lines. The graph uses an SVG renderer, with node positions updated each tick. The data is loaded from an external CSV file (source v3), and the code includes a legend and controls for restarting the simulation. Node drag behavior is implemented via d3.drag, and the visualization applies a color scale to differentiate nodes based on categorical data.

Apr 11, 2024
Loading thumbnail…

Fork of Activity6question2

A stacked horizontal bar chart shows the percentage distribution of IMDb ratings across six genres, using five rating brackets from below 5.0 to above 8.5. The code loads data from a CSV file and uses d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand to build the chart. Each segment displays a tooltip on mouseover that reports the exact percentage for that genre and rating bracket. The visualization uses SVG rendering with D3 v7.

Apr 11, 2024
Loading thumbnail…

assign-2

This bubble chart displays electronics products, plotting screen size against price while using bubble radius to represent horizontal resolution. Each circle is colored sky blue with black strokes and includes interactive tooltips showing brand, resolution, processor speed, and price details. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and mouse event handlers for tooltip interactions. Data comes from a local CSV file, rendered as SVG with opacity changes on hover.

Apr 11, 2024
Loading thumbnail…

assi-2

A generative SVG artwork depicts a dense, colorful arrangement of rotated polygons layered over a large, intricate Buddha path. The polygons are rendered via nested React maps, with random positioning, fill colors from an RGB range, and rotation transforms. The composition combines abstract geometric noise with a detailed path-based figure, rendered using React and SVG elements on a green background.

Apr 11, 2024
Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example demonstrates how to load and parse the Palmer Penguins dataset, converting quantitative attributes like bill length and body mass into numeric values. The code displays the first data row as a JSON object in a preformatted text block, using the parsed CSV data imported directly from `data.csv`. The parsing logic iterates through each data entry, applying the unary plus operator to convert measurement columns from strings to numbers. The visualization relies on the imported dataset and the `main` export function to render the structured output to the container.

Apr 11, 2024
Loading thumbnail…

assig-2

This interactive bubble chart visualizes synthetic TV data from a CSV file, plotting screen size against price while encoding vertical resolution through bubble radius and brand through color. Built with D3 v7, the SVG visualization includes animated hover effects with a custom tooltip displaying brand information. Using `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color spectrum, the chart responds to mouse events with transition-based tooltip show/move/hide functions.

Apr 11, 2024
Loading thumbnail…

assign-2

This bubble chart displays electronics products, plotting screen size against price while using bubble radius to represent horizontal resolution. Each circle is colored sky blue with black strokes and includes interactive tooltips showing brand, resolution, processor speed, and price details. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and mouse event handlers for tooltip interactions. Data comes from a local CSV file, rendered as SVG with opacity changes on hover.

Apr 11, 2024
Loading thumbnail…

Assignment-2

This bar chart displays the population of ten countries in the year 2000, ordered by country name along the vertical axis with horizontal bars representing population values. The visualization uses React to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) for positioning, and custom axis components that format tick labels using D3's format function to abbreviate values (e.g., converting G to B for billions). Data is loaded asynchronously from a CSV file using D3's csv method, with the top ten rows selected for display.

Apr 11, 2024
Loading thumbnail…

assign

A horizontal bar chart displays the populations of ten countries in the year 2000, sorted by country name along the y-axis and scaled linearly by population on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, `format` to abbreviate tick labels (e.g., converting billions), and SVG `rect` elements for bars. Data is loaded via `csv` from a remote GitHub dataset.

Apr 11, 2024
Loading thumbnail…

Fork of Dvq3

The visualization renders a dense, overlapping grid of semi-transparent polygons in vibrant colors, layered over a large, intricate Buddha silhouette path. The polygons are generated through nested loops over a fixed array, with random coordinates, RGB fills, and rotations creating a chaotic, abstract texture. The Buddha figure is drawn as a complex SVG path, with the entire composition set against a green background. The code uses React for structure and ReactDOM for rendering, with all graphics output as SVG elements.

Apr 11, 2024
Loading thumbnail…

Fork of background change

This visualization displays a large, flower-patterned green background with a single, complex path shape rendered in the center, appearing as a stylized figure. The path data is defined using SVG path commands, specifically with cubic Bézier curves (`M` and `C` commands), and is positioned and scaled via a `transform` attribute. The visualization is built with React and rendered as SVG, with the path coordinates embedded directly in the JavaScript code. The background is set via CSS using an external image URL.

Apr 11, 2024
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal D3.js project within the VizHub environment. It uses D3’s `select` API to target an HTML element and set its text content to a greeting message. The message string is imported from a separate local ES6 module, showcasing modular code organization. The visualization also includes CSS styling that centers the text and scales it to a large font size, producing a simple, static visual output.

Apr 11, 2024
Loading thumbnail…

Fork of CSV Dataset Template - Penguins

This example demonstrates how to load and parse the Palmer Penguins dataset, converting quantitative attributes like bill length and body mass into numeric values. The code displays the first data row as a JSON object in a preformatted text block, using the parsed CSV data imported directly from `data.csv`. The parsing logic iterates through each data entry, applying the unary plus operator to convert measurement columns from strings to numbers. The visualization relies on the imported dataset and the `main` export function to render the structured output to the container.

Apr 11, 2024
Loading thumbnail…

Fork of assign

This example loads the Palmer Penguins dataset from a CSV file and converts the quantitative attributes (bill length, bill depth, flipper length, and body mass) into numbers. The main function displays the first row of the parsed data as a JSON string inside a `<pre>` element, using a hardcoded font size of 36 pixels. The data is exported for reuse in other visualizations.

Apr 11, 2024
Loading thumbnail…

assign

This example displays the raw first row of the Palmer Penguins dataset as formatted JSON. The code imports the CSV file, converts quantitative fields like bill length and body mass to numbers, and renders the parsed object in a styled `<pre>` element. It demonstrates a minimal data-loading and parsing workflow for VizHub, using the built-in CSV import and template literal syntax to display the structured data.

Apr 11, 2024
Loading thumbnail…

Assignment-2

This visualization displays a dense field of randomly positioned, overlapping diamond polygons scattered across a green background. The SVG rendering uses nested React map functions to generate hundreds of polygons with randomized coordinates, fill colors, and rotation transforms. Built with React and rendered through ReactDOM, the code employs basic JavaScript math operations like `Math.random()` and `Math.sqrt()` to determine geometry. A large SVG path element depicting a Buddha figure is layered on top of the polygon field, creating an abstract, collage-like composition where the colorful geometric shapes partially obscure the underlying portrait.

Apr 11, 2024
Loading thumbnail…

a2

This visualization renders a dense field of semi-transparent, randomly rotated polygons overlaid on a large, intricate Buddha silhouette path. The SVG scene uses React to map nested arrays and generate hundreds of polygons with randomized positions, colors, and rotations via `Math.random()`. The Buddha shape is drawn using SVG `<path>` and `<g>` transform elements, while the page background is set to green with a prominent red text message. The rendering relies on React 16.10 and ReactDOM to manage the component tree.

Apr 11, 2024
Loading thumbnail…

Assignment-2

This bar chart displays the population of ten countries in the year 2000, ordered by country name along the vertical axis with horizontal bars representing population values. The visualization uses React to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) for positioning, and custom axis components that format tick labels using D3's format function to abbreviate values (e.g., converting G to B for billions). Data is loaded asynchronously from a CSV file using D3's csv method, with the top ten rows selected for display.

Apr 11, 2024
Loading thumbnail…

assign-2

This example shows a pie chart displaying fruit quantities from a CSV dataset, using the D3.js v7 library and SVG rendering. The visualization computes slice geometries with `d3.pie()` and draws them with `d3.arc()`, while color assignments come from `d3.scaleOrdinal` with `schemeCategory10`. A legend, also built in SVG, maps each fruit name to its corresponding color using small rectangles and text labels positioned relative to the chart’s center. The code loads data asynchronously via `d3.csv`, and the chart is centered within a 400×400 pixel viewport.

Apr 11, 2024
Loading thumbnail…

Assignment-2

This D3.js example renders a colorful scatter of circles over a pale green SVG canvas, with each circle’s position, size, and color defined by a static JavaScript array. The code demonstrates the D3 *general update pattern* and method chaining via the `select` function, the `join` operation, and chained `.attr` setters to bind data and style the shapes. The visualization uses a hardcoded dataset, with an opacity of 0.708 applied to all circles for a layered effect.

Apr 11, 2024
Loading thumbnail…

assign-2

An interactive parallel coordinates plot displays the Iris dataset, encoding each flower's measurements as a multi-segment line across five axes. Users brush along any axis to filter the data, instantly fading out excluded lines. Built with reusable D3 primitives including `scaleLinear`, `scalePoint`, `scaleOrdinal`, `line`, and `brushY`, the visualization uses `transition` for smooth opacity changes. The code is structured as a React component with a `memoize` helper, and the chart responds to container resizing via the `observeResize` utility.

Apr 11, 2024
Loading thumbnail…

Activity 7

This interactive scatter plot, built with D3.js, visualizes the Iris dataset, showing the relationship between different flower measurements. The plot animates through four axis configurations, cycling petal and sepal dimensions on the x-axis while keeping sepal length on the y-axis. A legend distinctively colors points by species—setosa, versicolor, and virginica—using light blue, light green, and orange. The visualization dynamically redraws axes and labels using `scaleLinear` and `axisBottom`, with data loaded via `d3.csv`, demonstrating a reusable `scatterPlot` module.

Apr 11, 2024
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatter plot cycles through different Iris flower measurements, showing how the petal width, sepal width, petal length, and sepal length correlate across three species. The visualization updates at regular intervals via `setInterval`, using D3's `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles. Data comes from a CSV file of the classic Iris dataset, with colors distinguishing species. Text labels and legends are added using D3 selections, and the layout adapts to the full browser window size.

Apr 11, 2024
Loading thumbnail…

aasign-2

This example demonstrates how to build a minimal web page integrating D3.js with local ES6 modules. It displays a simple text message, “Hello VizHub!”, centered on the screen via CSS. The code imports the `select` function from D3 and a `message` string from a local module, using `select('#message').text(message)` to render the text. It loads D3 from a CDN (UNPKG) and relies on a bundled JavaScript file, illustrating basic import and rendering workflows.

Apr 11, 2024
Loading thumbnail…

Fork of Assignment-2

This example visualizes a force-directed network graph built with d3.forceSimulation, displaying circular nodes connected by lines. The graph uses an SVG renderer, with node positions updated each tick. The data is loaded from an external CSV file (source v3), and the code includes a legend and controls for restarting the simulation. Node drag behavior is implemented via d3.drag, and the visualization applies a color scale to differentiate nodes based on categorical data.

Apr 11, 2024
Loading thumbnail…

Assignment-2

This visualization shows the results of Assignment-2, displaying data points as an animated scatterplot. It uses `d3.forceSimulation` to position and move circles, with labels rendered for each point, and includes a refresh button to reset the animation. The example relies on D3’s event handling for mouse interactions and transitions to update positions smoothly. The data appears to be generated randomly, and the rendering approach uses SVG elements managed through D3’s selection and data-join methods. The author is VaishnaviGunnaReddy, and the source is labeled v3.

Apr 11, 2024
Loading thumbnail…

Assignment-2

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling the x-axis among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Points are colored by species—setosa, versicolor, and virginica—with a legend and fixed axes. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the chart, loading data from a remote CSV. The SVG rendering includes custom text labels, a title, and a rotating axis label.

Apr 11, 2024
Loading thumbnail…

Activity-6

This interactive scatterplot animates through the Iris flower dataset, cycling the x-axis among four measurements (petal width, sepal width, petal length, sepal length) while the y-axis shows sepal length. Points are colored by species (setosa in blue, versicolor in green, virginica in orange) with a custom legend. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `selectAll().join()`, with the plot constructed as a reusable `scatterPlot` function. A `setInterval` timer redraws the axes and updates the x-value mapping, while static labels and a title appear as SVG text elements. Data loads from a remote gist CSV file.

Apr 11, 2024
Loading thumbnail…

Fork of Fork of Activity 6 - Question 4

This bubble chart displays the relationship between screen size, price, and horizontal resolution for electronic devices. The visualization uses a linear scale for both axes, while bubble radius is mapped to resolution. Built with D3.js v7, it renders as an SVG with interactive tooltips that appear on mouseover, displaying complete product specifications. The circles are semi-transparent skyblue with black strokes, and data comes from a static CSV file containing 30 TV models from various brands.

Apr 5, 2024
Loading thumbnail…

Activity 6 - Question 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 30 car makes. Each circle represents a car make, with its x-axis position showing horsepower, y-axis showing torque, and bubble size encoding highway MPG. The visualization uses d3.csv to load data and d3.scaleLinear for positioning and sizing, with d3.scaleOrdinal and d3.interpolateTurbo assigning colors to different makes. Interactive tooltips appear on mouseover, displaying each make’s name, while legend circles and color swatches explain the MPG scale and color mapping.

Apr 4, 2024
Loading thumbnail…

Finalq4activity6

A bubble chart visualizes the correlation between processing speed, memory, and camera megapixels for consumer electronics brands from electronic_data.csv. Each circle's horizontal position encodes average processing speed (GHz), vertical position encodes average memory (GB), and radius encodes camera megapixels. The chart uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with d3.interpolateTurbo for brand colors, and d3.axisBottom/d3.axisLeft for tick labels. Interactive tooltips appear on mouseover via d3 event handlers, with a legend showing megapixel ranges and brand color dots, all rendered as SVG with D3 v7.

Apr 4, 2024
Loading thumbnail…

Finalq3activity6

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica). The visualization uses D3 v6 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load the CSV data, compute axis scales, and render the SVG plot. The code also reads additional flower dimensions for potential use, though it focuses on displaying the petal measurements and species classification.

Apr 4, 2024
Loading thumbnail…

QUESTION3ACT6

This scatter plot visualizes the Iris dataset, showing petal length against petal width for individual flowers, with each species (setosa, versicolor, virginica) represented by a distinct color. The SVG visualization uses D3 v6's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load, scale, and render the data points. The code maps the raw data from the provided CSV URL to circle positions, with the `marker` function assigning colors based on species type.

Apr 4, 2024
Loading thumbnail…

activity6question4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for different car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius scales with highway MPG and its color maps to the car make. Hovering a bubble reveals the make via a tooltip. The visualization uses D3 v7 with SVG rendering and static animation, reading data from a CSV file. It builds custom axes, a size legend for MPG, and a color legend for makes, using D3’s `scaleLinear`, `scaleOrdinal`, and `interpolateTurbo` for color mapping.

Apr 4, 2024
Loading thumbnail…

question4activity6

This bubble chart explores the relationship between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size and legend circles) across 24 synthetic car makes, with each make assigned a unique color from an ordinal scale using `d3.interpolateTurbo`. The visualization animates on hover, using tooltip event handlers to display the car make and applying CSS opacity transitions for interactivity. Built with D3 v7, the chart renders SVG circles via `d3.select` and `d3.join`, with axes scaled through `d3.scaleLinear`, and includes a legend mapping MPG values to proportional radii.

Apr 4, 2024
Loading thumbnail…

question3activity6

This example visualizes the classic Iris dataset as a scatter plot, plotting petal length along the x-axis and petal width along the y-axis. It colors each point by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange. The visualization loads CSV data from a GitHub gist, parses numeric columns, and uses d3.scaleLinear with extents to map values to screen coordinates. It renders SVG circles with fixed radius and draws axes using d3.axisLeft and d3.axisBottom, along with rotated and positioned text labels for the axes.

Apr 4, 2024
Loading thumbnail…

activity6question3

This scatter plot displays the relationship between sepal length and petal length for the Iris dataset, with each point shaped according to the flower species. The visualization uses D3 v7 to map the data, drawing points as distinct symbols, and includes a categorical shape legend to identify the species. The plot is generated by fetching the data from a remote CSV file, parsing it with `csvParse`, and using `scaleLinear` for the axes and `scaleOrdinal` with `symbolsFill` for the point shapes.

Apr 4, 2024
Loading thumbnail…

Activity6question3

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for three species of iris flowers. The D3.js v7 implementation uses d3.scaleLinear to map the quantitative axes and d3.scaleOrdinal with symbolsFill to encode species through distinct point shapes. A custom shape legend component displays the species categories, while the chart pulls data from a remote CSV file using d3.csvParse and renders the plot with SVG paths generated by d3.symbol.

Apr 3, 2024
Loading thumbnail…

Activity6question2

This stacked horizontal bar chart shows the percentage distribution of IMDb ratings across six movie genres, with each bar divided into five rating brackets from "below 5.0" to "above 8.5." The visualization uses D3.js v7 with SVG rendering, employing `d3.stack()` to layer the rating categories, `d3.scaleBand()` for the genre axis, and `d3.scaleLinear()` for the percentage scale. Interactive tooltips display exact percentages on mouseover, with data sourced from a CSV file.

Apr 3, 2024
Loading thumbnail…

Activity6Question1(2)

This chart displays the top 20 countries by their 2010 population as a horizontal bar chart, built with React and rendered as SVG. It uses d3’s `scaleBand` for the y-axis (country names) and `scaleLinear` for the x-axis (population), with the data loaded via `d3.csv` from a GitHub-hosted CSV file. The bars are colored green, and hovering over a bar reveals its exact population via an SVG `<title>` tooltip, with tick labels formatted using d3’s `format('.2s')` to abbreviate large numbers (e.g., "1.5B").

Apr 3, 2024
Loading thumbnail…

activity6question-1

This example shows a horizontal bar chart comparing the populations of ten countries from the year 2000, with a green bar representing each country’s population in millions. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` defining the y- and x-axes, respectively. Data is loaded from a remote CSV file using D3’s `csv` method, and axis labels are formatted using D3’s `format` function to abbreviate values (e.g., converting billions to "B"). Tooltips provide exact population values on hover via the SVG `title` element.

Apr 3, 2024
Loading thumbnail…

Task-4activity-6

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. The chart uses d3.scaleLinear for both axes and bubble radius, with a d3.scaleOrdinal mapping car makes to colors from d3.interpolateTurbo. Interactive tooltips appear on mouseover, showing the car make. The legend indicates highway MPG values and color-coded car makes. Data is loaded from a CSV file and rendered as SVG circles with animation.

Apr 3, 2024
Loading thumbnail…

activity-6task-3.2

This scatter plot shows the relationship between sepal length and petal length for Iris flowers, with species distinguished by shape. It uses D3 v7 to map data from an Iris CSV file, employed via `d3.csvParse`, to a chart with axes and a shape legend. The visualization uses a scale-invariant symbol approach with `d3.symbolsFill` and `d3.symbol` for markers, and encodes the categorical variable using an ordinal scale.

Apr 3, 2024
Loading thumbnail…

Task-3activity-6

This example displays a static text message, “Hello VizHub!”, centered on a webpage. It demonstrates fundamental setup for a D3.js project, loading the library via UNPKG and utilizing `import` statements to access D3 functions like `select` and a local ES6 module for the message content. The visualization relies on D3’s `select` API to target the HTML element and set its text, with styling provided by an external CSS file.

Apr 3, 2024
Loading thumbnail…

Task-3activity-6

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, virginica). Although the code attempts to set circular radius and rectangle attributes, only circle elements with a fixed radius are rendered. It loads CSV data via d3.csv, uses d3.scaleLinear and d3.extent for scales, and renders axes with d3.axisLeft and d3.axisBottom, with SVG circles colored via a switch-based marker function.

Apr 3, 2024
Loading thumbnail…

task-2Activity-6

This stacked bar chart displays the distribution of IMDb movie ratings across six genres, showing the percentage of films falling into five rating brackets from “below 5.0” to “above 8.5.” The visualization uses d3.stack() to compute stacked series, d3.scaleBand() for the genre categories on the y-axis, and d3.scaleLinear() for the percentage values on the x-axis. Hovering over a segment reveals a tooltip with the precise percentage for that genre and rating range, using event listeners and d3.format() for numeric output. Data is loaded from a CSV file and rendered as SVG rectangles.

Apr 3, 2024
Loading thumbnail…

Tutorial-1Activity-6

This horizontal bar chart displays the 2020 population for 30 countries, using green bars to represent each nation's total. The data is loaded from a GitHub-hosted CSV file, which is processed with the `d3.csv` function and formatted with `d3.format` to convert large numbers into readable abbreviations like "1.2B". Built with React and rendered as SVG, the visualization employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis, with blue tick lines and custom axis labels styled via CSS.

Apr 3, 2024
Loading thumbnail…

Tutorial-1Activity-6

This example demonstrates how to load D3 from a CDN, use ES6 module imports for both external libraries and local files, and dynamically update the DOM with D3 selections. The code imports the `select` function from D3 and a custom `message` constant from a local module, then sets the text of a centered HTML element. It also defines a number and a regular expression as part of the script. The visualization renders a simple text message using D3’s selection API, with styling controlled by an external CSS file.

Apr 3, 2024
Loading thumbnail…

Task 5 - queswtion 3

This example displays a large, static SVG rendering of an ornate, flower-like silhouette against a photographic floral background. The visualization, built with React and ReactDOM, is composed of a single complex SVG path that defines the intricate central shape. The code includes commented-out sections for generating random polygons, but the visible output relies on the hardcoded path data and CSS styling for presentation. The image uses a black background with embedded floral imagery, and the SVG is scaled and positioned using a group transform within a fixed 960 by 1000 viewport.

Apr 2, 2024
Loading thumbnail…

buddhas question 3

The visualization renders a dense, colorful field of randomly generated polygons that overlap one another. It then overlays a detailed, single-line SVG path drawing of the Buddha’s face and shoulders, scaled and translated to sit within the composition. Built with React and ReactDOM, the piece uses nested `map` calls to place hundreds of semi-transparent, rotated polygons, while the face is defined by a long path data string. SVG elements are generated declaratively through React’s JSX syntax.

Mar 31, 2024
Loading thumbnail…

5 bhuddha

A meditative arrangement of five concentric circular point clouds converges on a central Buddha silhouette drawn as an SVG path. Hundreds of small circles, each with random positioning and semi-transparent RGB fills, form layered, overlapping halos around the figure. Built with React and rendered to SVG, the visualization uses nested `Array.map` iterations to generate the scatter pattern and inline `Math.random()` calls to control each circle’s coordinates, color, and opacity against a black background.

Mar 31, 2024