K

krishnareddy23

@krishnareddy23·19 public vizzes

Loading thumbnail…

Familytree_krishna

This interactive family tree visualization displays a multi-generational genealogy starting from Radha, with three children and their respective offspring. The tree uses an animated, collapsible node layout where users can click nodes to expand or collapse branches. Built with React and D3.js, the visualization employs the `d3.layout.tree()` API for hierarchical arrangement and SVG rendering with smooth transitions. Each node is color-coded by generational level (red, blue, lightgreen), and text labels identify family members. The page uses custom CSS to style the nodes and links, with a light purple background.

Loading thumbnail…

Krishna familytree

This interactive family tree diagram visualizes a multi-generational hierarchy starting with Shivaji and branching into descendants like Narasimha, Petta, and Krishna. The visualization uses D3.js version 3.5 to construct a tree layout, with nodes rendered as circles connected by curved diagonal links. Users can click on nodes to collapse or expand branches, with smooth 750ms transitions animating the layout changes. The SVG output uses distinct colors for nodes and links, with yellow page background and red-stroked circles, while node text labels display family member names.

Loading thumbnail…

Krishna_Ice8_2

An interactive network diagram displays nine named people connected by weighted links, rendered as SVG lines and labeled circles. The visualization uses D3 v4, loaded with both d3.v4.js and an older d3.v2.js, to perform force-directed layout via `d3.layout.force()` with configured gravity, distance, and charge. Links are stroked in purple with widths proportional to link weight, while nodes are draggable circles with yellow text. Positions update on each layout tick, with data sourced from a local `graph.json` file containing node names, groups, and edge weights.

Loading thumbnail…

Krishna_Ice8_1

This interactive choropleth map displays the 50 U.S. states with land filled in teal and borders drawn in pink, using an SVG render within a React framework. It employs d3.geoPath with the geoAlbersUsaTerritories projection to convert TopoJSON (us-atlas states-10m.json) geographic features into path elements. A hover effect changes the state fill to yellow, while state boundaries are derived from mesh interiors. The visualization integrates React hooks, D3 v5, and TopoJSON for data processing and rendering.

Loading thumbnail…

Krishna_ICE8

This visualization presents a world map using the Eckert III projection, rendered as an SVG with React. The map displays land masses in green, a colored sphere background, and blue graticule lines, with black interior boundaries between countries. It uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to draw paths, and `d3.geoGraticule` for the grid. The data comes from the World Atlas TopoJSON, processed via `topojson.feature` and `topojson.mesh` to generate land and interior boundaries.

Loading thumbnail…

Krishna1

This visualization displays the Iris dataset as an interactive scatter plot, mapping petal width on the x-axis against sepal length on the y-axis. Each data point is color-coded and shaped according to its species: green triangles for setosa, blue diamonds for versicolor, and gray circles for virginica. The plot is built using a reusable `scatterPlot` function that leverages D3's `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` APIs to handle scaling, axes, and point rendering. The SVG output fills the entire browser window, with styling applied via the Share Tech font.

Loading thumbnail…

Krishna2

This example visualizes cricket player run totals as an interactive pie chart using the Iris dataset from a GitHub gist. The code uses D3.js v6.7.0 APIs including `d3.pie`, `d3.arc`, and `scaleOrdinal` to compute arc segments, colors, and labels. It renders an SVG with section labels, a legend showing player names and values, and uses `d3.csv` for asynchronous data loading.

Loading thumbnail…

kri 4

The visualization displays the average family income over time as a black line with a lavender area fill beneath it. Data is loaded from a CSV file and parsed into numeric earning values and date objects for the x-axis. The chart is built using D3 v5's `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `area` modules, with SVG rendering. Axis labels, tick formatting, and grid lines are configured to clarify the yearly trend and income scale.

Loading thumbnail…

Krishna3

This visualization displays a line chart of average income over time, using green strokes to connect data points on an SVG canvas. The code loads CSV data from a GitHub gist and maps years to the x-axis and earnings to the y-axis. It employs D3 v5 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to generate the plot, with gridlines and labeled axes for clarity.

Loading thumbnail…

krishna3

This line chart visualizes the annual number of USA immigrants from 2006 to 2021, with the x-axis mapping years on a time scale and the y-axis measuring immigrant counts. The data is loaded from a GitHub-hosted CSV file using the D3 `csv` function, then parsed and rendered as an SVG path generated by `d3.line`. The chart uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with custom tick styling and labels for the title and axis descriptors. The red line path is styled via CSS, and the visualization is embedded in a React-based example.

Loading thumbnail…

Krishna_2

This pie chart displays the percentage share of runs scored by six Indian cricket batsmen, using a static SVG rendering. The visualization is built with D3 v5, employing the `pie` and `arc` functions to compute and draw the segments, with a color palette defined via `scaleOrdinal`. Data is loaded from a local CSV file using `d3.csv`, and each slice is accompanied by a legend showing the player’s name and their corresponding percentage value, formatted with `d3.format`.

Loading thumbnail…

Krishna2300

This example shows carbon emission rates across 18 U.S. states in a horizontal bar chart. The visualization uses React for component management and D3 v5’s `scaleBand` and `scaleLinear` to map state names and emission values to pixel coordinates. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the chart is rendered as an SVG with custom tick marks and gridlines. The bars are drawn as `rect` elements, with state labels on the y-axis and value labels on the x-axis.

Loading thumbnail…

Scatter Plot

A scatter plot maps penguin flipper length to body mass, with points colored by species (Adelie, Gentoo, and Chinstrap) using cyan, magenta, and green. The SVG visualization is built with D3 v5, using `scaleLinear` for axes, `extent` to compute domains, and `axisLeft`/`axisBottom` for ticks. Data is loaded as CSV from a GitHub gist, and each circle’s size is fixed at radius 5 while bill dimensions are stored as extra attributes. The chart includes a title and cursive font styling for axes.

Loading thumbnail…

KrishnaICE6

A bar chart displays the basic monthly cost of Netflix in fifteen countries, sourced from a CSV dataset. The visualization uses React for component structure and D3 v5 for scales, axes, and SVG rendering. `d3.csv` loads the data, `scaleBand` positions country categories on the y-axis, and `scaleLinear` maps costs to bar widths on the x-axis. Grid lines, tick labels, and rectangles are drawn directly with SVG elements.

Loading thumbnail…

Penguin Scatter Plot

This scatter plot shows the relationship between bill length and body mass for penguins, with each dot representing an individual penguin. The visualization uses D3 v7’s `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks, rendering points as SVG circles via `chart.selectAll('.dot')`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is sized with fixed margins within a 600x500 pixel container. No categorical color encoding is applied to the dots.

Loading thumbnail…

Fork of Female Birth Rates Of states in United states

This bar chart displays the female teenage birth rates for the first 15 U.S. states from a CSV dataset. The visualization uses React with hooks to load data via `d3.csv` and renders horizontal bars with SVG, where each state’s rate is mapped to bar width using `scaleLinear` and `scaleBand` for positioning. Gridlines and axis ticks are drawn manually, and the chart is styled with a green background, highlighting the comparative rates across states.

Loading thumbnail…

Krishnareddy23

This example displays a summary of a travel reviews dataset, showing its size in kilobytes, row count, and column count after loading a CSV file. It uses D3.js v7’s `d3.csv` to fetch the external dataset from a GitHub gist, then computes metadata using `d3.csvFormat` and reports it in a preformatted text container on an HTML page styled with CSS, including a background image. The visualization is minimal, focusing on presenting dataset statistics rather than graphical charts, and runs within a React-like HTML structure without additional frameworks.

Loading thumbnail…

Krishnareddy23

This example renders a stylized cartoon face using React and D3 v6, with all elements drawn in SVG. The face features sky-blue circular cheeks, white-outlined eyes with yellow irises and white pupils, angled rectangular eyebrows, a polygonal hair shape, a nose, a smile arc, and an ear line. The code computes positions relative to the window dimensions and uses D3’s `arc()` generator for the mouth path. Component state is managed with React, while D3 handles the geometric calculations for the facial features.

Loading thumbnail…

Krishna23

A stylized face rendered as a yellow circle with blue strokes, featuring two eyes and a curved mouth, drawn using D3.js arc and circle primitives within a React component. The visualization demonstrates how to integrate React and D3 for SVG rendering, using d3.arc to construct the mouth and ear shapes with configurable inner and outer radii and angles. The svg element is centered via a group transformation, with dimensions set to 980 by 480 pixels.