Varshareddy2912

@Varshareddy2912·20 public vizzes

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth curve to connect data points over time. The chart employs D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis` to create a filled gradient beneath the line. Data is loaded from a CSV via `d3.csv` and parsed with `new Date()`, with axes rendered using `axisBottom` and `axisLeft` in an SVG. The styling includes colored tick labels, an orange axis label, and a light green fill for the area.

Jul 5, 2023

Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013 using data loaded from a CSV file. The chart plots yearly costs as a light green line with thick stroke, using an SVG rendering approach with D3 v7. It employs `d3.scaleBand` for the x-axis years and `d3.scaleLinear` for the y-axis cost values, with `d3.axisBottom` and `d3.axisLeft` providing the ticks. The `d3.line` generator positions each point at the center of its corresponding band.

Jul 5, 2023

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of student counts across university majors at UNT, with each slice labeled by its proportion and a legend identifying each major. The visualization uses D3 v5 to fetch CSV data from a GitHub repository, then employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart and color-coded legend. Student values are formatted in thousands (e.g., "12K") on both the slices and legend, rendered as SVG elements within an HTML page that loads D3 via UNPKG.

Jul 5, 2023

Loading thumbnail…

Pie Chart

This pie chart displays the distribution of students across academic majors at the University of North Texas. The visualization uses the D3.js library’s `pie()` and `arc()` generators to compute and render the chart’s segments, with an SVG-based legend listing each major alongside its corresponding student count. Data is loaded asynchronously from a CSV file using `d3.csv`, and color encoding is handled by `d3.scaleOrdinal` with a fixed palette.

Jul 5, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This example displays the classic Iris flower dataset as an animated scatter plot, cycling through four different feature pairings on the axes every few seconds. The visualization uses a reusable `scatterPlot` module built with D3 v6, which leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render axes. Points are colored by species (setosa, versicolor, virginica) and include a custom legend with labels. The animation is driven by `setInterval`, updating the plot's x-value accessor to switch between petal width, sepal width, petal length, and sepal length, while the SVG rendering updates accordingly.

Jul 5, 2023

Loading thumbnail…

Activity 7

This bar chart displays the 2010 populations of the top ten countries. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, with data loaded via `csv` from a GitHub dataset. Each green bar is an SVG `rect`, rendered through React components like `Marks`, `AxisBottom`, and `AxisLeft`, with axis tick values formatted using D3's `format`.

Jul 5, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position is determined by horsepower on the x-axis and torque on the y-axis, while its size encodes highway MPG. The color of each bubble represents the car make. Built with D3.js v7, the visualization uses SVG for rendering and includes interactive tooltips that display the car make upon mouseover, as well as legends for both bubble size and color categories. Data is loaded from a CSV file.

Jul 5, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each point’s shape encoding the species. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and `d3.symbol()` to generate the mark paths. A shape legend is rendered using the `d3.selectAll().join()` pattern for ticks, while CSV data is fetched and parsed with `d3.csvParse`.

Jul 5, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample while coloring points by species. The SVG rendering uses D3.js v6, loading data via CSV from a GitHub repository. The code employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `csv` for data parsing. Circles are positioned with `cx` and `cy` attributes, with species-specific colors assigned through a switch function.

Jul 5, 2023

Loading thumbnail…

IMDb Movie ratings

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. The chart displays the percentage of movies within five rating bands, from below 5.0 to above 8.5, for genres such as Documentary, Drama, and Action. The visualization is rendered as an SVG using D3 v7, with data loaded from a local CSV file. The code employs d3.scaleOrdinal for color mapping, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage scale, along with interactive tooltips on mouseover.

Jul 5, 2023

Loading thumbnail…

My Webpage

This example demonstrates loading and displaying a CSV dataset of student performance within a styled HTML page. Using D3 v5, it fetches data from a GitHub gist via `d3.csv`, then reports the file size in kilobytes, row count, and column count. A static SVG star graphic is included, alongside a second `d3.csv` call that prints the first ten rows as JSON. The page combines CSS styling, an HTML container, and D3's selection and formatting utilities.

Jun 30, 2023

Loading thumbnail…

Histogram

This histogram visualizes the distribution of average body mass index (BMI) across different ages, using survey data loaded from a CSV file. The chart renders orange bars in an SVG canvas, with age on the x-axis and average BMI on the y-axis. The code uses D3 v7 APIs including `d3.bin` to group data into bins, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks. Data preprocessing calculates BMI from height and weight values.

Jun 24, 2023

Loading thumbnail…

parsing data

This example demonstrates how to load, parse, and display CSV data using D3 version 5. It fetches a remote CSV file via `d3.csv`, then slices the first ten rows and renders them as formatted JSON on the page using `JSON.stringify`. The code also imports `csvFormat` from D3 and defines a `kilobytes` helper to calculate the data size, though this function is not invoked. The example showcases ES6 module imports from local files and D3’s Promised-based data loading approach.

Jun 24, 2023

Loading thumbnail…

Transforming Data

This example demonstrates how data can be loaded, parsed, and aggregated in the browser using D3 v7 and ES6 modules. It loads the classic Iris dataset from a CSV file, converts the numeric fields, and then uses `d3.flatRollup` with `d3.sum` to compute the average sepal length for each species. The result is displayed as formatted JSON text within a `<pre>` element. The code also illustrates a pattern for handling asynchronous data loading with a state machine that manages `undefined`, `'LOADING'`, and loaded data states.

Jun 24, 2023

Loading thumbnail…

Activity 6

This example demonstrates VizHub’s ability to load D3 via UNPKG and use ES6 modules from both D3 and local files. The page renders an SVG with a large embedded base64 JPEG image as the background, while a separate div displays the text message “Hello VizHub!” using d3.select and the local message module. The code uses D3 v5’s select function and custom ES6 imports to combine remote and local resources in a single visualization.

Jun 24, 2023

Loading thumbnail…

Untitled

A large decorative image fills an SVG canvas, with D3's `select` function updating a `#message` element with text from a local ES6 module. The example demonstrates loading D3 from UNPKG and importing local modules, rendering the VizHub greeting through an SVG pattern and a base64-encoded JPEG background.

Jun 21, 2023

Loading thumbnail…

Fork of Transforming Data

This visualization shows the average sepal length for each Iris species in the classic Fisher dataset. The example fetches a CSV file and parses it with `d3.csvParse`, converting numeric fields, then uses `d3.flatRollup` with `d3.sum` and array length to compute the per-species mean. The result is displayed as a formatted JSON string inside a `<pre>` element, which re-renders whenever the data changes.

Jun 21, 2023

Loading thumbnail…

Buddhas

This visualization depicts a grid of diamond-shaped polygons rendered in vibrant, random colors against a black background, with a large, hand-drawn SVG path of a Buddha figure overlaid in the foreground. The code generates the geometric pattern using nested `Array.map` methods in React, computing polygon points and fill colors via `Math.random`. The Buddha shape is a static SVG path element, scaled and positioned with a transform, while React renders both elements into an SVG canvas. The example demonstrates combining procedural generative art with precise vector drawing in a React-based visualization.

Jun 12, 2023

Loading thumbnail…

Fork of 5 Buddhas

A generative visualization renders a field of randomly colored diamond polygons, layered over a large buddha face formed by a long SVG path. Built with React and rendered as SVG, the code uses nested array maps to generate each polygon with randomized positions, fill colors derived from `Math.random()`, and rotation transforms. The composition combines abstract geometric noise with a figurative central image, creating a dense, colorful collage effect.

Jun 12, 2023

Loading thumbnail…

5 Buddhas

A generative SVG visualization displays five large buddha figures rendered as intricate outlines over a dark background, surrounded by a dense field of semi-transparent, randomly colored polygons. The buddha paths are drawn using React components and JavaScript's `Math.random()`, with each polygon's position and fill color determined randomly. The example uses the React and ReactDOM libraries to render the SVG scene, while the complex path data for the buddhas is hardcoded directly in the source code.

Jun 12, 2023