koppulasudhakar03@gmail.com

@koppulasudhakar03·15 public vizzes

multi

This layered scatterplot visualizes the relationship between fertility, life expectancy, and population for different clusters by country and year. The visualization uses two overlaid circle layers rendered with Vega-Lite and embedded via `vegaEmbed`. A base layer displays hollow gray circles of varying sizes to show a population size legend, while a main layer encodes cluster membership through the stroke color of additional hollow circles. The chart reads from an external `data.json` file loaded using `d3.json`.

Nov 10, 2025

Loading thumbnail…

Fork of CV: Pseudo Scatter Plot

This dashboard presents a collection of agricultural production charts for the world's top countries, using a multi-page website format. It includes an area chart showing production contributions over time, a bar chart comparing output across countries and products, and a line chart depicting yearly production trends. The site is built with Vue and features a Tailwind CSS-based interface, with navigation managed through JavaScript to load different chart views. Each chart is presented as a static PNG image with accompanying descriptive text within the dark-themed interface.

Nov 10, 2025

Loading thumbnail…

visualizing map

This interactive network visualizes agricultural metrics across ten countries for 2020, showing relationships between a central hub and country nodes with satellite metric nodes for land percentage, crop yield, fertilizer use, and GDP contribution. Node size encodes agricultural land percentage while link width reflects agriculture GDP share. The visualization uses d3.forceSimulation with draggable SVG nodes, and data is embedded directly from a CSV file containing country-level farming statistics.

Nov 2, 2025

Loading thumbnail…

trees and networks

A hierarchical tree visualization displays 2020 agricultural metrics for ten countries, with each country node branching into four leaf nodes showing agricultural land percentage, crop yield, fertilizer use, and agriculture GDP share. The root, country, and metric nodes use different shapes and colors, with country-specific hues propagated to their child metrics for visual grouping. Using d3.hierarchy and d3.tree, the layout positions nodes, while d3.linkHorizontal draws the connecting paths. Data comes from the agriculture_farming_by_country.csv file, rendered as SVG elements with colors assigned from a predefined palette.

Nov 2, 2025

Loading thumbnail…

maps

This choropleth map visualizes agricultural land percentage by country for 2020, using a color-coded world atlas to compare values across nations. The visualization loads GeoJSON country boundaries via `d3.json` and `topojson.feature`, then applies a sequential color scale mapped to the `AgriculturalLandPercent` metric from a CSV dataset. Hovering highlights individual countries and displays a tooltip with detailed agricultural statistics. A legend on the right provides the color-to-value scale, while `d3.format` handles numeric display formatting.

Nov 2, 2025

Loading thumbnail…

Fork of area chart

This fork of an area chart visualizes agricultural land percentage across ten countries using data from a CSV file. It encodes each country as a categorical band on the x-axis with a filled polygon drawn by `d3.area()`. The y-axis uses a linear scale to map values, and `d3.scaleBand()` positions the countries. The SVG rendering includes rotated x-axis labels, grid-free axes via `d3.axisBottom()` and `d3.axisLeft()`, and annotations for country, percentage, and title. The lightgreen fill with darkgreen stroke highlights the distribution from Nigeria's 77.4% to Japan's 12.3%.

Oct 25, 2025

Loading thumbnail…

Fork of line chart

This line chart displays fertilizer use per hectare for ten countries, using a green line and dark green circles positioned along a horizontal axis of country names. The y-axis maps fertilizer values from zero to the dataset’s maximum. The code loads data from a CSV file via `d3.csv`, sorts records, and renders the visualization with D3 v7’s `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` in SVG. Axis labels and rotated tick text are added using `d3.axisBottom` and `d3.axisLeft`. Circle elements include `title` tooltips showing country and value.

Oct 25, 2025

Loading thumbnail…

Fork of pie chart

A fork of a pie chart visualizes the share of agriculture in GDP for ten countries from a local CSV file. Each slice’s angle encodes the percentage value, with hover effects increasing slice opacity. The visualization uses D3.js v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme. Country labels are positioned at slice centroids, and a legend clarifies the mapping between colors and country names with their percentages.

Oct 25, 2025

Loading thumbnail…

Fork of Fork of ice-7 sushmithab pie chart

This pie chart visualizes the distribution of total points accumulated by IPL teams from 2015 to 2024. It displays each team's slice with its percentage label directly on the arc, alongside a legend showing team names, raw point totals, and percentages. The visualization loads data from a remote CSV file using `d3.csv`, aggregates points per team, and renders the pie chart as SVG using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a Tableau10 color scheme.

Oct 25, 2025

Loading thumbnail…

Fork of ice-7 sushmithab pie chart

This pie chart visualizes the distribution of total points earned by IPL teams from 2015–2024, using data loaded via `d3.csv` from a GitHub gist. D3 v7’s `d3.pie` and `d3.arc` generate the SVG slices, labeled with each team’s percentage. A `d3.scaleOrdinal` with `d3.schemeTableau10` assigns colors, and a custom legend lists each team’s points and share. The chart updates dynamically when new CSV data is parsed, with slices and legend rendered inside a single SVG container.

Oct 25, 2025

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between fertilizer use and crop yield for ten countries, using data from a CSV file. Each circle represents a country, with its position determined by the `d3.scaleLinear` axes and its color assigned by `d3.scaleOrdinal` with the `d3.schemeSet2` palette. The circles animate into view using `transition()` with staggered delays, and hovering reveals a tooltip via `d3.select` and `tooltip.html`, while also highlighting the selected point with a stroke.

Oct 25, 2025

Loading thumbnail…

multi series chart

This multi-series chart displays both the total registered vehicle counts and the corresponding survey years for ten countries. Animated blue bars represent vehicle registrations on the left axis, while a red Catmull-Rom smoothed line overlays the year on the right axis. The visualization uses D3 v7 with SVG, featuring a staggered drawing effect via stroke-dashoffset. Data is loaded from a CSV file, with gridlines and dual axes aiding comparison.

Oct 20, 2025

Loading thumbnail…

scatter plot

This scatter plot shows the number of registered vehicles for ten countries versus their reporting year. Each circle represents a country, with hover interactions revealing the specific country name, vehicle count, and year. The visualization uses D3 v7’s `scaleLinear` for both axes, `d3.extent` for the x-domain, and `d3.axisBottom`/`axisLeft` for ticks. Data is loaded from a CSV file and rendered as SVG circles with white strokes.

Oct 19, 2025

Loading thumbnail…

Fork of D3 Starter

This visualization displays the number of registered vehicles per country as a horizontal bar chart, using a quantitative x-axis and categorical y-axis. The data comes from a CSV file listing ten nations with varying reference years. Built with React and D3 v5, the component loads the CSV using `d3.csv`, then maps values to scales using `scaleLinear` and `scaleBand`. Bars are rendered as SVG `<rect>` elements, while axes are constructed manually via `xLinear.ticks()` and D3’s `format` function, avoiding the built-in axis components.

Oct 19, 2025

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This fork presents a car color dataset loaded from a CSV file using `d3.csv`, displaying summary statistics and a styled HTML table. The table renders the first five data rows, with the hex color column including a colored swatch for each car brand. Beneath the table, a custom, hand-coded SVG illustration depicts a simple car with a blue body, roof, wheels, and a yellow headlight. The page is styled with standard HTML/CSS, while D3.js (v7) is used exclusively for data fetching and table generation.

Oct 5, 2025