Sekharofficial2022@gmail.com

@rajasekhar2301·14 public vizzes

sekhar question 2

A D3.js area chart visualizes rating proportions across music genres, reading data from a remote CSV file. The chart uses multiple colored area series, each representing a different data column, to compare rating distributions across categories. Built with D3 v6, the visualization employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.area` to construct the paths, with `d3.schemeCategory10` providing the color palette. Axis labels and a legend clarify the genre categories and series identifiers, all rendered as SVG elements within the chart container.

Apr 12, 2024

Loading thumbnail…

sekhar question1

This example shows a pie chart of video game genres by the count of titles rated above 8.5, with a categorical color scale and a legend identifying each genre. It loads CSV data from a GitHub raw URL, converts the numeric field, and uses D3 v6’s `d3.pie` and `d3.arc` to generate SVG paths. The chart applies `d3.scaleOrdinal` with `schemeCategory10` for colors and appends a legend with colored rectangles and text labels.

Apr 12, 2024

Loading thumbnail…

sekhar que4

This bubble chart displays the correlation between sepal length, sepal width, and petal length from the classic Iris dataset. It uses D3.js v7 to render an SVG, mapping sepal length to the x-axis, sepal width to the y-axis, and petal length to bubble radius, with color distinguishing the three plant species. A tooltip, triggered by mouseover events, reveals each point’s species and specific petal length value, while a legend identifies the color coding. The chart is built by loading the CSV data via `d3.csv` and constructing scales with `d3.scaleLinear` and `d3.scaleOrdinal`.

Apr 4, 2024

Loading thumbnail…

task_4 sekhar

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across different car makes, with each bubble’s size representing fuel efficiency and color encoding the manufacturer. The visualization uses d3.v7 to render SVG circles with linear scales for axes and bubble radius, plus an ordinal color scale. Interactive tooltips appear on mouseover, and a legend displays size and color mappings. The chart reads data from a CSV file and includes animated hover effects via D3 transitions.

Apr 4, 2024

Loading thumbnail…

sekhar que3

This scatter plot visualizes a car dataset, mapping horsepower on the x-axis against highway MPG on the y-axis, with each point colored by car make. It loads CSV data via `d3.csv`, uses `scaleLinear` for both axes, and applies `scaleOrdinal` with `schemeTableau10` for categorical color encoding. Circles are rendered in an SVG canvas, with axes generated using `axisLeft` and `axisBottom`, plus a legend built from the color scale’s domain. The visualization demonstrates D3 v6 data loading, scaling, and SVG rendering.

Apr 4, 2024

Loading thumbnail…

sekhar 3.2

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each species distinguished by a different symbol and accompanied by a custom legend. The visualization dynamically loads the CSV data from a GitHub repository using `fetch` and parses it with `csvParse`. Built with D3 v7, it creates linear scales via `scaleLinear`, an ordinal scale via `scaleOrdinal`, and renders marks using the `symbol` generator, while axes and labels are constructed through custom ES6 modules. The chart updates its state through a `setState` callback, demonstrating a stateful rendering loop.

Apr 4, 2024

Loading thumbnail…

task_3 sekhar

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each of the three species (setosa, versicolor, virginica) colored distinctly (skyblue, lightgreen, orange). The visualization uses D3 v6 (d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom) to map data to SVG circles, with axes labeled and the dataset loaded via d3.csv from a GitHub raw URL. The code also references sepal measurements as attributes on the circles, though these are not visually encoded in the final rendering.

Apr 4, 2024

Loading thumbnail…

sekhar que2

This example from the VizHub gallery visualizes the percentage composition of the Iris dataset across its three species. The horizontal stacked bar chart displays each species as a bar, with segments representing the proportional measurements of sepal length, sepal width, petal length, and petal width. Built with D3 v7, the visualization uses `d3.stack()` for stacking, `d3.scaleLinear()` and `d3.scaleBand()` for axes, and includes interactive tooltips on mouseover that show precise percentage values for each segment. The data is loaded from an included CSV file.

Apr 4, 2024

Loading thumbnail…

task_2 sekhar

This chart shows the distribution of IMDb movie ratings across six genres, with each horizontal bar segmented into five rating brackets. The visualization uses diverging stacked bars to compare the proportion of films in each category, rendered as SVG rectangles scaled by percentage. The code leverages D3 v7’s `scaleOrdinal` for color mapping, `scaleBand` for the genre axis, and `stack` to compute cumulative values. Interactive tooltips display exact percentages on hover, using D3’s event handling and DOM selection.

Apr 4, 2024

Loading thumbnail…

sekhar que1.2

This interactive bar chart visualizes the 2010 population for 20 countries, with country names on the vertical axis and population values on the horizontal axis. The visualization uses React to render SVG elements, with D3's `scaleBand` and `scaleLinear` for axis scaling and D3's `csv` function to load data from a remote CSV file. The bars are green, and hovering over them shows a tooltip formatted with D3's `format` function, converting values to billions.

Apr 4, 2024

Loading thumbnail…

sekhar que1.1

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, with country names on the y-axis and formatted population values (in billions) on the x-axis. The chart uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.csv loads the data from a GitHub-hosted CSV file. Bars are colored light green, axis ticks are styled blue, and tooltips appear on hover via SVG title elements.

Apr 4, 2024

Loading thumbnail…

task_1 sekhar

This example displays a horizontal bar chart of 2020 population data for 30 countries, with country names on the y-axis and population on the x-axis. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for positioning, while `AxisBottom`, `AxisLeft`, and `Marks` components render the SVG elements. Population values are parsed from a CSV file using `d3.csv` and formatted with `d3.format` to abbreviate large numbers (e.g., "1.2B"). The chart includes custom tick styling and a labeled x-axis; hovering over a bar triggers a native tooltip showing the formatted population value.

Apr 4, 2024

Loading thumbnail…

6_buddhas

The visualization renders a dense field of randomly positioned, semi-transparent polygons overlaid with a collection of intricate SVG path elements that collectively form the silhouette of a Buddha figure. The code generates 21 nested iterations of square polygons, each with randomly computed coordinates, fills, and rotations, creating a chaotic, colorful abstract background. The Buddha shape itself is constructed from a predefined series of SVG path commands, positioned and scaled within the viewport. This React application uses ReactDOM to render the SVG output directly in the browser, with the polygon generation relying on JavaScript's `Math.random()` function for all spatial and color properties.

Apr 3, 2024

Loading thumbnail…

buddha_sekhar

This visualization displays a colorful, kaleidoscopic arrangement of overlapping diamond-shaped polygons, layered over a large hand-drawn Buddha path rendered in SVG. The polygons are generated through nested loops and positioned with random coordinates and rotations, using random RGB color values for a vibrant effect. Built with React, it uses ReactDOM to render the SVG elements directly, while the Buddha figure is a detailed path component within the same graphic. The black background and high opacity create a dense, luminous composition.

Mar 30, 2024