shraehithareddy@gmail.com

@ShraehithaReddy·28 public vizzes

Fork of Area Chart

This fork of an area chart visualizes the relationship between petal width and sepal length for the Iris dataset, encoding petal width on the x-axis and sepal length on the y-axis. The chart uses a light blue filled area beneath the curve to represent the data, with labeled axes, and is implemented using D3's `scaleLinear`, `area`, `axisBottom`, and `axisLeft` APIs. The SVG rendering is driven by the `createAreaChart` function, which fetches CSV data and pipes it through the D3 pipeline to produce the final visualization.

Apr 29, 2024

Loading thumbnail…

Fork of Pie chart

This example demonstrates a pie chart built with d3.pie and d3.arc, visualizing the distribution of iris species from a CSV file. Each slice represents a single observation, with colors assigned via d3.scaleOrdinal and d3.schemeCategory10. The chart uses d3.select and d3.csv to load data and render SVG paths, with a legend added programmatically.

Apr 29, 2024

Loading thumbnail…

Fork of Reusable Scatter plot

This interactive scatter plot displays the Iris dataset, cycling through different feature combinations on the x-axis (petal width, sepal width, petal length, and sepal length) while keeping petal width on the y-axis. It uses D3.js (v6) with a reusable `scatterPlot` module that leverages `scaleLinear`, `extent`, and axis functions. Points are color-coded by species via a custom marker function, and the visualization updates at intervals, featuring custom axis labels, a legend, and a title. Data is loaded from a remote CSV file, with SVG rendering and animation.

Apr 29, 2024

Loading thumbnail…

Task 9&10-Q1

A pie chart visualizes three categories with values 30, 50, and 20, using a color-coded legend. Built with D3 v7, the example loads D3 via UNPKG and imports `pie`, `arc`, and `scaleOrdinal` from local ES6 modules. The SVG chart centers arcs with a translated group element, while a separate group renders the legend. Data is hardcoded in `index.js`, and the chart updates through D3’s data join pattern.

Apr 29, 2024

Loading thumbnail…

Task 9&10-Q1

This example demonstrates a reusable scatter plot built with D3.js v6, rendering data points as SVG circles with linear scales for the x and y axes. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map values and draw axes. The code also includes a separate pie chart implementation using `d3.pie` and `d3.arc` with an ordinal color scale and SVG legend, though the scatter plot is the primary focus.

Apr 29, 2024

Loading thumbnail…

Fork of Reusable Scatter plot Task9,10

This interactive scatter plot visualizes the Iris dataset, displaying petal and sepal measurements as colored circles representing different species. Using D3.js version 6, the visualization cycles through four different column combinations on the x-axis every few seconds via `setInterval`, while y-axis values remain fixed. The reusable `scatterPlot` module handles axis generation with `scaleLinear`, `axisLeft`, and `axisBottom`, while the main script adds circles, a color legend, and axis labels directly to the SVG. Styled with custom CSS and Google Fonts, the animation updates smoothly without transitions.

Apr 29, 2024

Loading thumbnail…

Task 9,10

This example demonstrates how to load D3 via UNPKG and use ES6 module imports from both the D3 library and local files. It displays a Hello VizHub message in a div using D3’s select function, which updates the text content of the element. The code imports `select` from D3 and a `message` constant from local module `myMessage.js`, while rendering the styled text centered with CSS. The D3 version is v5, loaded from a CDN.

Apr 29, 2024

Loading thumbnail…

Task8_Question4

This scatter plot visualizes the relationship between fixed acidity and volatile acidity in wine samples, with each point colored by quality rating (bad, average, or good). The visualization uses d3.csv to load wine quality data and d3.scaleOrdinal to map quality categories to red, yellow, and green colors. D3 scales and axes position the data points, while hover interactions trigger tooltips that display the wine's quality classification. The SVG rendering includes labeled axes, a title, and interactive circles with mouse event handlers for enhanced data exploration.

Apr 15, 2024

Loading thumbnail…

Task8_Q4

This example demonstrates the foundational "Hello World" template for VizHub V3's runtime environment, rendering a single line of text with a large, adjustable font size. The code exports a `main` function that receives a `container` DIV element and sets its inner HTML directly, using inline styles for the font-size property. It relies on VizHub V3's interactive widget system, where holding the Alt key and dragging a numeric value in the editor provides continuous hot reloading for real-time visual updates. The visualization is entirely DOM-based, with no external data sources or charting libraries involved.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s x-position maps to horsepower, y-position to torque, and its radius encodes highway MPG, while color distinguishes the brand. The chart includes a legend for bubble size and a tooltip that appears on mouseover, implemented with d3.v7 and SVG. Data is loaded from a CSV file, and scales such as d3.scaleLinear and d3.scaleOrdinal handle the visual mapping.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial4

The bubble chart correlates average horsepower, torque, and highway MPG across car makes. Each bubble's x-position represents horsepower, y-position torque, and size encodes MPG, with color distinguishing brands. Built with d3.v7, it uses linear scales for axes and bubble area, an ordinal scale for color, and SVG circles for rendering. Interactive tooltips display the car make on hover, while the legend shows the MPG size mapping. Data is loaded from a CSV file.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial4

This example demonstrates a minimal "Hello World" text rendering in the VizHub V3 Runtime Environment, showcasing the platform's live-editing and hot-reloading capabilities. The code uses a plain HTML `div` element with inline CSS styling, where the `fontSize` variable is set to 221 pixels. The main function directly injects the styled string into the container using `innerHTML`, with no external libraries or data sources involved. The approach highlights the simplicity of starting a visualization project within this interactive development environment.

Apr 15, 2024

Loading thumbnail…

Task8_Q3.2

This example shows a scatter plot of engine power versus engine torque for automotive performance metrics, with each data point shaped according to the vehicle’s Make. A shape legend identifies the mapping between symbol types and car brands. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal with d3.symbolsFill for the shapes, and d3.axisBottom and d3.axisLeft for the labeled axes. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse.

Apr 15, 2024

Loading thumbnail…

Task8_Q3

A scatter plot displays automotive performance metrics, mapping engine power on the x-axis against engine torque on the y-axis. The circle radius encodes highway fuel efficiency, providing a third variable. The visualization loads CSV data from a GitHub repository and uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG with labeled axes.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial3.2

This scatter plot displays the relationship between sepal length and petal length for the Iris dataset, with points colored and shaped by species. It uses D3 v7’s `scaleLinear` and `scaleOrdinal` for axes and shape encoding, while `symbol` and `symbolsFill` generate distinct point markers. Data is loaded from a remote CSV via `csvParse`.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes, with each point colored by species (setosa, versicolor, virginica). The plot uses D3 v6.7.0’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the chart, which is rendered as an SVG. Data is loaded from a remote CSV using D3’s `csv` helper, and circles are positioned with attributes for `cx`, `cy`, and fill color, though the code also encodes non-visual sepal measurements in unused `rx` and `ry` properties.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial3

This example demonstrates the foundational “Hello World” pattern for the VizHub V3 Runtime Environment, showing how to render simple text-based content into a container. The code uses vanilla JavaScript and the DOM API to set the `innerHTML` of the container, with a static `fontSize` variable of 221 pixels applied via an inline style. It highlights the environment’s hot-reloading capability, where interactive widgets appear during development, and serves as a minimal starting point for building more complex visualization projects.

Apr 15, 2024

Loading thumbnail…

Task8_Q2

This stacked bar chart shows the percentage distribution of movie ratings across six genre categories, with each genre’s bar divided into five rating-level segments from “Below 5.0” to “Above 8.5”. The visualization uses d3.stack, d3.scaleLinear, and d3.scaleBand to aggregate and position the segments, and d3.schemeCategory10 for color encoding. Hovering over a segment reveals a tooltip with the exact percentage for that genre and rating level. The data is loaded from a movie.csv file and rendered as SVG.

Apr 15, 2024

Loading thumbnail…

Task8_Q2

This example demonstrates the minimal starting point for a VizHub visualization, displaying the text “Hello World!” in a large, centered font. The code uses a simple JavaScript export with a `main` function that takes a container element and sets its inner HTML. The font size is defined as a constant, and the text is styled inline with CSS properties for size and alignment. This serves as a basic template for the VizHub V3 Runtime Environment, which supports interactive widgets and continuous hot reloading.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial2

A stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating brackets from "below 5.0" to "above 8.5" expressed as proportions summing to 100%. Hovering over a segment displays a tooltip with the exact percentage for that rating level within the genre. The visualization uses D3 v7's `d3.stack()` to generate the stacked layout, `d3.scaleOrdinal()` for color encoding, and `d3.axisBottom` for the percentage axis, rendering as SVG with data loaded from a CSV file.

Apr 15, 2024

Loading thumbnail…

Task8_Tutorial2

This stacked bar chart shows the percentage distribution of IMDb rating levels (below 5.0 to above 8.5) across six movie genres. Each genre’s horizontal bar is segmented by rating category, using a color scale, with tooltips revealing exact percentages on hover. The visualization is rendered in SVG using d3.v7, with data loaded from a CSV file and axes formatted via d3.axisBottom and d3.axisLeft.

Apr 15, 2024

Loading thumbnail…

Fork of Task8_Q1.2

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by name along the y-axis with population magnitudes extending along the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis and `scaleLinear` for the numeric domain, rendering SVG rectangles via the `Marks` component. The data loads from an external CSV using D3’s `csv` method, and axis ticks are formatted with `format('.2s')` to abbreviate large numbers, with tooltips showing exact values.

Apr 15, 2024

Loading thumbnail…

Fork of Task8-Q1.2

This example visualizes a bar chart of population data for the top 20 countries, using data from a GitHub-hosted CSV. The bars are rendered as SVG rectangles, with green fills and blue tick lines on the axes. It is built with React and D3 v5, using the `d3.csv` parser for data loading and custom components (`AxisBottom`, `AxisLeft`, `Marks`) for rendering. The chart includes a tooltip on each bar that shows the population value in thousands.

Apr 15, 2024

Loading thumbnail…

Fork of Task8_Q1.1

This horizontal bar chart displays the top 10 countries by population in the year 2000, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`. The SVG renders axes through custom `AxisBottom` and `AxisLeft` components, while `Marks` draws green rectangles with tooltips formatted using `d3.format`. Data comes from a GitHub-hosted CSV, with axis labels styled via CSS classes.

Apr 15, 2024

Loading thumbnail…

Task8_Q1

This example shows a bar chart of 2020 population estimates for 30 countries, using horizontal bars sorted by country name on the y-axis and population magnitude on the x-axis. The visualization is built in React with D3 v5’s `scaleBand` and `scaleLinear` for positioning, while SVG `<rect>` elements render the bars. Data loads from a remote CSV via `d3.csv`, with population values converted from thousands. Axis components generate tick marks and labels, and tooltips appear on hover via SVG `<title>` elements.

Apr 14, 2024

Loading thumbnail…

Fork of Task8-task1

This bar chart displays the population of countries in 2020, ranked by country name. The visualization renders horizontal bars using React and SVG, with D3 v5's `scaleBand` and `scaleLinear` mapping country names and population values to screen coordinates. The chart includes custom axis components (`AxisBottom`, `AxisLeft`) and bars (`Marks`) that display tooltips on hover. Data is loaded from a CSV via D3's `csv` function, and the population values are multiplied by 1000 for display. The chart is styled with Poppins typography and uses a green color for the bars.

Apr 14, 2024

Loading thumbnail…

Task8

This example demonstrates the baseline "Hello World" template for the VizHub V3 runtime, rendering static text in a centered layout using plain HTML and inline CSS within a container element. The code sets a large font size and populates the container’s innerHTML directly, without any data loading or external libraries. It serves as a minimal starting point for experimentation, highlighting the reactive environment’s ability to hot-reload changes instantly. The visualization is purely presentational, with no interactive behavior beyond the environment’s built-in widget support.

Apr 14, 2024

Loading thumbnail…

5 Buddhas

5 Buddhas uses React to render an SVG of five randomly generated polygon clusters, with each polygon’s points, fill color, and rotation determined by a series of nested Array.map iterations over the numbers 0 through 20. The `Math.random()` calls produce unpredictable coordinates and RGB values, resulting in a chaotic, generative composition of overlapping diamond shapes on a black background. A single Buddha path is layered on top and transformed with translation and scaling, anchoring the piece. The code also includes commented-out logic for computing cubic values and a console log, hinting at an exploratory process behind the visual.

Mar 24, 2024