susarlasruthi2000@gmail.com

Fork of Hello VizHub

This area chart visualizes total wages by country using a stacked layout. The code loads CSV data from a GitHub gist with `d3.csv`, processes it with `d3.stack`, and renders layered areas using `d3.area`. It applies `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and colors each series with `d3.schemeCategory10`. SVG output is generated in a React-compatible HTML page, with axes added via `d3.axisBottom` and `d3.axisLeft`.

Apr 11, 2024

Fork of Hello Vizhub

This stacked bar chart shows the percentage distribution of IMDb movie ratings across five cuisine categories, with rating levels from below 5.0 to above 8.5. Hovering over a bar segment displays its exact percentage via a custom tooltip. The visualization uses d3.stack() to generate stacked series, d3.scaleBand for category positions, and d3.scaleLinear for percentage values, rendered as SVG rects with color-coded segments and axes labeled in plain English. Data comes from a CSV file with proportions summing to 1 for each category.

Fork of Activity-6 Question-2

This example presents a horizontal stacked bar chart showing the percentage distribution of vegetable ratings across six categories, from "below 4.0" to "above 8.0." The chart uses D3 v7’s `d3.stack()` and `d3.scaleBand()` to construct the layered bars, with `d3.scaleOrdinal()` assigning colors. Mouseover events trigger a custom tooltip displaying the exact percentage for each segment. Data loads from a local CSV file, and the visualization renders as SVG with axes labeled by vegetable type and percentage.

Fork of Activity-6 Question-2

This example visualizes restaurant cuisine ratings across different percentage brackets using a stacked horizontal bar chart. It shows the distribution of ratings from below 4.0 to above 8.0 for six cuisines, with each bar segment colored by rating category. The visualization uses d3.stack to create the stacked data, d3.scaleBand for the y-axis cuisine categories, and d3.scaleLinear for percentage values. Interactive tooltips display specific rating percentages on hover, while axes are rendered using d3.axisBottom and d3.axisLeft with custom tick styling.

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This example shows a dense, overlapping composition of Buddha-like path shapes rendered with React and SVG. The piece generates hundreds of semi-transparent circles with randomized color and position values, then layers a detailed vector path of a Buddha figure on top, repeated through multiple nested map calls. The SVG path data is embedded directly, while random number generation controls the visual chaos. React’s declarative syntax and the SVG `circle` and `path` elements drive the rendering, producing a flickering, kaleidoscopic effect.

Bubble Chart

This bubble chart displays average horsepower, torque, and highway MPG for various car brands, with each bubble’s position on the x- and y-axes representing horsepower and torque, and its size encoding highway MPG. The color of each bubble corresponds to the car make, and hovering reveals a tooltip with the brand name. Built with d3.v7 and SVG, it includes axes, a size legend, and a color legend, reading data from a CSV file.

Fork of Hello VizHub

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car brands. Each circle's position encodes horsepower and torque, while its radius and color represent highway MPG, with a legend for scale. The visualization uses D3.js v7, reading data from a CSV file. It implements interactive tooltips on mouseover and employs D3's scaleLinear, scaleOrdinal, and interpolateTurbo for encoding, rendering via SVG.

Fork of Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for different car makes. Each circle’s position encodes horsepower and torque, its size maps to highway MPG, and its color distinguishes the manufacturer. The D3.js code reads a CSV, uses linear scales for axes and bubble radius, employs `d3.interpolateTurbo` for a color gradient, and includes an interactive tooltip that updates its position on mouse movement with a transition effect.

Fork of Hello VizHub

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for 31 car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble size, and d3.scaleOrdinal with interpolateTurbo for color mapping. Interactive tooltips appear on mouseover. A legend explains the MPG size scale, and a second legend lists makes with their colors.

D3 Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, plotting body mass against culmen length with points shaped by species—squares for Adelie, triangles for Chinstrap, and circles for Gentoo. Built with D3 v6, the chart uses `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and renders SVG paths via the reusable `scatterPlot` module. Every two seconds, the x-axis cycles through four numeric columns, animating the plot to show different variable relationships. Data is loaded as CSV from a GitHub repository.

Fork of Hello VizHub

This animated scatter plot visualizes the Palmer Penguins dataset, showing relationships between physical measurements like body mass and culmen length. Three penguin species (Adelie, Chinstrap, and Gentoo) are represented by distinct shapes, and the plot cycles through different X-axis attributes every two seconds. The visualization employs D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with data loaded via `d3.csv`. The SVG rendering uses custom shape paths for each species, enabling quick comparison of morphological traits across the dataset.

Fork of Hello VizHub

This example displays a scatter plot of penguin measurements, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap). It uses D3 v5 and renders to SVG within a React environment. The code loads data from a CSV file hosted on GitHub, parses numeric fields, and applies d3.scaleLinear for positioning. Axes are generated with d3.axisLeft and d3.axisBottom, while circles are joined to the data using the join method.

Fork of Hello VizHub

This scatter plot visualizes unicorn companies by their valuation (x-axis) and date joined (y-axis), with each circle representing a company. It loads CSV data from a GitHub repository and uses D3 v6 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The SVG rendering maps valuation as a numeric variable and date as a date object, with points plotted using circle elements. The chart includes labeled axes for both dimensions and is implemented entirely through D3’s low-level linking approach.

Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis, petal length on the y-axis, and encoding species using different marker shapes. The visualization includes axes with labels and a shape legend to identify species categories. Built with D3 v7, the code uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to generate the plot. The implementation relies on a custom `axes.js` module for axis rendering and a `shapeLegend.js` module for the legend, with data loaded asynchronously from a CSV file.

Fork of Hello VizHub

This example shows a scatter plot of iris flower measurements, using sepal length and petal length as axes and distinct symbol shapes to encode the three species categories. The visualization includes a shape legend labeled “Species” to identify the species associated with each symbol. The code uses D3 v7 APIs such as `d3.csvParse`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.symbolsFill` to render the marks, while an axes module builds the chart scaffolding with `d3.axisLeft` and `d3.axisBottom`. Data is fetched from a GitHub-hosted CSV of the classic Iris dataset.

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica). The visualization uses D3 v6 via UNPKG, loading data with `d3.csv`, scaling with `d3.scaleLinear`, and rendering axes with `d3.axisLeft` and `d3.axisBottom`. Circles are appended to an SVG, with fill colors assigned per species and petal dimensions determining x- and y-positions. The chart includes labeled axes and a fixed radius for all points, sourced from a remote CSV hosted on GitHub.

Fork of Hello VizHub

This stacked bar chart shows the percentage distribution of movie ratings across different genres, with each bar segment representing a rating category from "below 5.0" to "above 8.5." Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses D3 v7 with `d3.stack()` to create the stacked layout, `d3.scaleBand()` for genre positioning, and `d3.scaleLinear()` for percentage values. Data comes from a CSV file loaded dynamically, rendered as SVG with custom styling and interactive mouse events.

Fork of Fork of Hello VizHub

This is a horizontal bar chart of population data for 20 countries in 2010. It shows population values as bars with a teal fill, with a bottom axis for population and a left axis for country names. The chart is built using D3 scales and formats, and React code, and renders as an SVG. The data is loaded from a remote CSV file, and each bar includes a tooltip displaying the population in billions.

Fork of Hello VizHub

This bar chart displays the population of ten countries in the year 2000, using horizontal bars with a linear scale for population and a band scale for country names. It is built with React and D3 v5, loading CSV data from a GitHub repository via the `csv` function. The visualization includes custom axis components for ticks and labels, with tooltips showing formatted population values, and uses SVG rendering with a teal fill for the marks.

Actvity6_question1

This bar chart displays the population of ten countries in the year 2000. The visualization uses React with D3 v5, employing `scaleBand` for the categorical country axis and `scaleLinear` for the population values. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. The data is loaded asynchronously from a CSV file using D3's `csv` parser, with population values multiplied by 1000 and formatted using D3's `format` function.

Fork of Hello VizHub

A stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, using horizontal bars segmented by five rating categories from below 5.0 to above 8.5. The chart shows that genres like Documentary skew toward higher ratings, while Action has more low ratings. Hovering over a bar segment displays the exact percentage for that rating level. The visualization uses D3 v7 with `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleLinear`, rendering SVG elements with a custom tooltip for interaction.

Fork of Hello VizHub

This example demonstrates how VizHub projects can load D3 via UNPKG and use ES6 modules to structure code. It renders the text “Hello VizHub!” in a centered, large-font message using D3’s `select` API to target the `#message` div. The project also imports a custom local module `myMessage.js` to supply the string, and includes a CSS file for styling. The visualization serves as a minimal template for combining D3, local modules, and static assets in a single-page app.

Fork of Activity6-Task2

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, breaking each genre into five rating bins from below 5.0 to above 8.5. Each bar represents 100% of a genre, with colored segments showing the proportion of movies in each rating category. Hovering over a segment reveals the exact percentage for that rating level within that genre. The visualization uses d3.stack and d3.scaleOrdinal to build the stacked layout, d3.axisBottom for the percentage axis, and a custom tooltip with mouseover events to display the precise values. Data comes from a CSV file with pre-aggregated genre-rating proportions.

Activity6-Task2

A stacked bar chart visualizes the percentage distribution of IMDb ratings across six movie genres, from documentary to action. Each bar segment represents a rating bracket, colored distinctly, with hover tooltips revealing exact percentages. Built with D3 v7, the visualization uses `d3.stack()` to compute layered data and `d3.scaleOrdinal` for color mapping, rendering bars in SVG with interactive mouse events for tooltip display.

Activity 6

This example demonstrates a minimal D3.js setup that dynamically updates the text content of an HTML element. It loads D3 v5 from a CDN and uses the `select` API to set the message "Hello VizHub!" inside a styled div, with modular code imported from a local ES6 module. The visualization also includes a regular expression and variable declaration, though these do not affect the output. The page styling is defined in a separate CSS file with large centered text.

Fork of Hello VizHub

This example demonstrates how VizHub projects can load D3 via UNPKG and use ES6 modules to structure code. It renders the text “Hello VizHub!” in a centered, large-font message using D3’s `select` API to target the `#message` div. The project also imports a custom local module `myMessage.js` to supply the string, and includes a CSS file for styling. The visualization serves as a minimal template for combining D3, local modules, and static assets in a single-page app.

Fork of Activity 7

This bar chart displays population estimates for 30 countries in 2020, organized alphabetically along the vertical axis with horizontal bar lengths encoding population values. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `rect` elements for the bars. The data comes from a remote CSV file loaded via `d3.csv`, axis ticks are generated with custom React components, and numbers are formatted using `d3.format`.

Fork of Hello VizHub

A horizontal bar chart displays the top 30 countries by 2020 population, using a bright green fill and blue axis ticks. The React application loads CSV data from a GitHub repository and renders SVG graphics with D3 v5, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and custom components for axes and rectangular marks. Tooltips on each bar show the formatted population value via an SVG `<title>` element.

Fork of Hello VizHub

This example demonstrates how VizHub projects can load D3 via UNPKG and use ES6 modules to structure code. It renders the text “Hello VizHub!” in a centered, large-font message using D3’s `select` API to target the `#message` div. The project also imports a custom local module `myMessage.js` to supply the string, and includes a CSS file for styling. The visualization serves as a minimal template for combining D3, local modules, and static assets in a single-page app.

overlapping Buddha

An overlapping Buddha visualization renders multiple scaled and translated copies of the same Buddha path on an SVG canvas. Each copy uses the identical path data but applies different `transform` attributes (via `translate` and `scale`) to create layered, offset compositions. The React app, built with `ReactDOM`, renders SVG `<path>` elements with specified `stroke`, `fill`, and `opacity` properties. A background image of flowers is set via CSS on the body, while the path data originates from a static, embedded SVG shape.

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization displays a layered, colorful Buddha formed by overlapping diamond shapes, arranged in a dense, generative pattern over a green background. The artwork is rendered in React using SVG polygons, with the `react` and `react-dom` libraries. The code maps over arrays ([1..20]) to generate multiple rotated, semi-transparent polygons with random positions, colors, and opacity, creating a chaotic, vibrant composition. A separate, detailed SVG path draws the Buddha silhouette, overlaid with the polygon cloud. The rendering technique relies on React's declarative SVG generation within a `<svg>` element.

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization displays a layered, colorful Buddha formed by overlapping diamond shapes, arranged in a dense, generative pattern over a green background. The artwork is rendered in React using SVG polygons, with the `react` and `react-dom` libraries. The code maps over arrays ([1..20]) to generate multiple rotated, semi-transparent polygons with random positions, colors, and opacity, creating a chaotic, vibrant composition. A separate, detailed SVG path draws the Buddha silhouette, overlaid with the polygon cloud. The rendering technique relies on React's declarative SVG generation within a `<svg>` element.

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A colorful, abstract composition of overlapping Buddha-like shapes rendered as chaotic polygon clusters. The visualization generates a dense grid of small, semi-transparent polygons with random positions, colors, and rotations, layered over a large, detailed SVG path of a Buddha figure. Built with React and SVG, the code uses nested `Array.map` loops and `Math.random()` to produce the scattered geometric forms, set against a black background with the Buddha path scaled and translated into the scene.