shreyasribearelly@gmail.com

d3 Heatmap

Heart Disease Distribution

Fork of Fork of Fork of ICE-7 (Part-2) - Pie Chart

Fork of Bubble chart

Fork of Network Graph

Fork of heatmap

Fork of Goals Scatter Plot with Hover

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This example displays a scatter plot of Iris flower data, with each point colored by species: blue for setosa, red for versicolor, and yellow for virginica. It uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal measurements to coordinates and render axes, while circles are drawn via selection joins with `.attr` for positioning and styling. The plot is built as a reusable function with configurable width, height, margin, and radius, and appears on a black background with white axis labels.

Fork of Interactive Stacked Bar Chart

Fork of Circles with D3

Fork of Interactive 3D Bar chart

Fork of Interactive Stacked Bar Chart

Project

Fork of world map

Fork of Tree Structure

Fork of specific map

Fork of D3 Starter Area chart ICE-7

This area chart shows household monthly expenses over time within a D3.js SVG. The code loads a CSV dataset and uses D3 v5 APIs like `scaleTime` and `scaleLinear` for axes, along with `line` and `area` generators with `curveBasis` smoothing. Styling includes a lime-colored semi-transparent area and blue line, with formatted tick labels for both axes. The visualization renders an interactive, static SVG with axis labels for “Months” and “Expenses.”

Fork of D3 Starter Line Chart ICE-7

This line chart visualizes monthly household spending using React and D3 v7, with data loaded from a CSV via `d3.csv`. The chart uses `scaleTime` and `scaleLinear` for the axes, and `d3.line` with `curveBasis` to render a smooth spending trend. Axis ticks are custom-drawn as SVG elements, with gold lines and blue text, while the line itself appears in red. The graph includes labeled axes for months and expenses, and was built as an ICE-7 assignment fork.

Fork of D3 Starter PIE chart ICE-7

This example shows household spending distribution across ten categories using a pie chart, with each slice labeled by its amount in thousands and accompanied by a legend that pairs category names with values. The visualization loads data from a CSV file hosted on GitHub and renders the chart as SVG. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format`, along with async/await to fetch the dataset before generating the pie segments, value labels, and legend.

Fork of Pie Chart

A donut chart depicts student counts by major at UNT, using data fetched from a remote CSV via `d3.csv`. The visualization employs `d3.pie` and `d3.arc` to generate the ring segments, with `d3.scaleOrdinal` assigning colors from a predefined array, and labels formatted using `d3.format`. A legend, positioned via SVG grouping, clarifies each major and its corresponding value. The chart is rendered as an SVG element, with styling defined in the accompanying CSS file.

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays tree measurements—leaf width, trunk diameter, leaf length, and height—as colored circles, with species mapped to blue, red, green, or yellow. Built with D3 v6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. Every two seconds, the plot cycles the x-axis variable among the four measurement columns, animating the data points’ positions. The data is loaded from a CSV file via `d3.csv` and parses numeric fields before plotting.

ICE-6 Marks and Channels

This visualization is a horizontal bar chart that displays the length of RGB hex values for various CSS keywords, with each bar colored according to its CSS specification level (e.g., Level 1, 2, 3) using a predefined color mapping. The chart uses React for rendering and D3.js functions `scaleBand`, `scaleLinear`, and `max` to compute the scales and domain from a CSV file loaded via `d3.csv`. The bars are drawn as SVG rectangles, and axes are generated with custom ticks and labels.

ICE06 2 part

This scatter plot visualizes the relationship between trunk diameter and height for three tree species—Maple, Oak, and Pine—using a CSV dataset. The chart encodes species through colored circles (green, brown, darkgreen) with a legend, while axes display height on the y-axis and trunk diameter on the x-axis. The visualization uses D3 v5 to load and parse the data, create linear scales with `scaleLinear`, and render SVG circles via `selectAll` and `join`. Axis labels and titles are added using `axisLeft` and `axisBottom`, with styling applied through CSS classes.

scatter plot ice-6

This scatter plot visualizes the Iris dataset, mapping each flower’s specification values along the y-axis against keyword values on the x-axis, with points colored by CSS level categories (turquoise, orange, violet). The D3 v5 code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear`, and renders SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. A custom legend distinguishes the three CSS level groups, while axis titles and tick styling are applied through D3 selections.

Fork of Scatter Plot for Iris dataset

This visualization displays the distribution of colors from the ICE6 dataset, plotting each color’s red value on the x-axis against its green value on the y-axis. Each point is filled with the exact RGB color it represents, creating a direct visual correlation between position and hue. The code uses D3.js v6’s `csv` loader, `scaleLinear`, `axisBottom`, and `axisLeft` to parse the data and render axes, while SVG circles are positioned via the `cx` and `cy` attributes. The dataset is fetched from a remote CSV URL, and the axes are labeled "Red Value" and "Green Value" to clarify the mapping.

Fork of Task2 ICE6 Scatter Plot

This scatter plot displays the relationship between petal length and sepal length for a dataset of iris flowers. It renders circles using SVG via D3 v6, with scales created by `scaleLinear` and axes generated by `axisLeft` and `axisBottom`. The data is loaded as CSV using `d3.csv` and parsed with numeric coercion. Axis labels and a custom margin layout clarify the plot, while the visualization fills the entire browser window using `window.innerWidth` and `window.innerHeight`.

Data viz 5

This example displays a collection of simple SVG flower and polygon shapes, each filled with a named color like Atomic Tangerine or Kelly Green. The visuals are defined directly in HTML, with each shape’s size, position, and fill color set through SVG attributes. The page uses the D3.js library to load a CSV file from a GitHub gist, though the processing of that data is not shown. React is used as the framework, with the entire visualization rendered as static SVG elements.

Fork of ICE-5: Welcome to ICE-5 Data visualization

This example displays a simple data summary for the top 100 actors, presenting a message with the dataset’s size in kilobytes, row count, and column count. It uses the D3.js v7 library via `d3.csv` to load a remote CSV file and `d3.csvFormat` to calculate its textual length, while `textContent` updates the message container. The page also embeds a static SVG image, with styled headings and a large `<pre>` element for the output.

Fork of flower to multiple flowers ICE-4

This example displays a field of stylized ranunculus flowers arranged in a grid, each with layered petals, stems, leaves, and a shadow, rendered as SVG elements using React components. A blue background and five randomly positioned butterflies add a simple scene. The code builds the flowers with React’s JSX, using arrays to generate petal variations, while D3 v7 is loaded but not actively used in the visualization. The rendering approach relies entirely on React’s declarative SVG output.

Fork of Fork of Flowers

This visualization presents a stylized landscape where three trees grow from the ground, each adorned with a simple green circular canopy and pink flowers distributed around its top. The scene is set against a blue background, with brown trunks and simplified ranunculus blooms. The code uses the `select` function from D3 to manage the SVG container, then appends `rect` and `circle` elements to construct the trunks, leaves, and flowers. The algorithm positions each flower based on a calculated angle and distance from the tree center, using the JavaScript `Math` functions for trigonometry.