karthikRachamalli1995

@karthikRachamalli1995·12 public vizzes

KR_DV_ICE_8_4

A network graph visualization displays a "My Friends Network Graph," mapping relationships between individuals as labeled nodes connected by lines. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, preventing overlap and maintaining layout stability. Nodes are rendered as light blue circles with navy text labels, while links appear as thick black lines. Data is loaded from a remote JSON file, and the SVG output is scaled through a viewBox attribute for responsive display.

Mar 29, 2023

Loading thumbnail…

Tree Example

This interactive tree diagram visualizes the lineage of Rosa canina and Hydrangea plant species, with branching nodes showing parent-child relationships across generations. Built with D3.js, the visualization uses the `d3.layout.tree` API to compute node positions and animated transitions to expand the hierarchy. Each node appears as a colored circle with a text label, while links connect parent and child species. The data structure contains nested JSON objects representing family relationships, with distinct colors (blue, red, green) differentiating taxonomic levels. The SVG rendering includes smooth 1000ms transitions as nodes move into their computed positions.

Mar 29, 2023

Loading thumbnail…

KR_DV_ICE_8_2

This example displays a choropleth-free map of the United States, coloring each state blue with dark gray borders and labeling every state with its name. It uses D3 v4’s `geoAlbersUsa` projection and `geoPath` to render the geographic shapes from TopoJSON data loaded from the us-atlas repository. State boundaries come from the `states-10m.json` file, processed via the `feature` method from topojson-client, with labels positioned at each state’s centroid.

Mar 28, 2023

Loading thumbnail…

KR_DV_ICE_8_1

This example displays a world map using a natural Earth projection with a blue ocean sphere and gray countries outlined in green. Clicking a country highlights it in red via the `:active` CSS pseudo-class. The visualization is built with D3 v5, using `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and TopoJSON’s `feature` to extract country geometries from remote GeoJSON data. The rendered SVG shows all countries as selectable paths within the sphere.

Mar 28, 2023

Loading thumbnail…

KR_DV_ICE_7_2

A pie chart visualizes daily average temperatures in Denton from December 21 to 30, 2022, with each slice representing one day’s temperature. The chart uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, with `scaleOrdinal` mapping temperatures to distinct colors. A legend lists dates alongside their corresponding temperatures, while SVG text labels display each slice’s value in Celsius. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization is rendered entirely with SVG elements in a React-based setup.

Mar 11, 2023

Loading thumbnail…

Fork of KR_DV_ICE_7_4

This fork of KR_DV_ICE_7_4 displays a filled area chart of Denton temperatures over a ten-day period in late December 2022. The visualization uses an SVG canvas and D3 v5 APIs including `d3.scaleTime` for the date-based x-axis, `d3.scaleLinear` for the temperature y-axis, and `d3.area` with a basis curve to render the maroon filled region. Axis labels and a title are added via SVG text elements. Data is loaded from a remote CSV file containing daily weather observations.

Mar 11, 2023

Loading thumbnail…

KR_DV_ICE_7_3

A line chart displays Denton temperature readings from December 21 to December 30, 2022, with dates on the x-axis and temperatures on the y-axis. Built with d3.v5, the visualization uses `scaleTime` and `scaleLinear` to map data, `axisBottom` and `axisLeft` for labeled ticks, and a `line` generator with `curveBasis` for the smoothed red path. The CSV data is loaded from a GitHub gist and rendered as SVG, with axis labels and a title.

Mar 11, 2023

Loading thumbnail…

KR_DV_ICE_7_1

This example displays the Iris dataset as an animated scatter plot that cycles through different x-axis variables every three seconds. The plot maps petal width to the y-axis while alternating between sepal width, petal length, and sepal length on the x-axis. Species are encoded using distinct SVG symbols—stars, crosses, and diamonds—generated with d3.symbol. The reusable chart function leverages d3.scaleLinear, axisLeft, and axisBottom for scales and axes, with setInterval driving the periodic updates.

Mar 11, 2023

Loading thumbnail…

Scatter Plot for Penguin Dataset

This scatter plot visualizes the penguin dataset, showing the relationship between flipper length and bill length for three species (Adelie, Chinstrap, and Gentoo), which are color-coded with green, red, and blue circles. The visualization uses D3 v5 (d3.v5) with the SVG rendering framework, fetching data from a CSV file via a URL. It leverages d3.csv for data parsing, d3.scaleLinear for axis scaling, and d3.axisLeft and d3.axisBottom to create the chart axes.

Mar 6, 2023

Loading thumbnail…

KR - DV - ICE-6

This example displays a horizontal bar chart of daily high temperatures for Denton city from December 21, 2022, to January 4, 2023, using data loaded from a CSV file hosted on GitHub Gist. The chart uses React with hooks (`useState`, `useEffect`) to fetch and parse the data, while D3 v5’s `scaleBand` and `scaleLinear` define the ordinal date axis and linear temperature axis. SVG rectangles render the bars, and custom axes with tick lines and labels are drawn manually. The visualization also includes rotated axis titles for "Date" and "Temperature (°C)".

Mar 5, 2023

Loading thumbnail…

KR - DV - ICE5

This example displays a summary of Denton weather data from December 2022 to February 2023, presenting descriptive statistics for attributes such as temperature, humidity, precipitation, and wind speed. The page uses D3.js (v7) to load a CSV file via `d3.csv`, convert string values to numbers, and compute minimum, maximum, mean, median, and standard deviation for each attribute using `d3.min`, `d3.max`, `d3.mean`, `d3.median`, and `d3.deviation`. Results populate an HTML table alongside a text summary, with a weather-themed background image applied through CSS.

Feb 28, 2023

Loading thumbnail…

Karthik Rachamalli Smiley Viz

This example shows a cartoon smiley face with hair, ears, shoulders, a neck chain, and a hat, rendered in SVG with an animated bouncing motion on the hat. It demonstrates fundamental DOM manipulation by building the face from basic shapes like circles, ellipses, and arcs, using D3.js selection and the `arc` API. The hat transitions smoothly using `transition().duration()`, while other static elements are styled with fill colors and strokes. The code explicitly creates each shape via `svg.append()` and sets attributes such as `cx`, `cy`, `r`, and `d`, relying on d3.v5.

Feb 19, 2023