S

SRI RAM REDDY KOTERU

@sriram1810-k·25 public vizzes

Loading thumbnail…

Family Tree

This interactive family tree visualization displays a hierarchical dataset of names, with each node colored according to its position and labeled with a person's name. The tree uses a left-to-right layout, where the depth of each node is reflected in the font size, making generational levels visually distinct. The visualization is built with D3 v5, employing the `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout and draw connecting paths. All elements are rendered as SVG, with node labels and colors driven directly from the `data.json` file, and the entire graphic supports zooming via D3's `zoom` event.

Loading thumbnail…

Network Graph

This network graph visualizes friend relationships among eight individuals, with each yellow node representing a person and directed links showing connections labeled by type. The code uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, and d3.drag enables interactive node movement. Mouse hover highlights nodes with a green stroke via CSS classes. Data comes from an external JSON file containing node and link arrays, rendered as SVG with markers on connecting lines.

Loading thumbnail…

World Map

A world map visualization plots up to 1,500 geographic locations as animated circles, using a natural Earth projection and SVG rendering. It loads country boundaries from the world-atlas TopoJSON dataset and fetches latitude/longitude coordinates from a SPARQL endpoint via the data.netwerkdigitaalerfgoed.nl API. The code employs d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to draw the sphere and countries, then appends circle elements that transition their radius with d3.easeBounce and staggered delays, creating a popping effect on the map.

Loading thumbnail…

Country Map of USA

This example displays a choropleth-style map of the United States, with each state filled in red and state boundaries drawn as black lines, using an SVG rendering. The map relies on D3’s `geoPath` and the `geoAlbersUsaTerritories` projection to render geographic features from TopoJSON data loaded via `topojson.feature` and `topojson.mesh`. React manages the component state through the `useData` hook, while CSS hover effects change a state’s fill color to blue. The data source is the `us-atlas@3.0.0` states-10m.json file.

Loading thumbnail…

Fork of Fork of SwedisH MAP

This visualization displays a choropleth map of Sweden’s counties, with each county filled in brown and outlined in green, over a cyan background. The map uses the Mercator projection via `d3.geoMercator` and renders geographic paths with `d3.geoPath`. Data is loaded from a TopoJSON file fetched from a GitHub Gist, then processed with the `topojson` library's `feature` and `mesh` functions to extract county boundaries and shared interiors. The React-based interface renders the map as an SVG, with a loading message shown before data arrives.

Loading thumbnail…

Fork of Fork of USA Country Map

This interactive map of the United States renders state boundaries as pink strokes over sky-blue landmasses, using an Albers USA projection that includes territories. The visualization builds on a React component that loads TopoJSON data via `d3.json` and converts it with `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator creates the SVG paths for both land areas and state interiors, with the `geoAlbersUsaTerritories` projection handling the geographic layout. The map displays state-level administrative boundaries with a clean, minimal aesthetic.

Loading thumbnail…

Fork of ICE 8 - Country Map

A map of the United States renders each state as a purple SVG path on a black background, with thin gray outlines separating the regions. The visualization uses `d3.geoPath` with a `d3.geoAlbersUsa` projection to draw the country, pulling geographic data from the `us-atlas` TopoJSON file. The code loads this data via `d3.json` and processes it with `topojson.feature` to extract state boundaries, then appends the paths to an SVG canvas sized at 1000 by 800 pixels.

Loading thumbnail…

Fork of ICE -8 netherlands map

This interactive map of the Netherlands displays individual municipalities as clickable paths. Built with D3.js v6, it uses a geoMercator projection with `d3.geoPath` to render administrative boundaries from a TopoJSON dataset. Clicking a region zooms in via `d3.zoom`, highlights it in red, and shows its name in a tooltip. Panning and zooming are supported, with stroke widths adjusting inversely to zoom level.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML!” centered on a white background. It shows how front-end web technologies can be used to render static content without external data or complex styling. The page uses a single CSS rule to set the font size to 13em and align the message, while the JavaScript and HTML files are minimal, with no dynamic behavior or data processing. It serves as a basic template for web development.

Loading thumbnail…

Area Chart of world population during 2010-2022

This example displays world population trends from 2010 to 2022 using an area chart rendered with D3 v5 in SVG. The chart combines a red line and semi-transparent black fill to emphasize population growth over time, with green tick labels and a yellow grid. Data is loaded from a CSV via `d3.csv` and processed with `d3.scaleTime` and `d3.scaleLinear`. The line and area paths are generated using `d3.line` and `d3.area` with `curveBasis` smoothing, while axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Line Chart for the world population data from 2010 to 2020

A line chart displays the world population from 2010 to 2020, with the year on the x-axis and population count on the y-axis. The visualization uses React and D3 v7, with `d3.csv` to load data from a GitHub gist, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `curveBasis` for the smoothed path. SVG renders the chart, including custom axes with tick labels and axis titles, styled according to the CSS in the HTML file.

Loading thumbnail…

Pie chart for GDP's of famous nations in 2019

A pie chart displays the gross domestic product (GDP) of selected nations for 2019, with each slice labeled with its value in thousands and accompanied by a legend listing country names and corresponding GDP figures. The visualization loads CSV data from a remote GitHub URL and renders SVG output using D3 v5, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the slices and color mapping. Text labels are positioned via arc centroids, while the legend is manually constructed with appended rectangles and text elements.

Loading thumbnail…

Reusable scatter plot

This example presents a reusable scatter plot that visualizes the Iris dataset, with each circle colored by species. It uses D3.js scaleLinear, axisLeft, and axisBottom to map petal width and sepal length. The plot cycles through different data columns every two seconds, animating the x-axis and circle positions. The scatterPlot function encapsulates the chart logic, allowing dynamic updates via setInterval.

Loading thumbnail…

Fork of ICE - 7 Line Chart Maanas Katta

This example shows the opening bid price of EURUSD across the months of 2021 using a line chart built with React and D3 version 7. The chart fetches CSV data from a GitHub gist, formats dates and numeric values, and renders an SVG with a smooth curve, gold tick lines, blue labels, and red stroke marks. It implements custom axes and scales via `d3.scaleTime` and `d3.scaleLinear`, with tick formatting through `d3.timeFormat` and line generation using `d3.line` with `curveBasis`.

Loading thumbnail…

Line Chart

This line chart visualizes GDP growth for top countries across 2017–2018, using a time-scaled x-axis and linear y-axis. The SVG rendering relies on D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to draw the path. Data is loaded from a CSV via `d3.csv`, with axis labels styled through CSS. The chart includes grid lines and a single red trend line, with the y-axis tick format simplified using a custom formatting function.

Loading thumbnail…

Pie Chart of top 10 countries in terms of GDP

This pie chart visualizes the GDPs of the top 10 countries, with each slice labeled by its value in thousands and a legend listing country names and corresponding figures. The chart uses d3.pie() and d3.arc() to generate the SVG paths, with d3.scaleOrdinal assigning colors to each segment. Data is loaded via d3.csv from a GitHub gist, and d3.format is applied to abbreviate numbers. Text labels are positioned using the arc centroid method.

Loading thumbnail…

Line Chart

This line chart visualizes annual US automotive sales from 2005 to 2022, using a red path to show the sales trend over time. The visualization loads CSV data from a GitHub gist and renders it as an SVG using d3.scaleTime and d3.scaleLinear for the axes, with d3.axisBottom and d3.axisLeft providing tick marks. The chart includes labeled axes, gridlines, and a title, with data parsed to convert Year into Date objects and Sales into numbers.

Loading thumbnail…

Pie Chart

This example visualizes rating distributions as a pie chart, where each slice represents a categorical rating (such as "AAA Local" or "BBB- Internacional") with its corresponding percentage value. The chart reads input data from a JSON file and displays each category with a color-coded slice, accompanied by a legend on the right listing the label and exact percentage. Built with D3 v5, the code uses the `pie` layout generator to compute arc segments, `arc` for rendering paths, and `scaleOrdinal` for categorical color assignment. The SVG output is generated using the `select` and `append` API to construct both the pie slices and the legend elements.

Loading thumbnail…

Reusable scatter plot with different symbols

This example displays the Iris Dataset in a scatter plot, encoding each flower species with a distinct symbol shape. The reusable scatter plot implementation, built with D3.js, maps petal width to the x-axis and sepal length to the y-axis. The `scatterPlot` module uses D3’s `scaleLinear` for axes, `scaleOrdinal` for symbol assignment, and `symbol` to generate SVG path data. It loads data from a remote CSV, renders axis ticks at 24px, and fills the browser window.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions. The chart cycles through four different x-axis attributes every three seconds, animating the transition between petal width, sepal width, petal length, and sepal length while keeping sepal length fixed on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG circles and axes, with a custom reusable chart function inspired by Mike Bostock’s ‘Towards Reusable Charts’ pattern.

Loading thumbnail…

Sri Ram ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The chart uses D3 v6’s `csv` loader to fetch the data and `scaleLinear` for axes, while SVG circles are positioned and sized via the `select` and `join` API techniques. Axis labels are added using `axisBottom` and `axisLeft`, and the code includes a custom marker function for categorical coloring.

Loading thumbnail…

Sri Ram ICE - 6

This visualization displays the GDP values of the ten most popular countries using an SVG bar chart. Horizontal bars are rendered with varying widths proportional to GDP, with grid lines and tick labels for both axes. Built with React and D3 v5, the code uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The chart is rendered declaratively through React components, with D3 utilities like `max` calculating the domain and SVG elements for the visual output.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most populous countries, with a focus on their GDP values using horizontal bars. The visualization is rendered as an SVG using React and D3.js, with the data loaded from a CSV file via the `d3.csv` API. The code constructs both linear and band scales using `d3.scaleLinear` and `d3.scaleBand`, and manually maps data points to SVG rectangles, with axes and tick labels.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates the basic workflow of loading and parsing a CSV file with D3.js. A webpage with a bright red heading and blue SVG polygon displays a summary of the dataset, which is fetched from a remote GitHub Gist. The code uses `d3.csv()` to retrieve and parse the data, then checks the size of the formatted result with `d3.csvFormat()` to report the file size in kilobytes, along with the row and column counts, inside a large `<pre>` element. The visualization itself is static, relying on SVG markup defined directly in the HTML.

Loading thumbnail…

Sri ram reddy koteru

A smiley face built with D3.js animates its eyebrows in a looping motion. The SVG face, centered on a red circle with black stroke, features two eyes, a mouth drawn with an arc path, and rectangular eyebrows. The code uses D3's `select`, `append`, and `attr` methods for DOM manipulation, with the eyebrow movement driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. Rendering is entirely SVG-based, with no external data source.