likhithakarunakarreddym@gmail.com

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble’s position on the x- and y-axes encoding horsepower and torque, its radius scaling with highway MPG, and its color mapping to the manufacturer. Built with D3 v7, the SVG renders circles with a linear scale for size, an ordinal color scale using `d3.interpolateTurbo`, and interactive tooltips that appear on mouseover. A legend explains the MPG radius scale, while color-coded dots identify each make.

Fork of Fork of Scatter Plot with Shape

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 D3 v7 scales. Each species is distinguished by a unique symbol from `d3.symbolsFill`, such as circles or triangles, through an ordinal scale. The visualization includes labeled axes and a custom shape legend built with D3’s `symbol` generator. Data is loaded via `fetch` and parsed with `d3.csvParse`, then rendered inside an SVG using modular functions for axes, plotting, and the legend.

Fork of IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb ratings across movie genres, with each bar segment representing the percentage of ratings within five score ranges. Hovering over a segment reveals the exact percentage via an HTML tooltip. The visualization uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to generate the SVG bars, axes, and legend. Data is loaded from a CSV file using `d3.csv`, and the chart includes interactive mouseover and mouseout events for tooltip display.

Fork of Activity 7

This chart displays the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` to map data to positions, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are loaded from a CSV file and formatted with D3’s `format` function, converting billions to a readable "B" suffix. The chart includes a labeled x-axis and blue tick lines, with a green fill for each bar.

Fork of Activity 7 Scatter Plot

Fork of Bubble chart

Fork of IMDb Movie ratings

This visualization displays the COVID-19 infection rates across various regions and countries. Using a bar chart rendered via SVG, it maps each geographic area to a proportional bar height, with the y-axis representing the infection rate as a fraction. The code employs d3.scaleBand and d3.scaleLinear to position the bars and scales the data, while d3.axisBottom and d3.axisLeft generate the labeled axes. Hovering over a bar changes its color to orange, providing an interactive highlight. The dataset is embedded directly in the script as an array of objects.

Fork of Fork of Hello VizHub

This example shows a scatter plot of global road accidents from 2015 to 2020, with each circle representing a year’s accident count and colored by accident severity (green, orange, red for Low, Medium, High). The plot uses D3 v6 to load a CSV file via `d3.csv`, then builds an SVG with linear scales for the x- and y-axes (`d3.scaleLinear`), ordinal color mapping (`d3.scaleOrdinal`), and axis generators (`d3.axisBottom`, `d3.axisLeft`). Circles are appended and positioned using the scales, with a legend added manually alongside the axes. The data source is a global road accident CSV, and rendering is entirely SVG-based.

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered in the page. It shows how to import D3 API functions, specifically `select`, and combine them with local ES6 modules, as seen in the custom `myMessage.js` file. The code also includes unused declarations like a constant and a regular expression. Rendering relies on D3’s `select` to set the text content of the `#message` div, with styling provided by an external CSS file, all loaded via a standard HTML page.

Accident Data

This scatter plot visualizes accident data, encoding accident count on the x-axis and categorical severity (High, Medium, Low) on the y-axis using numeric mapping (3, 2, 1). The SVG rendering uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` to map severity levels to red, orange, and green fills. The chart loads data from a local `accidents.csv` file, with custom axis labels for severity and count.

Fork of Hello VizHub

This horizontal bar chart displays the population of ten countries for the year 2000, sourced from a CSV file via `d3.csv`. The visualization uses React to render an SVG, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis, formatted using `d3.format`. The chart highlights the `d3.axisBottom` and `d3.axisLeft` components, with tooltips showing values on hover.

Fork of Hello VizHub

This visualization displays the population of 20 countries in 2010 as a horizontal bar chart. Using React and D3 version 5, the code fetches CSV data and processes it with `d3.csv`, then renders SVG rectangles with scales from `d3.scaleBand` and `d3.scaleLinear`. Custom AxisBottom and AxisLeft components generate tick marks and labels, while `d3.format` abbreviates population values. The chart loads data from a GitHub-hosted CSV file, with bars colored yellow and blue tick lines.

Fork of Fork of Hello VizHub

This example presents a horizontal bar chart of the top 20 countries by 2010 population, using D3 version 5 within a React framework and rendered as SVG. The visualization maps country names to the y-axis and population values to the x-axis, with bars colored yellow and axis ticks styled in blue. The code constructs scales with `d3.scaleBand` and `d3.scaleLinear`, formats tick labels with `d3.format`, and organizes chart components into separate modules for the x-axis, y-axis, and data marks. Population data is loaded from a remote CSV via `d3.csv`.

Fork of Fork of Hello VizHub

This example presents a horizontal bar chart of the top 20 countries by 2010 population, using D3 version 5 within a React framework and rendered as SVG. The visualization maps country names to the y-axis and population values to the x-axis, with bars colored yellow and axis ticks styled in blue. The code constructs scales with `d3.scaleBand` and `d3.scaleLinear`, formats tick labels with `d3.format`, and organizes chart components into separate modules for the x-axis, y-axis, and data marks. Population data is loaded from a remote CSV via `d3.csv`.

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

A dense scatter of small circles overlaps a line-drawn Buddha silhouette, with both elements rendered in a multicolored, semitransparent palette against a black background. The circles are generated through nested array maps in React, using `Math.random` for position and RGB fill values. The Buddha path is drawn as an SVG `<path>` element, scaled and translated within a `<g>` group, using React's declarative component structure with `react` and `react-dom`.

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

A dense scatter of small circles overlaps a line-drawn Buddha silhouette, with both elements rendered in a multicolored, semitransparent palette against a black background. The circles are generated through nested array maps in React, using `Math.random` for position and RGB fill values. The Buddha path is drawn as an SVG `<path>` element, scaled and translated within a `<g>` group, using React's declarative component structure with `react` and `react-dom`.

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

A grid of six small SVG visualizations, each titled "Buddha in colors," displays overlapping golden circles on a black background, with numbered labels from one to six. The example uses D3.js v6 to select a container, bind an array of integers, append SVG elements, and draw the circles and text. React 16.10.0 scripts are loaded in the HTML, though the visualization logic is handled entirely by D3. The layout is defined with CSS Grid, creating a three-column arrangement of the identical placeholder graphics.

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

This example renders a black-background visualization of overlapping Buddha path outlines in vibrant colors, generated from hardcoded SVG path data. The scene overlays multiple semi-transparent colored circles at random positions, combined with three nested `A.map` iterations that create dense, layered patterns. Built with React and rendered as SVG, the visualization uses ReactDOM to mount the component, with styling applied via inline CSS. Randomly generated RGB values and opacity settings produce the colorful, chaotic aesthetic over the central Buddha figure.

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

This example renders a black-background visualization of overlapping Buddha path outlines in vibrant colors, generated from hardcoded SVG path data. The scene overlays multiple semi-transparent colored circles at random positions, combined with three nested `A.map` iterations that create dense, layered patterns. Built with React and rendered as SVG, the visualization uses ReactDOM to mount the component, with styling applied via inline CSS. Randomly generated RGB values and opacity settings produce the colorful, chaotic aesthetic over the central Buddha figure.

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

This example renders a black-background visualization of overlapping Buddha path outlines in vibrant colors, generated from hardcoded SVG path data. The scene overlays multiple semi-transparent colored circles at random positions, combined with three nested `A.map` iterations that create dense, layered patterns. Built with React and rendered as SVG, the visualization uses ReactDOM to mount the component, with styling applied via inline CSS. Randomly generated RGB values and opacity settings produce the colorful, chaotic aesthetic over the central Buddha figure.

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

This example renders a black-background visualization of overlapping Buddha path outlines in vibrant colors, generated from hardcoded SVG path data. The scene overlays multiple semi-transparent colored circles at random positions, combined with three nested `A.map` iterations that create dense, layered patterns. Built with React and rendered as SVG, the visualization uses ReactDOM to mount the component, with styling applied via inline CSS. Randomly generated RGB values and opacity settings produce the colorful, chaotic aesthetic over the central Buddha figure.

Fork of Hello VizHub

This example displays a "Hello VizHub!" message centered on the page. It demonstrates loading D3 via a CDN and using the `select` function from d3.v5 to set the text content of a div. The code also imports a local ES6 module for the message and fetches population data from a GitHub-hosted CSV, processing the ’20 column and slicing the first 30 rows. The visualization is built with React’s `useState` and `useEffect` hooks to manage the data loading state.

Fork of Fork of 6 Buddha

This visualization displays a stylized, overlapping Buddha face rendered in SVG, built with React and ReactDOM. The composition layers multiple semi-transparent, randomly colored shapes atop a primary vector path that outlines the Buddha figure, creating a colorful, chaotic collage effect. The code uses array mapping to generate the random overlay elements, while the main image relies on an inline SVG path. A background image of flowers is set via CSS, and the entire piece is presented within a fixed 1000x1000 viewport.

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

A dense, overlapping field of randomly generated polygons creates a colorful, abstract composition, with a large Buddha silhouette rendered as a detailed SVG path layered over the chaos. The polygons, each with randomized positions, colors, and rotations, are generated using nested `Array.map` loops and React. The Buddha path is drawn with an inline `d` attribute, while the entire scene is rendered into an SVG using React components and ReactDOM.