R

RJVENKATESH789@GMAIL.COM

@venkateshThentu1·30 public vizzes

Loading thumbnail…

question-2

This area chart visualizes the distribution of student counts across total marks. The chart uses a green gradient fill beneath the line to emphasize the area under the curve, with labeled axes for "Total Marks" and "no_of_Students." The visualization is built with D3 v7, loading CSV data from a GitHub gist, parsing it with `d3.csv`, and scaling the x and y axes with `d3.scaleLinear`. The area path is generated using the `d3.area` function, and a custom `linearGradient` is defined and applied to the SVG path.

Loading thumbnail…

d3.js

This interactive scatter plot animates through different pairings of measurements from the Iris dataset, cycling the x-axis among petal width, sepal width, petal length, and sepal length every few seconds. Using d3.csv to load the data and d3.scaleLinear, axisLeft, and axisBottom to construct the axes, the visualization updates in place via setInterval. Circular markers are color-coded by species (setosa, versicolor, virginica) using hardcoded hex values, with a custom legend, axis labels, and a title appended through d3 selection methods. The reusable scatterPlot function encapsulates the plot’s dimensions, scales, and rendering logic.

Loading thumbnail…

Q1_VT

This pie chart visualizes the number of seized vehicles across US states, with each slice colored distinctly and labeled with its value in thousands. The visualization is built using D3 v5, employing the `pie`, `arc`, and `scaleOrdinal` APIs to generate and style the chart. Data is fetched from a raw GitHub CSV file via `d3.csv`. The chart includes a legend listing each state with its corresponding color and value, all rendered as SVG elements.

Loading thumbnail…

Fork of Circles with D3

This fork of "Circles with D3" shows a scatter of semi-transparent colored circles on a light background, rendered as SVG elements and positioned by explicit x/y coordinates, radii, and fill colors in a JavaScript array. The code uses D3’s selection and method-chaining API (`d3.select`, `.attr`, `.data`, `.join`) to bind data to circle elements. It also demonstrates D3’s General update pattern, creating a single persistent SVG container that resizes to the parent’s dimensions, with hot reloading for interactive editing. Each circle’s radius and color are directly encoded in the dataset, offering a simple data-driven template for customization.

Loading thumbnail…

Q2

This example displays monthly temperature data as a filled area chart rendered in SVG. It uses D3’s `scaleBand`, `scaleLinear`, `area`, and `max` functions to map months and temperatures, with axes added via `axisBottom` and `axisLeft`. The area’s color is steelblue, and axis labels indicate “Month” and “Temperature (°C)”. The dataset is a static array of twelve month-temperature pairs, and the chart is generated by selecting the body and appending an 800 by 500 pixel SVG.

Loading thumbnail…

q2

This area chart visualizes the distribution of student scores against their total marks, using a dataset loaded from a GitHub gist. The chart is rendered as an SVG with a blue gradient fill beneath the line, created using d3.area and d3.linearGradient. Axes are generated with d3.axisBottom and d3.axisLeft, with labels provided for both dimensions. The implementation uses d3.scaleLinear for both x and y scales, and the data is parsed from CSV format, with the visualization built using D3 v7.

Loading thumbnail…

Q1_VT

This example shows OS market share as a pie chart, with each segment labeled by its percentage value and accompanied by a legend listing operating systems and their shares in millions. Data is loaded asynchronously from a CSV file using `d3.csv`. The chart is rendered with SVG paths generated by the `d3.pie` and `d3.arc` generators, with categorical colors assigned via `d3.scaleOrdinal`. Segment labels are positioned using `arcGenerator.centroid`, and values are formatted with `d3.format`.

Loading thumbnail…

Q1_VT

This pie chart visualizes the market share of operating systems, showing vehiclesseized values per state as proportional slice labels in thousands (e.g., “123K”). The SVG chart uses D3 v5’s `pie`, `arc` for sector geometry, and `scaleOrdinal` for color mapping, with a legend listing states. Slices are labeled via `arcGenerator.centroid`, while data loads asynchronously from a GitHub-hosted CSV using `d3.csv`. Styling includes a gradient background and customized text fills via CSS.

Loading thumbnail…

Q1_VT

This example demonstrates how VizHub integrates D3.js with modern ES6 modules to display a simple text message. The code imports the `select` function from D3 and a custom `message` string from a local module, then renders it inside a styled HTML div. It loads D3 v5 from UNPKG and uses a regular expression and a constant variable to illustrate basic JavaScript syntax. The visualization does not use any data or charting, but highlights the project’s foundational workflow of combining external libraries, local modules, and CSS for a minimal interactive setup.

Loading thumbnail…

Q1_VT

This example demonstrates how VizHub integrates D3.js with modern ES6 modules to display a simple text message. The code imports the `select` function from D3 and a custom `message` string from a local module, then renders it inside a styled HTML div. It loads D3 v5 from UNPKG and uses a regular expression and a constant variable to illustrate basic JavaScript syntax. The visualization does not use any data or charting, but highlights the project’s foundational workflow of combining external libraries, local modules, and CSS for a minimal interactive setup.

Loading thumbnail…

Q1_VT

This visualization presents a pie chart classifying grocery items by their total dollar amounts, with each slice labeled and color-coded to a legend. It uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG segments, while `scaleOrdinal` assigns colors. Data is fetched as CSV from a GitHub gist, and values are formatted with `d3.format`.

Loading thumbnail…

Q1_VT

This pie chart visualizes the distribution of video game genres based on user ratings below 5.0. The visualization loads CSV data from a GitHub Gist and renders it as a donut-style chart using D3.js. The code employs `d3.pie()` to compute arc segments, `d3.arc()` for both the outer path and inner label positioning, and `d3.scaleOrdinal()` with `d3.schemeCategory10` for color encoding. Each genre label is placed at the centroid of its corresponding arc using the `label.centroid()` transformation.

Loading thumbnail…

Question1_VT

This pie chart displays the distribution of movie ratings for films in the Documentary genre, sourced from a CSV file. The visualization uses D3 v6's pie chart API (`d3.pie`) and arc generators (`d3.arc`) to render the SVG paths, with color encoding provided by `d3.scaleOrdinal` and the `schemeCategory10` palette. The chart includes a legend positioned to the right, generated via D3’s selection and append methods. The code filters the dataset by genre, then maps rating columns into key-value pairs for the pie slices.

Loading thumbnail…

Activity6_task2

This stacked bar chart visualizes the percentage of IMDb rating levels across movie genres, revealing how genre influences audience ratings. Hovering over any bar segment displays a tooltip with the exact percentage for that rating category within the genre. The chart uses D3 v7’s `d3.stack()` to create stacked series, `d3.scaleBand()` for genre positioning, and `d3.scaleLinear()` for percentage values. Data is loaded from a CSV file and rendered as SVG rectangles with color-coded rating categories.

Loading thumbnail…

activity6_q1.1

This example displays a horizontal bar chart showing the population of various countries for the year 2000, with bars sorted by country name and green-filled rectangles representing population values. The chart uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom `AxisBottom` and `AxisLeft` components for tick labels. Data is loaded from a remote CSV file via `d3.csv`, formatted with `d3.format`, and rendered as SVG in a React app.

Loading thumbnail…

Activity6_q4

This scatterplot displays the relationship between average math and verbal SAT scores across all U.S. states in 2015. Each circle represents a state, with its position encoding test scores, its size encoding the number of test takers via a d3.scaleLinear, and its color encoding whether the state’s average math GPA is above or below 3.5 through a d3.scaleOrdinal. The visualization uses D3 v7 to render SVG elements, including axes, legends, and hover tooltips, with data loaded from a CSV file.

Loading thumbnail…

Activity6_Q9

This example presents a bubble chart visualization that displays data points as interactive circles, with hover effects that increase opacity and add a stroke. The chart is built using the D3.js version 7 library, loaded directly via UNPKG, and demonstrates importing from both the `"d3"` module and a local ES6 module named `myMessage.js`. The visualization uses SVG elements styled with CSS, where each bubble has a tooltip positioned absolutely. The code structure shows a separate HTML file loading the bubble chart script and styles, creating a clean separation between markup, styling, and JavaScript logic.

Loading thumbnail…

scatterPlot_activity6Q6

This interactive D3.js scatterplot visualizes the relationship between alcohol consumption and life expectancy across continents. The plot uses a color legend to highlight points by continent, allowing users to hover over the legend to isolate and compare specific regions. The visualization is built with React and D3 v5, rendering data from a CSV file of life expectancy statistics as SVG circles, with axes labeled Alcohol and Life Expectancy.

Loading thumbnail…

Activity6

This example demonstrates the fundamental capabilities of the VizHub platform, showing a minimal web application that renders a large, centered text message. It loads D3.js from a CDN and uses the `select` API from D3 to set the text content inside a targeted div element. The code also highlights the use of local ES6 modules, importing a `message` string from a separate file, and includes a CSS stylesheet for visual styling. The example serves as a template for combining external libraries, local modules, and custom styling in a single project.

Loading thumbnail…

Activity6_task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species indicated by different symbols and a legend. The visualization loads the data from a GitHub CSV file, parses it with `d3.csvParse`, and uses D3 v7’s `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. The code employs a `join`-based declarative grammar to build SVG elements, with a custom `shapeLegend` for symbol encoding. The plot adapts to the window size and updates dynamically as data loads.

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes the two axes, its radius scales with highway MPG, and its color distinguishes the make. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for encoding, with SVG rendering. Tooltips appear on hover via mouse events, and a legend explains both the bubble size scaling and color categories. Data comes from `bubblechart.csv`.

Loading thumbnail…

activity6_Q6

A scatter plot shows the relationship between two numeric columns from a CSV file of sales product details. The visualization uses D3.js v7 to load the data asynchronously, map values to linear scales, and render circles with an ordinal color scale based on a categorical group column. Axes and labels are generated using `d3.axisBottom` and `d3.axisLeft`, while the SVG canvas is sized and positioned via `d3.select` and `attr`.

Loading thumbnail…

activity6_Q6

This visualization demonstrates a minimal Hello VizHub template that renders a centered text message using D3.js. The page imports the `select` function from D3 and a custom ES6 module exporting a string, then sets the text content of a div element via `select('#message').text(message)`. It includes a regular expression variable and a CSS rule styling the message at 12em font size. The example uses D3 v5 loaded from UNPKG, with HTML, CSS, and JavaScript separated into individual files.

Loading thumbnail…

activity6_q3

This example presents a stacked horizontal bar chart visualizing mobile brand sales across four quarters. The data is loaded from a CSV file, and each brand’s quarterly sales are stacked to show total price contributions. The chart is rendered as an SVG using D3 v7, with axes, a title, and a color-coded legend. Hovering over a bar segment triggers a tooltip displaying the brand and its specific sales value. The visualization employs D3’s scaleBand, scaleLinear, stack, and axis functions to construct the layout and interactions.

Loading thumbnail…

Activity6_Task1

This example displays a horizontal bar chart of the 2010 populations for 20 countries, sorted by country name and rendered as SVG in a React application. The chart uses D3 v5 scales—`scaleBand` for the y-axis and `scaleLinear` for the x-axis—with data loaded via `d3.csv` from a GitHub-hosted CSV file. Bars are drawn as `rect` elements with tooltips formatted using D3’s `format` function, while the `AxisBottom` and `AxisLeft` components generate their respective tick marks and labels.

Loading thumbnail…

Activity6_task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis while encoding the species of each flower using different d3.symbol shapes (from symbolsFill). The legend, built with a custom shapeLegend function, lists species and their corresponding markers. The visualization uses D3 v7's scaleLinear for axes, scaleOrdinal for shape mapping, and d3.axisLeft/axisBottom for rendering the chart, with data loaded asynchronously from a CSV file via fetch and d3.csvParse.

Loading thumbnail…

Activity6_task3

This scatter plot visualizes the Iris dataset, mapping petal length and width along the axes while coloring each point by species (setosa, versicolor, virginica) with distinct markers. The visualization uses D3 v6 to load CSV data via `d3.csv`, apply `scaleLinear` and `extent` functions, and render SVG circles with axis labels. It includes supplementary polar coordinates via `rx` and `ry` attributes, though these do not affect the final circle rendering. The chart fills the browser window with custom tick styling and a red title.

Loading thumbnail…

Activity6_task3

This example demonstrates how to create a simple static web page using D3.js and ES6 modules. It shows a single HTML element displaying the text “Hello VizHub!” centered on the page with large font styling. The code imports the `select` function from the D3 library via ES6 `import` syntax and uses it to update the text content of a `div` element. It also imports a local module `myMessage.js` to provide the message string, while additional JavaScript includes a regular expression and a numeric variable. The page loads D3 from a CDN and uses separate CSS and JavaScript files.

Loading thumbnail…

Activity6_task3

This example demonstrates how to create a simple static web page using D3.js and ES6 modules. It shows a single HTML element displaying the text “Hello VizHub!” centered on the page with large font styling. The code imports the `select` function from the D3 library via ES6 `import` syntax and uses it to update the text content of a `div` element. It also imports a local module `myMessage.js` to provide the message string, while additional JavaScript includes a regular expression and a numeric variable. The page loads D3 from a CDN and uses separate CSS and JavaScript files.

Loading thumbnail…

task6_2

This example shows a stacked bar chart of the Iris dataset, with sepal length binned into intervals and each bar segmented by species counts. The chart uses an SVG canvas and relies on the D3 version 6 API, including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.scaleOrdinal`, and `d3.stack` to create stacked rectangles from the preprocessed data. The visualization displays three color-coded species groups across the horizontal bins, with the y-axis scaled to a fixed maximum of 30.