Jagadeshwar Reddy. Chilakamarri

@jagadesh1111·10 public vizzes

Area chart

This area chart visualizes Bitcoin prices from 2011 to 2021, showing an upward trend with fluctuations. The chart uses D3 v7 to load CSV data and render SVG paths, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The area generator (`d3.area`) with a basis curve fills the space between the line and baseline in maroon, while gridlines and axis labels clarify the year and price values.

Apr 9, 2024

Loading thumbnail…

Areachart

This visualization shows yearly Bitcoin price data as an area chart, with the shaded region representing price values over time. The x-axis displays years using a point scale, while the y-axis uses a linear scale for price. The chart is rendered as SVG using D3 v5, employing `scalePoint`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft`. Data is loaded from a CSV file via `d3.csv`, and grid lines extend across the plot area via tick sizes.

Apr 9, 2024

Loading thumbnail…

AreaChart

This area chart visualizes Bitcoin prices over time using a dataset loaded via `d3.csv` from a GitHub gist. The code parses the CSV, then uses `d3.scaleLinear` for both axes and `d3.area` to generate the filled path beneath the line. A linear gradient, defined with `linearGradient` and `stop` elements, transitions the fill from semi-transparent steelblue to transparent, enhancing the visual depth. Axis labels are added manually, and the chart is rendered as an SVG within a styled container.

Apr 8, 2024

Loading thumbnail…

Area chart

This area chart displays the relationship between age and weight, using a dataset loaded from a raw CSV file hosted on GitHub. The data is parsed, sorted by age, and rendered as a filled area plot within an SVG canvas. The visualization is built with D3.js v7, employing `d3.text` to fetch the data, `d3.scaleLinear` for axis scaling, `d3.area` to generate the area path, and `d3.axisBottom` and `d3.axisLeft` for labeled axes, with a steelblue fill and a clear title.

Apr 8, 2024

Loading thumbnail…

pie chart

A pie chart displays the distribution of counts across payment categories, with each slice labeled and colored distinctly. The chart is rendered on an HTML5 Canvas element using the Chart.js library, which fetches its data from a remote CSV file hosted on GitHub Gist. The JavaScript code parses the CSV rows to extract category labels and numeric values, then constructs the pie chart with a custom tooltip callback that calculates and displays each slice's percentage of the total.

Apr 8, 2024

Loading thumbnail…

4-Bubble_chart

This bubble chart visualizes the correlation between birthrate, life expectancy, and GDP across fourteen countries, using a D3.js SVG rendering with animated transitions. GDP scales bubble radius, while life expectancy and birthrate map to the x- and y-axes, with colors assigned via a turbo color scale. A tooltip displays each country’s name on hover, and a legend shows GDP values and country color keys. The chart uses D3’s CSV loader and linear scales, with data from the included CSV file.

Apr 5, 2024

Loading thumbnail…

1

This stacked bar chart visualizes the distribution of grade ranges (from 5.0-6.0 to above 9.0) across six student groups, showing how each grade category contributes to a total of 100% per student. The chart uses d3.stack() to create stacked segments, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Hovering over a segment triggers a tooltip displaying the exact percentage for that grade range within the selected student group. Data is loaded from a CSV file and rendered as SVG elements.

Apr 4, 2024

Loading thumbnail…

Fork of IMDb Movie ratings

The chart displays the percentage distribution of IMDb rating levels across six movie genres, using a stacked bar chart where each genre's bar sums to 100%. Hovering over a bar segment reveals the exact percentage for that rating category via a custom tooltip. Built with D3.js v7, the visualization uses `d3.stack` for horizontal stacking, `d3.scaleOrdinal` for color mapping, and an SVG canvas. Data is loaded from an external CSV file and rendered with axis labels, a legend, and interactive mouse events.

Apr 4, 2024

Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses d3.stack to compute the stacked segments and d3.scaleOrdinal with a custom color palette to differentiate rating levels. Hovering over a segment triggers a tooltip displaying the exact percentage for that rating category within the genre. The chart renders as SVG with axes created using d3.axisBottom and d3.axisLeft, reading data from an external CSV file.

Apr 4, 2024

Loading thumbnail…

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

An overlapping Buddha image is rendered as a collection of colorful, semi-transparent circular elements scattered across a large SVG canvas. The visualization uses React to generate and position numerous overlapping shapes, with each circle assigned a random color and opacity. The Buddha’s outline is drawn using SVG path data, and the entire scene is set against a floral background image. The code leverages React and ReactDOM to build the interactive interface, with random values controlling element placement and styling.

Apr 3, 2024