madipadiga.raviteja@gmail.com

Fork of Network graph

Fork of network tree

Tree structure

Fork of Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for food items, with each point colored by category using a categorical color scale. Built with D3 v6, the visualization renders as an SVG and loads data from a CSV file hosted on GitHub. The code defines linear scales for both axes, maps data values to circle positions, and applies the `d3.scaleOrdinal` color scheme with `d3.schemeCategory10` for category-based coloring.

Fork of area chart

This example displays an area chart that visualizes yearly sales data from a CSV file. It uses D3.js to load and parse the data, then builds a chart with a steelblue filled area, axes, and labels for Year and Sales. The chart is rendered as an SVG element, with scales and an area generator created via `d3.scaleLinear` and `d3.area`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Fork of Line chart

This line chart visualizes yearly sales data from a remote CSV file, mapping time on the x-axis and sales values on the y-axis. The code uses D3 v7’s `d3.csv` to load and parse data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` to generate a steelblue path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with custom formatting for years, and the SVG output is sized 800 by 400 pixels. The visualization demonstrates a clean, minimal line chart with labeled axes and no interactivity.

pie chart

This pie chart visualizes the top 10 countries by deaths from air pollution in 2022, with each slice’s area proportional to the death count. The chart renders as a circular SVG with labeled slices and a legend listing each country alongside its corresponding death figure. The code uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` to generate and color the slices, while data is loaded from a CSV via the `csv` function. Death values are formatted in thousands (e.g., “150K”) using `format()`, and both slice labels and legend values are positioned using `arcGenerator.centroid()`.

Fork of ICE - 7 Pie Chart

This pie chart visualizes the top 10 countries by deaths attributed to air pollution in 2020, using a color-coded legend and percentage-like labels. The visualization is built with D3.js v5, leveraging `d3.pie` and `d3.arc` to generate the chart’s segments, while `d3.scaleOrdinal` maps colors to data categories. Data is fetched asynchronously via `d3.csv` from a remote URL, and the SVG rendering includes interactive text labels and a legend. The chart encodes death counts in thousands, with each slice proportionally representing the data.

Fork of Reusable D3 Scatter Plot

This example demonstrates the classic Iris Dataset through an animated scatter plot that cycles through different feature combinations every two seconds. The visualization uses D3.js v6 with a reusable chart pattern, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles in SVG. The code fetches CSV data from a GitHub gist, parses numeric columns, and employs `setInterval` to dynamically update the x-axis mapping between petal width, sepal width, petal length, and sepal length. The scatter plot fills the browser window and uses a custom font from Google Fonts.

Fork of reusable Scatter Plot

This fork of the classic scatter plot visualizes the Palmer Penguins dataset, encoding each penguin as a point in a 2D space. The plot maps bill length and bill depth on the x- and y-axes, with points colored by species and shaped by sex, while the island of origin is encoded through point color intensity. The SVG-rendered chart uses a light grid, axis labels, and a legend to distinguish the three penguin species across multiple categorical dimensions. The example is built with the v3 Observable runtime and released under the MIT license.

Fork of scatter plot

This scatter plot displays the relationship between flipper length and body mass for three penguin species, with each point colored by species (skyblue for Adelie, red for Gentoo, and black for Chinstrap). It also encodes additional variables by setting the SVG circle radii and dimensions using bill length and depth, though these attributes are applied to the circle’s rx and ry properties rather than affecting visual size. The chart uses d3.csv to load the penguin dataset, d3.scaleLinear for both axes, and renders via SVG circles with axis labels and a title. Axes are generated with d3.axisLeft and d3.axisBottom, while the data parsing converts numeric fields on load.

Fork of Simple Scatter Plot

This scatter plot visualizes movie budgets against domestic gross earnings, with each circle representing a film. The chart uses D3 v6 to load CSV data and render SVG circles, with linear scales mapping budget to the x-axis and domestic gross to the y-axis. The code includes axis labels in red, a title, and interactive margins. D3’s `d3.csv` and `d3.autoType` handle data parsing, while `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` construct the visualization.

Fork of Scatter Plot - ICE 6

This scatter plot visualizes the relationship between movie budgets and domestic gross earnings, with each point representing a film. The visualization uses D3.js v6 to load CSV data from a remote URL and render circles scaled along linear axes for both variables. The chart includes a titled header, red axis labels, and axis ticks generated through D3’s axis methods. The underlying data comes from a GitHub-hosted budget dataset, and the plot is drawn as an SVG using D3 selections to bind data to circle elements. The layout fills the browser window, with margins adjusted for the title and axis labels.

Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between movie budget and domestic gross revenue, with each point representing a film. The visualization uses D3 v6 to load CSV data from a GitHub gist, scales the two variables linearly, and renders circles as SVG dots. The chart includes labeled axes, a centered title, and resizes dynamically to fit the browser window, with red axis labels and steelblue data points.

Fork of barchart

This example presents a horizontal bar chart comparing the production budgets of Indian movies. The visualization uses D3 v6 with SVG rendering, importing functions like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 module. Data is loaded from a CSV file, with budget values parsed as numbers and displayed using formatted tick labels (e.g., “55M”). The chart includes axis labels for “Movies” and “Production Budget,” plus a title, with bars filled by a linear gradient defined in the SVG.

Fork of Bar Chart - ICE 6

This horizontal bar chart displays the production budgets of Indian movies, with movie titles on the y-axis and budget values on the x-axis. Bars are rendered as SVG rectangles using D3’s `scaleLinear` and `scaleBand`, with axes formatted through `axisBottom` and `axisLeft`. The chart applies a skyblue linear gradient fill to the bars and includes custom tick text styling via CSS. The data is loaded from a CSV file using D3’s `csv` function, and the visualization is built using the D3 v6 API with an SVG rendering approach.

Fork of vizhub scatterplot

This scatter plot displays car safety ratings and selling prices for different car makes, using a dataset loaded from a CSV file. D3.js v7’s `d3.scaleLinear` maps the safety rating to the x-axis while `d3.scaleBand` positions each car make along the y-axis. The SVG rendering includes styled circles with hover effects, along with labeled axes from `d3.axisBottom` and `d3.axisLeft`. The code explicitly fetches the data with `d3.csv` and formats the numeric fields on ingestion.

Fork of vizhub scatterplot

This scatter plot displays car safety ratings against vehicle makes, with each circle representing a car model. The visualization uses a linear scale for safety ratings on the x-axis and a band scale for car makes on the y-axis, showing the distribution of safety scores across manufacturers. Built with D3.js v7, the chart loads CSV data from a GitHub-hosted dataset and renders as an SVG. The code applies a blue fill to circles, with a green hover effect highlighting individual data points, while axis labels and tick marks are styled using the Poppins font.

Fork of Simple Bar Chart

This example visualizes the production budgets of Indian films as a horizontal bar chart, using React and D3 v5. The chart reads movie titles and budget figures from a remote CSV file, mapping each movie to a bar scaled by its budget. It constructs the visualization with D3’s `scaleBand` and `scaleLinear` for positioning and sizing, and renders axes, labels, and rectangles with SVG. The code also applies CSS gradients for bar and text fills, and includes a hardcoded header unrelated to the data.

Fork of barchart

This example visualizes the relationship between vehicle type and average price, displaying aggregated price totals as horizontal bars. It shows a bar chart comparing price values across different vehicle categories. The visualization is built using React with D3 v5, specifically employing d3.csv for data loading, d3.scaleBand and d3.scaleLinear for axes scaling, and d3.axisBottom/axisLeft for axis rendering. The chart renders as an SVG with hover effects on bars, and data comes from a CSV file listing vehicle types and their corresponding prices.

Raviteja ICE-5

This example demonstrates a data summary of a CSV file listing Asia Cup cricket winners, displayed alongside a static SVG image of a face. The page loads the CSV from a GitHub Gist using D3 v7’s `d3.csv` method, then computes and displays the file’s size in kilobytes, the number of data rows, and the column count in a `<pre>` element. The rendering uses plain HTML and CSS, with a blue-colored text style, while the SVG face is embedded via an `<img>` tag. No interactive or animated charts are present; the visualization focuses solely on textual data metrics.

Fork of Fork of Flowers

A single orange flower with a green stem and two leaves grows from a brown vase against a skyblue background. Each of the flower’s eight petals and its yellow center expand from a radius of zero to full size using D3 transitions. The SVG elements are drawn with d3.select and append, with shape attributes set directly in the code, and the animation duration is set to two seconds.

Fork of Fork of Flowers with D3

This example creates a flower garden visualization where each flower’s stem height reflects a country’s score from a hardcoded array. The code uses D3 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to position bars, then draws petal circles around each flower head and adds a vase at the bottom. The visualization demonstrates how SVG shapes and D3’s data-binding can combine data-driven bar charts with decorative elements. The array can be edited to change flower heights, and the rendering approach uses manual SVG append methods rather than data joins for the flowers themselves.

Fork of Fork of Flowers

A purple flower with twelve petals grows from a green stem in a blue container, with two green leaves and a brown vase at the base. The flower, center, and stem are drawn using D3 SVG shapes, with circles for petals and center transitioning from radius zero to full size over two seconds via `transition().duration()`. The code uses D3 v7 selections, `append`, and attribute setters to construct the scene, with no external data source.

Fork of Fork of Flowers

This example draws a stylized flower in a vase on a blue background. The animation grows the flower's purple petals and yellow center from a radius of zero over two seconds via `transition().duration()`, while the green stem, leaves, and brown vase are static. The visualization uses D3.js (`d3.select` and SVG shape elements) to render all parts, with the flower's petal positions calculated using trigonometry. The composition is generated entirely in code, with no additional data source.

Fork of Cat smiley

A fork of the classic "Cat smiley" example renders a cartoon cat face with multiple SVG shapes. The visualization uses React to structure the component and d3.arc to generate paths for the cat's mouth, eyes, and ears. The face is drawn with circles, ellipses, and lines, all positioned using inline SVG attributes within a single `<svg>` element. The example demonstrates combining React's declarative rendering with D3's geometry helpers to create a static, stylized graphic on a fixed 850×455 canvas.

Fork of Flowers with D3

This example uses D3 to create a bar chart where each bar is rendered as a flower with five colored petals and a yellow center atop a green stem. The chart displays three categorical data points—Malta, Outer Space, and Netherlands—with scores from 33 to 100, controlling the y-axis height of each flower. The code imports `select`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3, and builds the visualization by appending SVG `rect` elements for stems and `circle` elements for petals positioned using trigonometry. The x-axis uses `scaleBand` to space flowers, while the y-axis uses `scaleLinear` to map scores to heights.

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

This example demonstrates a smiling elephant face drawn on an HTML5 canvas using the Fabric.js library. It shows how basic geometric shapes—rectangles, triangles, circles, and a polyline—combine to form a recognizable character. The code constructs the body, ears, eyes, and trunk by instantiating Fabric shape objects and adding them to a `fabric.Canvas` instance. Each shape is styled with fills, strokes, and positions defined in the script. The rendering uses the canvas API directly, with no external data sources or animation, focusing purely on static vector composition.