N

Navaneeth-Ragi

@Navaneeth-Ragi·23 public vizzes

Loading thumbnail…

Chart Area for ICE 7

This example shows an area chart of salary versus years of experience, with a red curved line over an orange filled region. The chart uses D3 v5’s `area` and `line` generators with `curveBasis` for smooth interpolation, and employs `scaleLinear` for both axes. The SVG rendering includes gridlines via `axisBottom` and `axisLeft` with tick sizes matching the chart dimensions. Data is loaded from a CSV source using `csv`, with salary values parsed as numbers. The visualization is built in a React framework, rendering to a fixed 930×450 SVG canvas.

Loading thumbnail…

Line Chart for Salary with respect to Years Of Experience

A line chart displays salary against years of experience, with the x-axis scaled as time and the y-axis as a linear salary range. The SVG visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to plot a single green path. Data loads from a CSV via `d3.csv`, parsing salary as numbers and dates with `d3.timeParse`. Grid lines and axis labels are styled through CSS classes, rendered in a React-free static HTML page within a fixed SVG viewport.

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3 version 7” centered on a blank white page, with the font size set to 13em. It demonstrates a minimal D3 v7 setup by selecting the document body with `d3.select('body')` and calling `.text()` to set its content. The code imports the `select` function directly from the D3 module and loads the library via a CDN link to `d3.min.js`. The rendering is static and purely text-based, without any data source or additional visualization elements.

Loading thumbnail…

ICE-7 Pie chart Creation

This interactive pie chart visualizes the distribution of salaries across different time categories. Built with D3.js v5 within a React framework, it renders an SVG with colored segments representing salary values, while a legend maps each time category to its corresponding color and salary amount. The implementation uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the chart, with data fetched from a remote CSV file. Text labels are positioned using arc centroids, and the legend is manually constructed with rectangles and text elements.

Loading thumbnail…

Fork of ICE - 7 Pie Chart FOR MARkS

This visualization presents student marks as a pie chart, with each slice colored and labeled by GPA, accompanied by a legend listing the corresponding time spent. Built with React and D3.js v5, the code uses `d3.csv` to load data from a GitHub gist, `d3.pie` and `d3.arc` to generate the chart geometry and centroids, and `d3.scaleOrdinal` to map GPA values to a fixed set of colors. The SVG output includes both path segments and overlaid text labels.

Loading thumbnail…

Fork of ICE - 7 Pie Chart FOR MARkS

This visualization presents a pie chart depicting study hours and corresponding GPA scores, with each slice labeled by GPA value. The chart uses D3 v5 in a React framework, employing d3.pie and d3.arc to generate SVG paths, and d3.scaleOrdinal with a custom color array to differentiate sections. Data is fetched asynchronously from a CSV file via d3.csv, and a legend displays both study time and GPA for each category. The SVG canvas is fixed at 960 by 500 pixels, with text elements positioned using arc centroids.

Loading thumbnail…

Reusable Scatter Plot - With Different Shapes- ICE7

This example presents a reusable scatter plot built with React and D3.js, visualizing the Iris dataset. It uses D3 scales and axes to map petal width and sepal length, while a `scaleOrdinal` with `symbols` generates distinct shapes for each species. The visualization automatically cycles through different X-axis columns every 15 seconds using `setInterval`, demonstrating dynamic updates. The chart is rendered as SVG with animated transitions, and the code leverages D3's `csv` loader, `axisLeft`, `axisBottom`, and `symbolGenerator` to create an interactive and adaptive plot.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of the reusable D3 scatter plot visualizes the Iris Dataset, cycling through four attribute combinations every two seconds to show different projections of the data. The plot uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and render axes, while SVG circles represent each flower. The code demonstrates a modular chart design with configurable accessor functions, enabling dynamic updates to the x-axis variable without redrawing the entire visualization.

Loading thumbnail…

ICE-6 Application of Marks and Channels

This interactive bar chart visualizes the salary distribution of the first fifteen records from a CSV dataset, plotting salary amounts against years of experience. The visualization uses orange rectangles as marks, with the horizontal axis encoding salary values through position and length. Built with React and D3.js v5, the application loads data via the `csv` function from a GitHub gist, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The chart includes red gridlines and styled tick labels to enhance readability.

Loading thumbnail…

Fork of ICE-6 Creating Marks And Channels

This example visualizes the marks scored by students against the time they invested in studying. It displays a bar chart with horizontal rectangles representing each student's marks, scaled linearly along the x-axis, while the y-axis uses a band scale for time study categories. The code uses React with hooks (useState, useEffect) to load and parse CSV data, and D3 v5 APIs including scaleBand, scaleLinear, and csv for data fetching. The SVG is rendered via React elements, with grid lines and axis ticks generated using D3's max and format utilities. The visualization includes the top 15 records from the dataset.

Loading thumbnail…

Scatter Plot for Penguin Dataset

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping flipper length and bill length with points colored by species. Built with React and D3 v5, the visualization renders as an SVG with animated transitions. The code uses `d3.csv` to load data and `d3.scaleLinear` for axes, with `d3.axisLeft` and `d3.axisBottom` for chart scaffolding. A second implementation adds user controls through a D3 menu system, enabling dynamic re-mapping of axes.

Loading thumbnail…

Fork if penguine Dataset Scatter Plot

This scatter plot visualizes penguin dataset measurements, showing flipper length against body mass for individual penguins. The SVG circles use elliptical shapes (rx/ry attributes) to encode bill length and bill depth, while species are represented through fill colors. The visualization loads CSV data using `d3.csv` from a GitHub gist, applies `d3.scaleLinear` to map measurements to screen coordinates, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Data parsing converts string measurements to numbers for accurate scaling and positioning.

Loading thumbnail…

Fork of HTML Cars Report

This example displays a simple car sales report as a static HTML list, highlighting the first vehicle’s price in red. It demonstrates basic HTML and CSS styling, using a monospace font and large text size for readability. The page structure is defined in index.html, with visual rules applied through styles.css, including a `.highlighted` class to emphasize the Nissan Leaf entry. No external JavaScript libraries or data sources are used; the data is hardcoded directly in the markup.

Loading thumbnail…

CSCE 5320: ICE 5 Scientific Data Visualization

This D3.js v7 example presents a summary of Oscar Awards data, displaying the dataset's size in kilobytes, row count, and column count. It fetches a CSV file from a GitHub gist using the `d3.csv` method, then dynamically updates an HTML `<pre>` element with the calculated statistics. The page is styled with custom CSS classes, including a background image and colored typography, to create a visually themed presentation of the data overview.

Loading thumbnail…

Fork of React Starter

A minimal React starter demo renders a static "Hello React!" message centered on the page. The app uses `ReactDOM.render` to mount a functional component into the `#root` element, with styling controlled by a CSS class. React 16.13.1 and ReactDOM are loaded from unpkg CDN, while the entry point is `index.js` and the bundled output is `bundle.js`. No interaction, data, or charting libraries are present; it simply demonstrates the basic setup for a React-based visualization project.

Loading thumbnail…

ICE 5

This example demonstrates basic VizHub functionality by rendering a single message, “Hello VizHub!”, centered on the page in large text. It shows how to load D3.js from a CDN, use ES6 module imports for both D3 API functions like `select` and local modules, and apply styling via an external CSS file. The visualization is static, with no data or animation involved.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to visually summarize a dataset of CSS named colors by displaying its size in kilobytes, row count, and column count as large text. It loads the CSV data from a GitHub gist using the D3 `csv` function, while React manages the asynchronous state with hooks like `useState` and `useEffect`. The app renders a loading message until the data arrives, then displays the statistics using a custom message function. The visualization integrates React 16.9 with D3 v5, showing how to combine both libraries for data-driven UI updates.

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

A D3.js smiley face, built from SVG primitives, demonstrates fundamental DOM manipulation and transitions. A green circle forms the head, with two dark circles for eyes and an orange arc for the mouth, all positioned using geometric constants. The animation shows both rectangular eyebrows moving up and down together via chained `transition().duration()` calls that modify their container's `transform` attribute. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, with all elements grouped and translated to the SVG center for easy positioning.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's make a face with D3.js!

A smiling face, drawn with green and orange SVG shapes, demonstrates D3.js v5's DOM manipulation and animation capabilities. The face's eyebrows repeatedly shift upward and back down using chained `transition().duration()` calls, while the mouth is rendered using the `arc()` geometry function. The code builds the illustration by selecting an SVG element, appending grouped circles and rectangles, and positioning them relative to the viewport center.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face built with D3.js demonstrates fundamental DOM manipulation through SVG elements, including a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back down using chained `transition` and `.duration()` calls, creating a subtle waggle effect. The example imports `select` and `arc` from D3 v5, reads the SVG's width and height attributes, and positions everything via a centered `g` group. All geometry, including eye spacing, eyebrow offsets, and the mouth's inner/outer radii and angles, is hardcoded.

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js v5. The code uses `d3.select` to append SVG circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` helper for the mouth. The eyebrows animate via chained `transition().duration()` calls, moving them up and down over two seconds. The face is centered using an SVG transform translation, and the static body scales to a 1000x500 viewport.

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in an SVG canvas. D3.js v5 is used for DOM selection and manipulation, creating the face from primitive shapes: a circle for the head, smaller circles for eyes, rectangles for eyebrows, and a curved path for the mouth. The eyebrows animate via chained `transition()` calls over two seconds each, moving them up and down repeatedly. The code uses `select()`, `append()`, and `attr()` from D3 to build the static elements, while the `arc()` generator defines the mouth's shape.