pmbhupathibalu@gmail.com

Fork of MBB - Q8.1

Fork of MBB Q8.2

Fork of MBB Q8.2

Fork of Fork of HTML Starter

Fork of MBB_8.2

Fork of fork 8.2

Fork of Social Network Graph --> ICE-8

Fork of Tree Graph

Fork of CSV Dataset Template - Penguins

Fork of Fork of Circles with D3

This example visualizes the relationship between state-level data from 2020 and 2024 using a reusable scatter plot built with D3 v6. It shows how individual data points map from the x-axis (2020 values) to the y-axis (2024 values) through a clean SVG rendering. The code employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 to compute scales and draw axes, while circles are joined to data via `selection.selectAll('circle').data().join()`. The underlying dataset is loaded as CSV from a remote URL, and the chart adapts to the viewport size.

Fork of Menu with D3

The visualization displays revenue by state from 2020 to 2024 as overlapping semi-transparent area charts, with a color-coded legend identifying ten selected Indian states. Built with D3 v7, the code loads CSV data via `d3.text`, filters for specified states, and renders SVG paths using a custom `d3.area()` helper. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while categorical colors come from `d3.scaleOrdinal(d3.schemeCategory10)`. The chart includes labeled axes for year and revenue (USD) plus a title.

Pie chart-Mahesh-ICE 7

This pie chart visualizes Amazon’s 2022 revenue by state, showing each state’s proportional share of total revenue. The chart uses D3 v5’s `pie()` and `arc()` generators to compute and render SVG slices, with a legend on the right listing states and their revenue values. The code fetches data from a CSV file via `csv()` and colors each slice using `scaleOrdinal`. Text labels display revenue in thousands (e.g., “12.34K”), formatted with D3’s `format()`. The visualization is rendered entirely with SVG, and the legend includes both state names and corresponding revenue amounts.

Reusable Scatter Plot-Mahesh -ICE 7

This responsive scatter plot visualizes state-level revenue data across four years (2020–2023), initially mapping 2023 revenue to the x-axis and 2020 revenue to the y-axis. The visualization animates every second, cycling through yearly columns while switching between D3 symbol types (circle, cross, diamond, square, star, triangle, wye). Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and the `symbol()` API to render SVG paths. Data loads from a CSV file, and the reusable `scatterPlot` function supports configurable dimensions, margins, and radius.

Fork of Fork of Rahul-scatter

This example visualizes car sales across three years (2019–2021) as a responsive scatter plot, comparing 2021 sales on the x-axis against 2019 sales on the y-axis. The plot cycles through each year’s sales data every two seconds, updating the x-axis scale and circle positions accordingly. Using D3 v6, the code builds SVG circles and axes with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a remote CSV via `d3.csv` and parsed with custom row logic. The visualization dynamically resizes to 80% of the viewport dimensions, with circles styled via the `join` pattern and animated through repeated `setInterval` calls.

Area Chart - Mahesh - ICE7

This area chart displays revenue trends for five U.S. states—California, New York, Texas, Florida, and Illinois—from 2020 to 2023, with each state represented by a colored, semi-transparent filled area. The visualization uses D3.js v7 to parse a text file of comma-separated values, filter for the selected states, and render the chart as SVG. It employs linear scales for the x- and y-axes, an area generator with a linear curve, and ordinal color scaling via `d3.scaleOrdinal` with `d3.schemeCategory10`. The code explicitly draws axes, a legend, and a title, with data loaded asynchronously using `d3.text`.

Line chart - Mahesh - ICE7

This line chart visualizes revenue trends for five selected states—California, New York, Texas, Florida, and Illinois—from 2020 to 2023. It uses D3.js v7 to load comma-separated text data, parse it, and render an SVG with a multi-line chart. The code applies `d3.scaleLinear` for axes, `d3.line` with `d3.curveLinear` for path generation, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with a legend and title included.

Fork of Reusable D3 Scatter Plot - MBB

This example visualizes the Iris dataset as an animated scatter plot, cycling through four chemical attributes—citric acid, sulphates, residual sugar, and alcohol—on the x-axis while keeping citric acid fixed on the y-axis. It shows how different feature pairs correlate across the dataset’s samples. The visualization uses D3.js v6 with `scaleLinear` and `extent` for scales, `axisLeft` and `axisBottom` for axes, and a reusable chart pattern via `scatterPlot()`. A `setInterval` triggers updates every two seconds, rebinding the x-value accessor and redrawing the SVG circles to animate the transitions.

Fork MBB - Pie chart

This pie chart visualizes annual car sales across different Indian states, sourced from a CSV file hosted on GitHub. Using D3 v5, the code employs the `pie` function to compute arc segments and `scaleOrdinal` to assign distinct colors to each state. Sales values are formatted with `format` and displayed as labels in thousands, alongside a legend detailing state names and corresponding figures. The SVG output is rendered at 960x500 pixels.

Fork of Pie Chart MBB

This pie chart displays 2022 US auto sales by brand, using a color-coded circle with an adjacent legend. The visualization loads CSV data from a GitHub gist via `getData` and renders with D3 v5’s `pie` and `arc` generators. Each slice’s fill uses `scaleOrdinal` with a custom color palette. The legend lists brands with their percentage share and sales volume in thousands, formatted using `format('.4~g')`. The SVG is centered on the page with a title, and all elements are drawn as SVG paths and text.

Fork of ICE6.2 MBB

This example visualizes the relationship between residual sugar and citric acid in wine samples, with each point colored by wine quality category. It uses D3 v6 to load CSV data, create linear scales, and render circles in an SVG canvas. The code applies `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and maps quality values to colors using a switch statement. The dataset is fetched from a remote CSV URL, and the visualization fills the full browser window with margins for labels.

Fork of MBB

This bar chart visualizes anime ratings versus scores from an ICE 5 dataset, loaded from a CSV file using D3.js v6. It displays the data as vertical bars with steelblue fills, where hovering highlights bars in yellow and reveals a tooltip showing the title and salary. The visualization uses D3 scales, axes, and SVG rendering within a React framework, with axis labels and a chart title included. The dataset is fetched via `d3.text` and parsed into JavaScript objects for binding to the bar elements.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable D3 scatter plot that visualizes the Iris dataset, with a cycle of different x-axis dimensions—petal width, sepal width, petal length, and sepal length—while the y-axis remains fixed on sepal length. The visualization animates every two seconds, switching the x-value mapping to reveal different correlations in the data. Built with D3 v6, it uses scaleLinear, extent, axisLeft, axisBottom, and data joins to render SVG circles and axes. The plot is configured via a custom scatterPlot function with setters for width, height, margin, and radius, and the data is loaded from a CSV file.

fork test for MBB

This interactive scatter plot visualizes the Iris flower dataset, allowing users to compare any two of its four measurements (sepal length, sepal width, petal length, petal width) via dropdown menus. Points are color-coded by species and animate smoothly to new positions when the axis selection changes. Built with D3 v7, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the plot, while `transition().duration(2000)` animates the circles. Data is loaded from a CSV file using `d3.csv`, and SVG is used for rendering.

Fork of Anime Bar Chart

This bar chart displays the top 10 most populous countries as of January 1, 2024, using a horizontal bar layout where each bar’s length represents total population in thousands. The visualization uses D3’s `scaleBand` and `scaleLinear` to map country names and population values, with axes drawn via `axisLeft` and custom `xAxis`/`yAxis` helpers. It filters the UN population estimates dataset for country-type entries, sorts them in descending order, and renders the top ten. The chart includes labeled axes, a grey inner rectangle for focus, and styled bars via `rect.mark` elements.

Animation_Data

This example loads a CSV file of CSS named colors and displays a text summary of the dataset, including file size, row count, and column count. The page also features decorative SVG illustrations of an eye and a smiling face. It uses d3.v7's `d3.csv` to fetch and parse the data from a remote GitHub Gist URL. The rendering is done with SVG elements defined directly in the HTML, while the summary is injected into a `<pre>` block using vanilla JavaScript. The design employs a maroon background and black text for contrast.

Fork of Circles with D3

This example shows a simple cat illustration built from circles, lines, and a path, rendered on a pink background using D3. The visualization uses a static dataset of geometric features—such as the body, head, eyes, ears, nose, smiling mouth, moustache, legs, tail, and arms—each defined by coordinates and styling properties. The code selects the container, appends an SVG element, and binds the data using `selectAll` with `join` to draw circles for rounded parts, lines for limbs and tail, and a path for the mouth. This approach demonstrates how D3’s data-joining methods can compose a recognizable figure from primitive shapes without any animation or interaction.

Cat Diagram

Using D3 select and join, this example renders a simple owl illustration with circles and lines. It builds the bird’s body, head, eyes, ears, beak, legs, tail, and wings from hard-coded coordinates relative to the container’s size, coloring the sky light blue and the owl brown on a yellow-eyed face. All shapes are created procedurally with D3’s `selectAll` and `join` methods, filtering the feature array by property type to draw either circles or lines.

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

This example creates an animated smiley face using D3.js v3, demonstrating fundamental DOM manipulation with SVG elements. The code builds a yellow circle with eyes, eyebrows, and an arc-shaped mouth, then animates the eyebrows through a looping vertical transition. It uses D3’s `select` to append SVG shapes and the `arc` generator for the mouth path, with `transition().duration()` driving the eyebrow movement. The face is centered via a translated group, and the animation runs continuously in the browser.

Fork of Buddha

Eleven colored circles emerge from zero and expand to a fixed radius over a black background, arranged according to static x/y coordinates from a CSV file. The animation uses D3 transitions with staggered delays to create a sequential bloom effect, while CSS mix-blend-mode screen blends overlapping circles into luminous composites. The data includes explicit fill colors and radius values, though the code overrides individual radii with a constant value during animation.