Skip to main content
Log in
S

sahithigovindaraju@my.unt.edu

@sahithigovindarajuunt·15 public vizzes

Loading thumbnail…

Pie chart - Activity 7

This pie chart displays the distribution of irrigation types from an agricultural dataset, with each slice labeled and color-coded by category. The visualization is built using D3.js v6, loading data from a remote CSV file. The code uses `d3.pie()` to compute arc segments, `d3.arc()` for rendering the slices, and `d3.rollup()` to aggregate the dataset by irrigation type. Each slice includes its type name and count, alongside a manually positioned legend with custom colors.

Nov 6, 2024
Loading thumbnail…

Area chart - Activity 7

This example uses D3 v6 to visualize total energy consumption by electric vehicle model. It loads CSV data from a GitHub repository, aggregates energy values per vehicle model with `d3.rollups`, and renders an area chart using `d3.area()`, `d3.scaleBand()`, and `d3.scaleLinear()`. The SVG output includes rotated x-axis labels, a y-axis title, and value labels above each point.

Nov 6, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the "Hello World" for the VizHub V3 Runtime Environment, where a single number controls the font size of text rendered inside a div. It shows how interactive widgets enable continuous hot reloading, allowing property changes to take effect in real time. The code exports a `main` function that receives a container element, setting its inner HTML with an inline style. The runtime uses the exported `main` function as the entry point, replacing the traditional `index.html` setup.

Nov 4, 2024
Loading thumbnail…

Activity6_Task4

A bubble chart displays the Iris dataset, plotting sepal length against sepal width for three species, with point size encoding petal length and color distinguishing species. The visualization is rendered as an SVG using D3.js v7, relying on d3.scaleLinear for axes and bubble radius, d3.scaleOrdinal with d3.schemeCategory10 for colors, and d3.axisBottom/axisLeft for ticks. Interactive tooltips appear on hover via mouseover, mousemove, and mouseleave events, while a legend identifies the species.

Oct 22, 2024
Loading thumbnail…

activity6_task3.2

This visualization displays a scatter plot comparing car horsepower and torque, with points shaped by car make. The plot uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to map data values to positions and shapes. A legend with shape symbols identifies different car makes, while axes are rendered using `axisLeft` and `axisBottom`. Data is loaded from a remote CSV file and parsed with `csvParse`, with numeric fields converted using unary operators.

Oct 22, 2024
Loading thumbnail…

activity_6 task3.1

This example shows a scatter plot of automobile performance data, mapping horsepower on the x-axis, torque on the y-axis, and highway MPG to the radius of each circle. The visualization uses D3 v6 to load CSV data from a GitHub repository, parse numeric values, and render SVG circles. It employs d3.scaleLinear for position and size scaling, d3.extent for domain calculation, and d3.axisLeft and d3.axisBottom for labeled axes. A legend identifies the variables represented by the data, while the color scale assigns a single orange fill to all circles.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the relationship between car top speed and price, with point shapes encoding car brands. Built with D3 v7, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` with `symbolsFill` for categorical shape mapping, and `symbol` to generate the varied point glyphs. The custom `axes` module labels the axes, while the `shapeLegend` module provides a manual legend for brand categories. Data is parsed from a remote CSV using `csvParse`, with numeric fields converted for plotting. The chart is fully responsive, scaling to the browser window dimensions.

Oct 21, 2024
Loading thumbnail…

Activity6_Task3

This example displays a scatter plot from a car dataset, showing the relationship between horsepower and highway MPG, with each orange circle representing a car. It loads data from a CSV file via `d3.csv`, parses numeric values, and scales the data using `scaleLinear` with `extent` for the domains. SVG circles are bound to the data, and axes are rendered with `axisBottom` and `axisLeft`. D3 v6 handles all DOM manipulation and data joins, while axis labels are positioned via SVG text and `transform`.

Oct 21, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the distribution of movie ratings across six genres, using bubble size to represent the proportion of films within each rating category—from below 5.0 to above 8.5. Six genres are plotted along the y-axis while five rating categories form the x-axis, with larger circles indicating higher percentages. The visualization uses d3.csv to load the data and d3.scaleSqrt for bubble sizing, while d3.axisBottom and d3.axisLeft construct the axes. Interactive tooltips appear on hover, displaying the genre and its exact percentage for the “below 5.0” category, implemented through D3 event listeners.

Oct 21, 2024
Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the relationship between horsepower and torque for various car makes, using bubble size to represent highway MPG and color to distinguish manufacturers. The visualization loads CSV data from a GitHub repository and renders it with D3 v7, employing scaleLinear for axes, scaleSqrt for bubble sizing, and scaleOrdinal with schemeCategory10 for categorical coloring. Axes are generated using axisLeft and axisBottom, while a custom shape legend component displays the car makes.

Oct 21, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot shows the relationship between car horsepower, torque, and highway MPG for a dataset of vehicles, where each circle’s position encodes horsepower and torque, and its radius encodes fuel efficiency. The visualization is rendered as an SVG using D3 v6, employing `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a remote CSV file, with car make labels drawn above each point, and axis labels styled with CSS.

Oct 21, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart displays car specifications—horsepower, torque, and highway mpg—for five vehicle makes, using d3.stack to compose the horizontal segments. Each bar’s segments are colored via d3.scaleOrdinal, with an x-axis linear scale and a y-axis band scale. The SVG rendering includes mouseover tooltips that show exact values, while the legend identifies each specification. Data comes from an inline CSV array within the code.

Oct 21, 2024
Loading thumbnail…

activity 6_Task 1

This chart displays the population of 20 countries in 2010, shown as horizontal bars on a linear scale. The visualization uses React to render SVG elements, with D3 v5 providing the scales and file parsing. The data is loaded from a remote CSV via `d3.csv`, with the 2010 column extracted and multiplied by 1000 to obtain population figures. The implementation uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and custom components for axes and marks.

Oct 21, 2024
Loading thumbnail…

Fork of 6 Buddha

A dense scatter of overlapping colored squares forms the visual core, layered above a decorative flower background. The piece uses React to render SVG elements, with a nested array mapping generating random x and y positions on a 1000x1000 canvas. Each square applies an RGB fill created from randomized values and an opacity of 0.8. The composition also includes a single large Buddha silhouette path, drawn with a complex SVG path string, scaled and translated into position. The layout mixes random algorithmic placement with a fixed structured figure.

Oct 18, 2024
Loading thumbnail…

5 Buddhas

A dense field of small, semi-transparent polygons is layered over a single, large, ornate Buddha silhouette. The polygons, generated by triple-nested array maps, use random coordinates and colors, creating a chaotic, textured background. The Buddha path is rendered via SVG and scaled and translated into place. The visualization is built with React and ReactDOM, which generate the SVG output, with the Buddha path data embedded directly in the code.

Oct 13, 2024