S

Shashankkodishala@my.unt.edu

@Shashank150102·24 public vizzes

Loading thumbnail…

A7-Q2

This example visualizes the average weight and lifespan of animal species as two overlapping area charts, using steelblue and orange fills to distinguish the measurements. The data comes from a CSV file loaded with `d3.csv`, and the visualization is rendered as SVG using D3 v7's `d3.area`, `d3.scaleBand`, and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend indicates which color corresponds to weight versus lifespan. The chart includes labeled axes for species and measurement units.

Loading thumbnail…

A7-Q1

This pie chart visualizes the distribution of car models by manufacturer, using a dataset of 50 vehicles with each make occupying one slice of equal size. The chart is rendered with SVG through D3.js, using the `pie` and `arc` generators to compute and draw the segments, while `scaleOrdinal` with `schemeCategory10` assigns colors to each manufacturer. A legend on the right side maps the color-coded slices to their corresponding car brands, and the visualization adapts to the full browser window dimensions.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatterplot visualizes the Iris flower dataset, showing the relationships between sepal and petal measurements. It cycles through four different attribute combinations on the x-axis, updating every few seconds. The three species—setosa, versicolor, and virginica—are color-coded (skyblue, lightgreen, and orange). Built with D3.js (v6.7.0), it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a reusable `scatterPlot` module. The visualization dynamically re-renders the axes and circles, and includes a color-coded legend and axis labels.

Loading thumbnail…

A6_Q4

This bubble chart displays city population and GDP on the y- and x-axes, with circle size and color encoding happiness scores. The visualization uses d3.csv to load a local CSV file and d3.scaleLinear, d3.scaleSqrt, and d3.axisBottom/Left to create scales and axes. SVG circles are rendered with fill colors ranging from lightgreen to darkgreen based on happiness, while city names appear as text labels near each bubble.

Loading thumbnail…

Fork of A6_Q4

This bubble chart visualizes the relationship between city GDP, population, and happiness for ten U.S. cities, mapping GDP to the x-axis, population to the y-axis, and bubble size to happiness scores while a linear color scale from lightgreen to darkgreen encodes the same happiness values. The visualization uses D3.js v6 with SVG rendering, employing d3.scaleLinear for the axes and d3.scaleSqrt for bubble radii, with data loaded from a CSV file and parsed into numeric values.

Loading thumbnail…

A6_Q4

This example demonstrates the minimal "Hello World" starter template for the VizHub V3 runtime, displaying a single text string centered within an HTML container. The exported `main` function receives a `container` DOM element and sets its inner HTML directly, with font size controlled by a hardcoded numeric value that the user can adjust interactively by Alt-dragging in the editor. It shows how the runtime hot-reloads changes in real time, using no external libraries beyond the browser’s built-in DOM APIs. The rendering approach is plain HTML and CSS within the container element.

Loading thumbnail…

A6_T4

A bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes, colored by make and scaled by MPG. Built with D3.js (v7), the SVG chart uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and data loaded from a CSV file. Tooltips display each car make on hover, and a legend shows MPG values and make colors.

Loading thumbnail…

A6_T4

This visualization demonstrates the D3.js General Update Pattern by binding an array of circle data to an SVG canvas, rendering seven circles with varied sizes, positions, and neon colors. The `d3.select` method creates a dynamic SVG element sized to its container, while `join('circle')` manages element creation based on the bound data. Each circle's `cx`, `cy`, `r`, and `fill` attributes are set from corresponding data object properties, with a uniform opacity of 0.708, demonstrating method chaining and data-driven styling in a minimal interactive example.

Loading thumbnail…

A6_Q3

This scatter plot shows the relationship between alcohol content and quality ratings for red and white wines, with each point colored by wine type. The visualization uses D3 v7 to parse inline CSV data and render an interactive SVG chart with labeled axes. Hovering over a point enlarges it and displays a tooltip showing the wine type and quality score. The chart employs d3.scaleLinear for coordinate mapping, d3.axisBottom and d3.axisLeft for tick marks, and d3.scaleOrdinal to assign red and yellow colors to the respective wine categories.

Loading thumbnail…

A6_T3.2

This interactive D3.js scatter plot visualizes the Iris dataset, plotting sepal length against petal length. Each point’s shape encodes the flower species, as explained by a custom legend. The visualization uses D3’s `scaleLinear` for axes, `scaleOrdinal` and `symbolsFill` for categorical shapes, and `csvParse` to load the data from a GitHub-hosted CSV. The code leverages D3’s `select` and `join` APIs for declarative SVG updates, with axis labels and a manually positioned shape legend.

Loading thumbnail…

A6_T3.1

This visualization displays the Iris dataset as a scatter plot, using petal length on the x-axis and petal width on the y-axis. Each point represents a flower sample, colored by species: skyblue for setosa, lightgreen for versicolor, and orange for virginica. The visualization uses D3 v6 with scaleLinear for axes and d3.csv to load the remote data. It also includes rotated axis labels for clarity, rendered as SVG circles with fixed radius of 5 pixels.

Loading thumbnail…

A6_Q2

A stacked bar chart visualizes smartphone market share across five price ranges—Low, Mid, High, Premium, and Ultra Premium—for six brands. Each horizontal bar represents a brand, with colored segments depicting the proportional share in each price tier. The code uses D3.js v7, building an SVG with `d3.select`, `d3.scaleBand`, and `d3.scaleLinear` for axes, and `d3.stack` to aggregate the data. Color mapping is handled via `d3.scaleOrdinal`, and a legend is manually constructed using `svg.append`. The synthetic dataset defines share values for each brand and price range.

Loading thumbnail…

A6_Q2

This example shows the distribution of IMDb movie ratings across six genres, using a stacked horizontal bar chart where each bar represents a genre and each colored segment shows the proportion of movies in a rating range from below 5.0 to above 8.5. The chart uses d3.stack() to compute the stacked series and d3.scaleBand for the categorical y-axis and d3.scaleLinear for the percentage x-axis. Interactive tooltips appear on mouseover events, displaying the exact percentage for each rating category. The data is loaded from a CSV file and rendered as SVG elements.

Loading thumbnail…

6_Buddha

This visualization layers multiple rotated, semi-transparent diamond shapes atop a photograph of flowers, using an SVG canvas within a React application. The code generates positions and colors through nested array mappings and JavaScript’s `Math.random()`, constructing each shape with a `points` attribute and applying fill colors via `rgb()`. A large central Buddha path, rendered with an SVG `<path>` element, anchors the composition, while the background image of flowers is set in CSS. The piece combines random geometric generation with a fixed, detailed vector drawing.

Loading thumbnail…

Fork of 6_Buddha

A dense, flower-patterned background fills the viewport while hundreds of semi-transparent, randomly colored diamond shapes scatter across it, creating a chaotic, generative overlay. The code uses React with SVG rendering, mapping nested arrays to produce many `<null>` elements with computed `points`, `fill`, `opacity`, and `transform` attributes. A large, decorative Buddha path is also rendered via an SVG `<path>` with complex coordinate data, layered atop the randomized shapes for a contrasting, artistic composition.

Loading thumbnail…

6_buddha

This visualization displays a radially symmetric mandala of Buddha images, with six copies of the SVG placed around a central point. The code uses React to render the SVG elements, applying rotation transforms at 60-degree intervals to create the circular arrangement. A floral background image is set via CSS, while the main SVG uses nested `<g>` elements and `<image>` tags to position the repeated icon. The React component maps over an array to generate the structure, though the final output focuses on the rotational symmetry of the Buddha motif.

Loading thumbnail…

Fork of A6_T2

This stacked bar chart shows how IMDb movie ratings distribute across genres, displaying the percentage of films falling into five rating bands. The visualization reveals that documentaries have the highest proportion of high ratings, while action films skew toward lower scores. Built with D3 v7, the chart uses `d3.stack()` to compute the stacked series, `d3.scaleBand()` for the categorical genre axis, and `d3.scaleLinear()` for the percentage scale. Interactive tooltips appear on mouseover, showing precise percentage values for each genre-rating combination using data from the embedded CSV file.

Loading thumbnail…

A6_T2

This example demonstrates a minimal "Hello World" application built for the VizHub V3 runtime environment. It renders a single line of text inside a provided container element, with its font size set as a hard-coded numeric value. The code exports a `main` function that directly manipulates the container's `innerHTML` to display the styled text, showcasing the simplified entry point and basic DOM rendering approach of the platform.

Loading thumbnail…

A6_Q1.2

A horizontal bar chart displays the populations of 20 countries in 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while green SVG rectangles render the data. Axis components generate tick marks and labels, and tooltips appear via SVG `<title>` elements. Population data is loaded as CSV from a remote GitHub URL and formatted with D3’s `format('.2s')` to abbreviate large numbers.

Loading thumbnail…

Fork of A6_Q1.1

This fork of Activity6_Task1 renders a horizontal bar chart of the top ten countries by population in the year 2000. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) and React components to position SVG rectangles and axes, with a tooltip showing the formatted population value. The chart applies a light green fill to bars, blue tick lines, and a Poppins font, loading data from a CSV URL and formatting large numbers with D3's `format`.

Loading thumbnail…

Activity6_Task1

This bar chart displays the 2020 population of 30 countries, sourced from a CSV file, with countries on the y-axis and population on the x-axis. The visualization uses React components to render SVG marks, with d3.scaleBand and d3.scaleLinear for positioning, and d3.format for abbreviating tick labels (e.g., "B" for billions). The code leverages d3.csv for data loading and includes tooltips via SVG `<title>` elements.

Loading thumbnail…

A6_Q1

This visualization displays the 2020 populations of ten countries using horizontal bars, with a linear scale for population and a band scale for country names. Built with React and D3 v5, it renders SVG rectangles and axes via helper functions like `scaleBand` and `scaleLinear`. Data is loaded from a CSV file using D3's `csv` parser, with values formatted using D3's `format` for tooltips and axis labels.

Loading thumbnail…

Fork of Fork of 5_Buddha

A dense field of rotating, semi-transparent SVG polygons in vivid colors overlays a large, detailed Buddha path drawing on a black background. The polygons are generated procedurally from a numeric array, with each iteration using `Math.random()` to determine position and fill color. The Buddha silhouette is rendered as a single SVG `<path>` element, translated and scaled within the same coordinate space. The React application uses `ReactDOM` to render the static composition without animation or interaction.

Loading thumbnail…

5_Buddha

The visualization displays a colorful, overlapping Buddha silhouette composed of thousands of randomly generated polygons, each with varying colors and opacity. The image is rendered as an SVG using React and ReactDOM, with polygons generated through nested map functions that compute random coordinates, fill colors, and rotation transforms. The Buddha path data is hardcoded, while the surrounding abstract elements are procedurally generated, creating a layered, chaotic effect against a black background.