G

goudrohit2000@gmail.com

@Rohit142000·22 public vizzes

Loading thumbnail…

Question-2

This example visualizes monthly car sales in India from 2009 to 2019 using a combined line and area chart, showing sales trends over time with the area fill emphasizing overall volume. The chart loads CSV data from a GitHub repository, parses dates with d3.timeParse, and renders an SVG with D3 v5. It uses d3.scaleTime and d3.scaleLinear for axes, d3.line and d3.area with curveBasis to generate smooth paths, and d3.axisBottom and d3.axisLeft for labeled ticks with gridlines. The styled area fill in orange contrasts with a thick black line, while axis labels appear in bold blue.

Loading thumbnail…

Question 1

This example visualizes vehicle registration counts by type as a pie chart. The code loads CSV data from a GitHub repository using `d3.csv` and maps the `Count` values to arc segments generated with `d3.arc` and `d3.pie`. Each slice is labeled with its value (formatted using `d3.format`), and a legend lists the vehicle types alongside their counts. The chart is rendered as an SVG with `d3.select`, with ordinal color scaling via `d3.scaleOrdinal` for the four categories.

Loading thumbnail…

Fork of Question 1

This visualization displays vehicle registration counts by type using a pie chart and accompanying legend, with values formatted in thousands (e.g., "5K"). The code loads data from a CSV file, uses `d3.pie` to compute arc segments, and renders the chart as SVG paths via `d3.arc`. Colors are assigned using `d3.scaleOrdinal` with a custom palette. Text labels and legend entries are added with `d3.select` and `.append()`, while axis labels are manually positioned, though no actual axes are drawn. The title "Vehicle Registrations" appears in red above the chart.

Loading thumbnail…

Question 1

This visualization displays vehicle registration counts by type as a donut pie chart with an interactive legend. The chart shows four categories with proportional slices and displays the value in thousands inside each segment, while the legend on the right lists each vehicle type with its corresponding color and count. Built with D3 v5, the code uses the `pie` function to compute arc segments, `arc` for path generation, and `scaleOrdinal` for color mapping, fetching data from a remote CSV file. The SVG output is styled with custom CSS classes for the legend text and labels.

Loading thumbnail…

Fork of Assignment 2 - Pie Chart

This visualization presents vehicle registration counts as a pie chart, using a dataset from a GitHub repository. The chart is built with D3 v5 and rendered as SVG elements. The code employs D3's `pie`, `arc`, and `scaleOrdinal` APIs to generate the chart segments and apply a categorical color scheme. Each slice displays its value in thousands, and a legend identifies the vehicle types. The visualization highlights the distribution of registrations across different vehicle categories, with colors distinguishing each type.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes the basic cost of Netflix for ten countries, sorted in descending order from a CSV dataset. The visualization renders categorical data as colored arcs with a legend displaying each country and its corresponding dollar value. Using D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions, the code draws SVG paths to create the chart. Data is loaded via the `csv` function and fetched from a GitHub gist, while mouseover events log each segment’s cost.

Loading thumbnail…

tutorial 7.1

This interactive scatter plot animates through different x-axis attributes of the Iris dataset, cycling between petal width, sepal width, petal length, and sepal length. The plot uses D3.js version 6.7.0 to render SVG circles colored by species, with a legend and axis labels that update dynamically. The animation repeatedly re-renders the chart with a new x-axis variable, while the y-axis remains fixed on petal length, using a `setInterval` loop and a modular array index. The data is fetched from a GitHub-hosted CSV file.

Loading thumbnail…

Fork of Hello HTML

This example presents a minimal, empty HTML page with a title of "Hello HTML" and no visible content or data visualization. The code relies on standard HTML5 document structure, containing only `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` tags, but does not include any libraries, scripts, or rendering elements. The page loads without drawing anything or computing any data, as the body element is completely blank. It serves as a bare-bones starting point for building web-based visualizations, with no concrete APIs or visualization approach implemented.

Loading thumbnail…

question-4

A bubble chart visualizes the relationship between vehicle speed, capacity, and energy source for various transportation modes. Each circle’s position encodes speed on the x-axis and capacity on the y-axis, while its radius scales with capacity and its color distinguishes energy source categories like Electric, Diesel, or Gasoline. Hovering reveals a tooltip with the mode, speed, and capacity. The chart uses d3.csv to load data, d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with d3.schemeCategory10 for colors, and d3.axisBottom/Left for ticks.

Loading thumbnail…

Activity4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for 31 car makes, with bubble size encoding MPG and color distinguishing brands. The visualization uses d3.csv to load data, then employs d3.scaleLinear for axes and bubble radius, d3.scaleOrdinal with d3.interpolateTurbo for categorical coloring. Interactive tooltips appear on mouseover, showing the car make. The SVG rendering includes a legend for both MPG values and color-coded makes, with circles animated via standard D3 transitions on hover states.

Loading thumbnail…

Activity6_Task3

This example displays a scatter plot of an insurance dataset, plotting age on the x-axis and charges on the y-axis, with points colored by sex (pink for female, light blue for male). The visualization uses D3 v6, loaded via UNPKG, and renders with SVG. The code fetches CSV data from a GitHub repository, parses the values, and creates the chart using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and `d3.csv`. It also adds labeled axes for Age and Charges.

Loading thumbnail…

Activity6-Task3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for three species of iris flowers. Each species is represented by a distinct symbol shape (circle, cross, diamond, and others) generated using d3’s `symbol` API, with a legend identifying the shape-to-species mapping. The chart uses d3’s `scaleLinear` for both axes and `scaleOrdinal` for the shapes, while the axes and legend are built through custom modules (`axes.js` and `shapeLegend.js`). Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse`.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the percentage of internet usage across five age groups, segmented by region, with each bar normalized to 100%. The visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal` for color encoding, mapping regions to distinct hues. Interactive tooltips appear on hover, displaying the precise percentage for each region-age combination using `d3.format('.2f')`. The chart leverages `d3.axisBottom` and `d3.axisLeft` with SVG rendering, reading from a `data.csv` file that contains proportional usage values for North America, Europe, Asia, Africa, and South America.

Loading thumbnail…

Activity6_Task2

This example demonstrates a minimal “Hello VizHub!” visualization that renders a centered message using D3’s `select` method to set the text of a DOM element. It shows how to load D3 via UNPKG and import both local ES6 modules and D3 API functions. The code defines a message string in a separate module (`myMessage.js`) and applies styling through an external CSS file, highlighting basic setup for modular D3 projects.

Loading thumbnail…

Fork of Fork of Activity 7

This visualization displays a horizontal bar chart of the top 20 countries by population in 2010, using data loaded from a CSV file via d3.csv. The React app renders SVG bars with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, formatting tick labels with d3.format. Axes are custom components, and each bar includes a native SVG tooltip showing the population value using the same formatted scale.

Loading thumbnail…

Fork of Fork of Activity 7

This interactive bar chart displays the population of the top 10 countries as of 2010, with each bar color-coded in green. The visualization uses a React front-end with D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded dynamically from a CSV file hosted on GitHub, parsed with D3’s `csv` function, and rendered as SVG rectangles with tooltips formatted using SI prefixes. The code includes custom axis components for bottom and left ticks, with styling defined in an external HTML file.

Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart comparing the populations of the top 10 countries in the year 2000. The visualization uses React components with D3 v5 scales, including `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. Data is loaded from a CSV file using `d3.csv`, and the bars are rendered as SVG rectangles with tooltips showing formatted population values. The chart includes custom axis components for the bottom and left sides, with population values formatted using `d3.format`.

Loading thumbnail…

Activity 6 Task_1

This horizontal bar chart displays the population of ten countries in the year 2000, with country names on the y-axis and population counts on the x-axis. Built with D3 v6, it loads data from a remote CSV file, filters it for the year 2000, and uses `scaleLinear` and `scaleBand` to map values. The visualization is composed of `rect` marks, an `AxisBottom` with a custom label, and an `AxisLeft`, all orchestrated via the `index.js` module and local ES6 imports.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic structure of a VizHub visualization, using D3 v5 to display a static text message in the center of the page. The code imports the `select` function from D3 and a local ES6 module exporting the string "Hello VizHub!". It then sets the text content of a div element via `selection.text()`. Styling is handled by an external CSS file, and the visualization does not involve any data loading or dynamic rendering.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization overlays a colorful Buddha path with randomly positioned and colored circles on top of a flower background image. The code uses React to render an SVG canvas, mapping nested arrays to generate multiple circle elements with random RGB values and opacity. The Buddha shape comes from a complex SVG path string, while the background is loaded via an image href. The composition creates an overlapping, vibrant collage effect by layering the geometric circles over the detailed Buddhist iconography.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A black canvas displays an overlapping, kaleidoscopic composition. The visualization combines thousands of randomly generated, semi-transparent polygons with a complex SVG path of a Buddha, scaled and translated over the field. The piece uses React and ReactDOM to render the SVG, computing positions and colors with nested `Array.map` calls and `Math.random()` for each polygon.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A chaotic array of randomly sized and colored polygons, generated from nested loops over an array of numbers, overlaps repeatedly to form an abstract, colorful composition. A static line-art representation of a Buddha figure is embedded within the visual. The React application uses SVG `polygon` elements, with positioning, fill colors, opacity, and rotation each determined by calls to `Math.random()`. The rendering relies on `react` and `react-dom` to mount the SVG tree within an HTML page.