Y

Yeruva Snehith Reddy

@snehith018·22 public vizzes

Loading thumbnail…

project

This example presents a dashboard of four D3.js charts—a line chart, bar chart, pie chart, and scatter plot—visualizing global sustainable energy data from a CSV file. It shows trends in renewable energy share, electricity access, fossil versus renewable energy proportions, and the relationship between GDP and energy consumption per capita, with a tooltip and country selector. The visualization uses D3 selections, scales, and time parsing to render SVG charts, updating all views based on the selected country.

Loading thumbnail…

Activity7_Q1

This pie chart shows the percentage distribution of the most-used social media platforms, with each slice labeled by its percentage value and a color-coded legend listing platform names. The visualization is built with D3 v5, using d3.pie and d3.arc to generate the segments, d3.scaleOrdinal to assign categorical colors, and d3.format to display numeric labels. Data is loaded asynchronously from a CSV file via d3.csv, and the SVG rendering positions the chart and legend within a fixed 960x500 viewport.

Loading thumbnail…

Activity7_Q2

This area chart displays a company’s monthly revenue over time, using a red filled path to emphasize the trend. It loads data from a remote CSV file via `d3.csv`, parses the Revenue column as numbers, and renders an SVG with `d3.area`. The chart uses `d3.scaleBand` for the categorical month axis and `d3.scaleLinear` for the revenue scale, with `d3.axisBottom` and `d3.axisLeft` providing labeled axes for Month and Revenue.

Loading thumbnail…

experiment

This example shows a pie chart of flower species counts from a CSV dataset, with hover tooltips displaying each species’ label and value. The visualization is built using D3.js, leveraging the `pie` and `arc` generators to compute and draw the slices, and `schemeCategory10` for coloring. The SVG renders at full window size, and a legend notes each species by color, while the data is loaded asynchronously via `d3.csv`.

Loading thumbnail…

Acitivity6 Q9

This bubble chart displays the correlation between grams sold, cost per gram, and total cost for various lentil types. The x-axis represents grams sold, the y-axis shows cost per gram, and the size of each circle encodes the total cost, while color distinguishes each lentil variety. Hovering over a bubble reveals a tooltip with the item’s name. The chart uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, d3.interpolateTurbo for color mapping, and SVG rendering with mouse event handlers for interactions.

Loading thumbnail…

Activity6_Q

This example demonstrates a minimal D3.js visualization that renders a text message centered on the page using HTML and CSS. It loads D3 v5 from a CDN and uses the `select` API from the `d3` module to set the text content of a DOM element. The code also imports a local ES6 module that exports the message string, showcasing modular JavaScript organization within a VizHub project. The visualization is static, with no data binding or interactive elements.

Loading thumbnail…

Activity6_Q

This example demonstrates a minimal D3.js visualization that renders a text message centered on the page using HTML and CSS. It loads D3 v5 from a CDN and uses the `select` API from the `d3` module to set the text content of a DOM element. The code also imports a local ES6 module that exports the message string, showcasing modular JavaScript organization within a VizHub project. The visualization is static, with no data binding or interactive elements.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across car makes, with each bubble’s position on the x-axis representing horsepower, the y-axis representing torque, and the bubble size encoding highway MPG. Color distinguishes different manufacturers. The chart uses D3 v7’s scaleLinear for axes, scaleOrdinal for color assignment, and scaleLinear for bubble size. Interactions include tooltips on hover, implemented via D3’s select and style methods. Data is loaded from a CSV file using d3.csv.

Loading thumbnail…

Activity6_q3.2

A scatter plot displays model measurements against feature measurements for motorcycle brands Yamaha, BMW, and others, with colors distinguishing brands. The code loads CSV data via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to map values to screen coordinates. Circles are rendered as SVG elements with fixed radius, colored by brand through a switch statement. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, with labels added as SVG text.

Loading thumbnail…

Activity6_Task3

This example renders a scatter plot of the Iris dataset, showing petal length against petal width with color-coded markers for each species (setosa, versicolor, and virginica). It loads CSV data via `d3.csv` and uses `d3.scaleLinear`, `d3.extent`, and axis generators `d3.axisLeft` and `d3.axisBottom` to build the SVG visualization. Circle positions are mapped from the numeric fields, with radial dimensions also set from sepal measurements, though the plot only displays fixed-radius points. The code demonstrates dynamic data parsing and SVG rendering directly in the browser.

Loading thumbnail…

Activity6_task3.2

This example displays a scatter plot of iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis. Each species is distinguished by a different symbol shape, with a legend identifying the species categories. The visualization is built using D3 v7, employing `scaleLinear` for positioning, `scaleOrdinal` for shape encoding, and `symbolGenerator` to render distinct markers. Data is loaded asynchronously from a remote CSV file and parsed using `csvParse`.

Loading thumbnail…

activity 6 q3

This visualization shows the distribution of movie ratings across different car companies, with each company displayed as a horizontal stacked bar chart. The chart uses percentage values to represent the proportion of ratings in five categories, from below 5.0 to above 8.5. Built with D3 v7, it employs `d3.stack()` for the stacked bar construction, `d3.scaleOrdinal()` for color mapping, and `d3.scaleLinear()` for the x-axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment. Data is loaded from a CSV file containing company names and their corresponding rating distributions.

Loading thumbnail…

Activity6_Task2

This visualization presents a stacked horizontal bar chart of IMDb movie ratings across six genres, with each bar segment representing the proportion of titles within rating brackets from below 5.0 to above 8.5. The chart uses D3 v7 with SVG rendering, employing `d3.stack()` for the stacked layout, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. Interactive tooltips display the exact percentage for each segment on hover, using `d3.select` and event handlers. Data comes from the included CSV file.

Loading thumbnail…

act 6_q1 2

This example displays a horizontal bar chart comparing the 2010 populations of twenty countries, ordered by country name. Population values are formatted using `d3.format` with a custom tick formatter that converts units from Giga to Billion. The chart uses D3 v5 scales (`scaleBand`, `scaleLinear`) and is rendered with React and SVG, loading data from a CSV file. The visualization includes blue axis lines and green bars, with a title labeling the x-axis as "POPULATION-2010".

Loading thumbnail…

activity6_q1

This bar chart displays the population of ten countries in the year 2000, with country names on the y-axis and population on the x-axis. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for scales, and `max` to determine the domain. Data is loaded asynchronously from a CSV file via D3’s `csv` function and formatted with `format` using SI notation (e.g., “B” for billions). Axes are custom components (`AxisBottom`, `AxisLeft`) and rectangles include a native SVG `<title>` tooltip.

Loading thumbnail…

activity 6_Task 1

This bar chart displays the 2020 population of 30 countries, ranked vertically with horizontal bars extending to represent population size. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric population axis, with a zero baseline. The data is loaded from a CSV file and formatted using `d3.format` to abbreviate large numbers. SVG rectangles render the bars, with tooltips showing exact population values on hover.

Loading thumbnail…

Activity 6

This example demonstrates how to set up a minimal D3.js visualization using ES6 module imports. It displays the text “Hello VizHub!” centered on the page, showing the basic integration of D3 with local JavaScript modules. The code uses `select` from d3 to manipulate the DOM, imports a message string from a separate `myMessage.js` module, and relies on D3 v5 loaded via UNPKG. The styling is handled with plain CSS, making it a straightforward illustration of modular D3 project structure.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub supports modular ES6 development with D3.js. It loads D3 via UNPKG and uses the `select` function from `d3` to set the text content of a div, while pulling a message string from a separate local module. The page renders a single centered “Hello VizHub!” message in large type, showing how to combine CDN-hosted libraries, local CSS, and ES6 module imports in a minimal setup.

Loading thumbnail…

Fork of Fork of 5 buddhas

Five overlapping Buddha silhouettes in translucent colors float over a floral background image. The SVG paths are rendered at varying random positions and scales, with each shape repeated thirty times using nested React `.map()` calls. Solid JavaScript generates random fill values and opacity, while React 16.10 and ReactDOM render the composition inside a 1000-pixel square viewport. The static, generative layout emphasizes layered forms rather than interactivity.

Loading thumbnail…

Fork of 5 buddhas

A generative SVG artwork fills a black canvas with thousands of randomly positioned, semi-transparent polygons, each rotated and colored via `Math.random()` calls within nested React `map` functions. A large, detailed Buddha silhouette path is overlaid and scaled, with its intricate linework defined by hardcoded coordinate data. The composition layers abstract geometric noise behind the recognizable religious figure, emphasizing contrast between chaos and structure.

Loading thumbnail…

5 buddhas

A layered mandala of five overlapping Buddha figures rendered atop a field of randomly generated, rotated polygons. The SVG visualization uses React to map over a 21-element array, producing nested polygon elements with stochastic positions, colors, and rotations, while a large path draws the central Buddha form. The piece combines procedural geometric noise with a fixed sacred iconographic shape, all set against a black background.

Loading thumbnail…

5 buddhas

Five overlapping Buddha silhouettes form a radial composition on a black background. Three nested `A.map()` loops generate a dense cluster of semi-transparent, randomly colored and rotated polygons as a decorative backdrop. Two explicit SVG `<path>` elements render Buddha figures, one in white and one in red, each scaled and translated via `transform` attributes. The visualization uses React for rendering and relies on SVG properties like `fill`, `opacity`, and `stroke-width`.