V

Venkata Rajashekar Reddy Chinthala

@Rajashekar551998·39 public vizzes

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among a group of people, with each node representing a person and each directed link indicating a "Friend with" relationship. The visualization uses the D3.js force-directed layout from `d3.forceSimulation`, combining `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes and edges. Nodes are rendered as blue circles with labels, and links have arrow markers. The graph is rendered in SVG, with data loaded from a JSON file containing node and link definitions.

Loading thumbnail…

Fork of Fork of US states map : with colorScale. One color for each country

This choropleth map of U.S. counties assigns a distinct categorical color to each state using `d3.scaleOrdinal` with `d3.schemeCategory10`. The map projects geographic data with `d3.geoPath` and a `d3.geoAlbersUsa` projection, rendering counties as SVG paths with red strokes and a blue hover effect. It loads TopoJSON county boundaries from the `us-atlas` package and includes a tooltip with each county’s state name via appended `title` elements. The visualization uses `d3.v5` and the `topojson` library for feature extraction.

Loading thumbnail…

Fork of ICE-8 USA Map

This example displays a choropleth-style map of the United States using an Albers equal-area conic projection, rendering the nation's landmass in blue against a silver sphere and state boundaries as black lines. It loads US state topology data from the `us-atlas` package, then uses D3 v5's `geoAlbers` and `geoPath` to project and draw the shapes, while TopoJSON's `feature` and `mesh` functions extract the nation and state interior borders for SVG output within a React component.

Loading thumbnail…

Fork of DataViz Project - Third Visualization - Mental Illness Choropleth Map

This interactive D3.js v5 choropleth map shows the percentage of each country’s population affected by mental illness in 2017, using a sequential blue color scale over a Natural Earth projection. The React-based view renders SVG paths for countries, with missing data marked in black, and includes graticules, a sphere background, and interior boundaries. It uses `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.geoGraticule` for map geometry, while pulling data from a CSV of health disorders and a country-code lookup.

Loading thumbnail…

Fork of Fork of Pie_chart_Us_states_density

This example renders a pie chart of the top 10 U.S. states by population density, using D3.js v5 with SVG elements. The visualization presents each state as a colored slice, with a legend listing state names and density values in thousands. The code loads CSV data from a GitHub gist via `d3.csv`, then applies the `d3.pie` layout and `d3.arc` to generate the chart, while `d3.scaleOrdinal` assigns a distinct color palette and `d3.format` styles the density labels.

Loading thumbnail…

Fork of Pie_chart_Us_states_density

This visualization shows the top 10 US states by population density, displayed as a pie chart with each slice labeled by state name and density value in thousands. The chart uses a categorical color scale (d3.scaleOrdinal) to distinguish slices, with legends positioned to the right. Data loads from a CSV via d3.csv, and the pie layout (d3.pie) computes slice angles while d3.arc generates the SVG path geometries. The code renders all elements as SVG, applying custom colors and formatting density values with d3.format.

Loading thumbnail…

Fork of D3: GeoEarth

This choropleth map visualizes global brain and central nervous system cancer deaths in 2019, with countries colored on a yellow-orange-red sequential scale from the D3 `scaleSequential` and `interpolateYlOrRd` scheme. A legend shows the magnitude of deaths, and hovering over a country reveals its name and total death count via a tooltip. The visualization uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country boundaries from TopoJSON world atlas data, merged with CSV datasets for country codes and cancer mortality statistics. The React app loads these data through custom hooks and updates the SVG elements dynamically.

Loading thumbnail…

Fork of Polished World Map

This example presents a polished world map with country boundaries, graticules, and a highlighted sphere outline. It uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths, and d3.geoGraticule for the grid lines. The map draws land features and interior borders from World Atlas TopoJSON data loaded via d3.json and processed with topojson.feature and topojson.mesh. The visualization is built as a React component, applying teal-colored land masses with subtle stroke styling for visual refinement.

Loading thumbnail…

ICE-7 Assignment Area Chart Rajashekar Reddy

This area chart displays car sales by year up to 2020, with a green filled region beneath a line curve. The visualization loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The line and area are generated with `d3.line` and `d3.area` using `curveBasis`, rendered as SVG paths, with axes created via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

ICE-7 Assignment Line Chart Country wise Population

This line chart displays population trends for countries from 2013 to 2022, with time on the x-axis and population count on the y-axis. It uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG path. The chart includes rotated axis labels and grid lines via tick sizes, with the line drawn in red. Data is parsed from a GitHub gist CSV, formatting years from date strings using d3.timeParse.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This area chart displays car sales by year up to 2020, using a smooth basis curve to connect data points while filling the area beneath the line in green. The visualization employs d3's `scaleTime` and `scaleLinear` for axes, along with the `line`, `area`, and `curveBasis` generators to create the chart. Data is loaded from a CSV file hosted on GitHub, parsed with d3's time parsing, and rendered as SVG with custom axis labels and tick formatting.

Loading thumbnail…

Fork of Fork of Fork area

This area chart shows the number of Android users over time, using a filled path to represent the data. The visualization is built with D3 v6, using `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` to generate the smooth filled region, and `axisBottom` and `axisLeft` for the tick marks and labels. Data is loaded from a CSV file containing yearly user counts, and the chart is rendered as an SVG with custom styling for the title and axis text.

Loading thumbnail…

Fork of Nikita's Line Chart

This line chart visualizes Nykaa stock sales from 2009 to 2022, with years on the x-axis and sales on the y-axis. The D3 v5 code loads CSV data from a GitHub gist, converts the year strings to Date objects, and scales the axes using `scaleTime` and `scaleLinear`. It renders an SVG line path via `line` and adds axis labels and a title using `axisBottom`, `axisLeft`, and appended text elements. Grid lines are created by setting negative tick sizes on both axes.

Loading thumbnail…

Fork of Fork of Line chart

This line chart visualizes car sales data from 2013 to 2021, plotting yearly totals as a single red path against time-based axes. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map years and sales counts, with d3.axisBottom and d3.axisLeft providing labeled ticks. The line is generated via d3.line and the data is loaded as CSV from a GitHub gist using d3.csv. Gridlines and axis labels clarify the values, while the chart’s title appears above the graphic.

Loading thumbnail…

Fork of Fork of line chart section 3

This visualization displays perfume sales totals from 2015 to 2021 as a red line chart, with years on the x-axis and total sales on the y-axis. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map data, while d3.axisBottom and d3.axisLeft create labeled axes with grid ticks. The line path is generated via d3.line, and the dataset is loaded asynchronously with d3.csv from a GitHub gist. The React framework structures the page, with d3.v5 handling all chart logic and styling applied through external CSS.

Loading thumbnail…

Fork of Line chart

This line chart visualizes car sales totals from 2013 to 2021, using a red path to connect data points over time. The x-axis displays years and the y-axis shows total sales, with labeled axes and tick marks. The code uses D3 v5 APIs such as `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to generate the SVG output. Data is loaded from a remote CSV file, with date strings parsed into time values before rendering.

Loading thumbnail…

ICE-7 Assignment Rajashekar Reddy

A pie chart displays 2022 population estimates for ten countries, with each slice sized proportionally to population and labeled via a legend listing country names and formatted values. The visualization uses D3 v5’s `pie`, `arc`, `scaleOrdinal` with `schemeCategory10`, and `format` to generate SVG paths and legend text. Data is loaded asynchronously from a JSON file, and the chart is rendered with an outer radius of 185 pixels within an 860 by 500 viewBox.

Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart displays 2022 US auto sales by brand, sourced from a CSV file loaded via d3.csv. The visualization uses d3.pie() and arc generators to create SVG paths, with a scaleOrdinal color scheme mapping each brand’s YTD sales value. A legend lists each brand with its corresponding color and sales figure formatted in thousands (K). The rendering approach relies on SVG elements within a 960x500 viewport, with data preprocessing converting string values to numbers before generating the chart.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays 2022 US auto sales by brand, with each slice representing a brand's year-to-date sales volume and a matching color-coded legend that labels each brand with its sales figure in thousands. Built with D3 v5, the visualization loads CSV data from a GitHub gist using `d3.csv`, then applies the `d3.pie` layout and `d3.arc` generator to render the SVG paths. Color mapping uses `d3.scaleOrdinal` with a custom palette, while `d3.format` formats the legend values. The chart is rendered as an SVG with custom CSS styling for text and legend elements.

Loading thumbnail…

ICE-7 Assignment Venkata Rajashekar Reddy

This visualization displays the Iris dataset as a scatter plot, mapping petal width on the x-axis against sepal length on the y-axis, with each point colored by species (setosa in blue, versicolor in red, and virginica in green). The code uses D3.js version 6.7.0 with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot from a CSV file fetched via a gist URL. Each circle represents a data point, rendered with a white stroke and a 5-pixel radius, and the axes are styled with the Share Tech font against a dark background.

Loading thumbnail…

Venkata Rajashekar Reddy ICE-7

This interactive scatter plot visualizes the Iris Dataset, displaying eye width against ear length for various species. Built with D3.js, it uses a reusable `scatterPlot` function that dynamically updates the x-axis attribute every two seconds, cycling through different data columns. The SVG rendering includes colored circles representing species—red for tigers, blue for lions, and green for others—with labeled axes. The chart adapts to the browser window size and uses the Share Tech font for text styling.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

A reusable D3 scatter plot displays the Iris dataset, mapping petal width against sepal length. Each circle’s color encodes the species (setosa in blue, versicolor in red, virginica in yellow), with white strokes and labeled axes. Built using `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, the plot updates via a configurable `scatterPlot` module, iterating through data columns. The visualization renders in SVG on a black background with white text, emphasizing interactive reuse of axes and data bindings.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart visualizes the top 10 countries by air pollution-related deaths in 2020, labeling each slice with death counts in thousands. The chart renders using SVG with D3 v5, employing the `pie` and `arc` generators to create segments and `scaleOrdinal` for coloring. A legend lists countries with corresponding values. Data is fetched asynchronously from a CSV file using D3’s `csv` method, and text labels are positioned via `arcGenerator.centroid`.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes animal measurements, mapping features like petal width and sepal length to Cartesian coordinates while color-coding data points by species (red, blue, or green). Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and SVG circles for marks. The reusable `scatterPlot` function supports dynamic column switching via a cycling array, updating the x-axis mapping on each call. Data loads from a remote CSV URL and renders inside a black-themed viewport with custom typography, highlighting a modular approach to chart construction.

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This scatter plot visualizes the relationship between eye width and ear length across different species, with each species assigned a distinct color (red, blue, or green). Using D3 version 6.7.0, the example demonstrates a reusable scatter plot component that dynamically re-renders with the eye_width attribute selected from a data array. The visualization employs D3’s `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for chart axes, and renders data points as SVG circles filled with species-specific colors.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through different feature combinations every two seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map sepal and petal measurements onto an SVG canvas. The chart is implemented as a reusable function via the module pattern, with animated transitions between four variable pairings, all rendered with selectable data-binding and circle marks.

Loading thumbnail…

Animals Dataset Scatter Plot

This scatter plot visualizes the Animals Dataset, mapping ear length and ear width along the x- and y-axes while coloring each point by species (tiger, lion, or other). Circles use eye length and width for their rx and ry attributes, though the radius is fixed. The visualization loads CSV data via d3.csv, scales positions with d3.scaleLinear, and renders axes using d3.axisLeft and d3.axisBottom, with all elements drawn as SVG in a full-window viewport.

Loading thumbnail…

ICE-6 Assignment

A horizontal bar chart displays the top 10 countries by population for 2022, with country names on the y-axis and population values on the x-axis. The chart renders as an SVG using React components, with D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` for data loading. Population data is fetched from a GitHub gist, and axes are drawn manually with tick marks and labels.

Loading thumbnail…

ICE Assignment 5

This visualization displays a loading summary for a color hex dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It uses D3 v7's `d3.csv` and `d3.csvFormat` to fetch and measure the data before rendering the results in an HTML `<pre>` element. The page features large aqua and blue heading styles to present the ICE assignment title and computed statistics.

Loading thumbnail…

Document

This example displays a summary of a CSV file’s contents in a large, centered text block with an aquamarine background. It loads colorhex data from a GitHub gist using `d3.csv`, then computes and presents the file size in kilobytes, the number of rows, and the number of columns. The text is rendered into a `<pre>` element via `document.getElementById` and `textContent`, with the page styled using basic CSS for headings and layout.

Loading thumbnail…

Fork of Document

This example demonstrates how to load and inspect a CSV file containing color hex values. It uses D3.js (v7) to fetch the remote data via the `d3.csv` method, then displays a summary of the dataset's size, row count, and column count in a message container. The description is built by calculating the formatted data length in kilobytes and accessing the data's `length` and `columns.length` properties. The visualization itself is minimal—it shows only textual metadata about the data, not a graphical chart.

Loading thumbnail…

Document

This example displays basic information about a CSV dataset in plain text on a webpage. It loads color data from an external GitHub gist using `d3.csv`, then constructs a message summarizing the data size, row count, and number of columns. The size is calculated by formatting the CSV with `d3.csvFormat` and dividing its length, and the summary is inserted into a DOM element via `document.getElementById`. The visualization uses d3.v7 to fetch and parse the data, with no graphical rendering.

Loading thumbnail…

Fork of Hello HTML

A React-based smiley face is rendered as an SVG using D3’s `arc` generator for the mouth. The face is composed of reusable components—a red background circle, two eyes with yellow highlights, and a curved mouth—positioned via a translated group. The code defines the face’s dimensions, offsets, and stroke widths as props, with data hardcoded in `index.js`. D3 v7 provides the `arc` API, while React 17 manages the component tree.

Loading thumbnail…

Fork of Smiley Face Part II

A static SVG drawing of a smiley face is rendered with React elements. The face includes a red circle for the head, two eyes composed of black outer circles and yellow inner pupils, black eyebrows drawn as thick lines, and a black nose represented by a small filled circle. The React App component returns the SVG markup directly, using JSX to define circle and line elements with absolute positioning, and ReactDOM renders the component into the page’s root element.

Loading thumbnail…

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

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate fundamental DOM manipulation. The face's eyes are simple circles, while the eyebrows are rectangles that animate vertically in a looping sequence via chained `transition` calls with a 2000-millisecond duration. The mouth is drawn using `d3.arc` with specified inner and outer radii and angular bounds. The entire figure is centered through a group translation, and the code directly selects and appends SVG elements using `select` and `append`.

Loading thumbnail…

Fork of Smiley Face Part I

A yellow circle with a black stroke serves as the face, featuring two black eyes and an arc for a mouth that spans from the top to the bottom of the face, creating a half-smile. The visualization is built with React and D3 v7, using the D3 `arc` generator to create the mouth path. All shapes are rendered as SVG elements within a fixed 960×500 canvas, with the face centered and positioned using D3’s `translate` transform.

Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

This example shows a partially completed smiley face built with D3.js, rendered as SVG elements. A large green circle with a blue stroke forms the head, while a smaller circle represents the eye, and an arc path creates the mouth. The code uses D3 v7’s `select` and `arc` APIs to construct the mouth shape, with the SVG canvas explicitly sized at 960 by 500 pixels. The visualization is static, with no interactivity or data binding, highlighting the manual placement of geometric primitives.

Loading thumbnail…

Fork of homework smiley face

This example renders a stylized smiley face as a static SVG graphic using React and D3.js v7. The face is composed of concentric circles for the head and eyes, with purple pupils, black eyebrows, and a mouth drawn via the `arc` generator from D3. The visualization uses hardcoded coordinates and dimensions, with all shapes positioned relative to a centered translation group. The code applies React components to manage the SVG markup and D3’s arc function to create the curved mouth path.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a cheerful, emoji-like face using React and D3, composed of a yellow circle with a black stroke, two dark eyes, and a curved mouth. The face is centered within a square SVG canvas. The code leverages d3.arc to generate the mouth path and uses React’s JSX syntax to declaratively construct the SVG elements, with a group element translating all facial features to the canvas center. The styling is minimal, removing body margins for a clean display.