Skip to main content
Log in
C

chandrakalavanukuri

@chandrakalavanukuri·20 public vizzes

Loading thumbnail…

Family Tree

This visualization displays a family tree using D3.js, with each node representing a family member and colored by generation level. The root, "cherry," branches to two children, which then expand into three generations of descendants. The code uses `d3.stratify()` to build the tree structure from the flat data and `d3.tree()` to calculate the node positions. SVG paths are animated to draw connections between nodes, while circles represent members with labels, all rendered on a grey background using SVG elements.

Apr 5, 2022
Loading thumbnail…

Country Map

This example displays a choropleth-style map of the United States, with each state rendered as a green filled path and internal borders drawn in teal. It uses the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` package to show all states including territories. The geographic data comes from the `us-atlas` TopoJSON file, processed through TopoJSON’s `feature` and `mesh` functions. The visualization is built with React and D3’s `geoPath`, rendering purely as SVG elements within a 960x500 viewport.

Apr 5, 2022
Loading thumbnail…

World Map

This example displays a world map with countries rendered in light green and outlined in orange, set against a black spherical backdrop. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to convert geographic coordinates into SVG paths. Country boundaries are drawn from the TopoJSON `world-atlas` dataset fetched from unpkg, with `topojson.feature` parsing the country geometries before data joining appends each path to the SVG. The sphere outline is generated using a path generator on a sphere type geometry.

Apr 5, 2022
Loading thumbnail…

Fork of Country map

This choropleth displays all U.S. states as sky-blue filled polygons with teal borders marking state boundaries. Using the geo-albers-usa-territories projection via d3.geoPath, the map renders TopoJSON data from the us-atlas package. React manages the SVG output, while d3.geoGraticule and a mesh from topojson generate the underlying grid lines and interior state divisions.

Apr 5, 2022
Loading thumbnail…

Social Network graph

A social network graph displays nine people as yellow circles with pink outlines, connected by black links whose thickness reflects a numeric weight. The layout is computed with d3.layout.force using gravity, charge, and distance parameters, while d3.json loads the graph data from an external JSON file. Nodes are draggable via force.drag, and each node includes an orange text label showing the person's name. The visualization uses SVG rendering within an 800×500 pixel canvas, with the tick handler updating link coordinates and node transforms during simulation.

Apr 5, 2022
Loading thumbnail…

Fork of World Map

This example displays a simple world map rendered with SVG paths. It depicts the Earth’s natural Earth projection with countries filled in blue and outlined in yellow, set against a green sphere. The code uses D3’s `geoNaturalEarth1` projection, `geoPath` for generating the path data, and `topojson.feature` to parse the world-atlas GeoJSON data loaded from a remote URL. The visualization appends each country path to the SVG canvas.

Apr 5, 2022
Loading thumbnail…

Fork of Family tree

This fork of a family tree uses D3.js v6 to render a static SVG genealogy chart with animated node and link drawing. The tree displays ten named individuals as lime-stroked circles, with node colors (blue, lawngreen, magenta, white) assigned by generation depth. Links are drawn first from parent coordinates to the same point, then animated with the `transition()` method to extend to the child positions over two seconds. The data array provides explicit child-parent pairs, while the `d3.stratify()` and `d3.tree()` APIs structure the hierarchy and compute node positions.

Apr 5, 2022
Loading thumbnail…

FORK OF WORLD MAP FOR TOPOJSON DATA

This example visualizes a world map using TopoJSON data, displaying countries as blue shapes with orange outlines on a pink globe background. It leverages the d3.geoNaturalEarth1 projection and d3.geoPath to render geographical paths, with the TopoJSON feature function converting the data into usable features. The map is drawn as an SVG, sourced from a GitHub-hosted JSON file, and styled via CSS classes for the globe and country boundaries.

Apr 5, 2022
Loading thumbnail…

ICE-7 Area chart

This example visualizes the net worth of the richest people over time using an area chart. The chart encodes years on the x-axis and net worth on the y-axis, with a smooth, curved area fill that emphasizes the changing magnitude of wealth. The visualization is built with D3 v5, using `select`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` to render the SVG paths and axes. Data is loaded from a CSV file hosted on GitHub, with net worth parsed as numbers and years as dates before rendering.

Mar 29, 2022
Loading thumbnail…

ICE-7 Resuable scatter plot

This interactive scatter plot animates the Iris dataset, cycling through combinations of petal and sepal measurements every two seconds. It uses D3.js to render a full-screen SVG with animated transitions, using the `scatterPlot` reusable module to handle axes and circle positioning. Each point is colored by species—setosa in red, versicolor in pink, and virginica in green—based on the `species` field. The visualization demonstrates a reusable scatter plot component that can dynamically update its x and y axes.

Mar 29, 2022
Loading thumbnail…

ICE-7 Pie Chart

This pie chart displays the net worth of the richest people, using a color-coded slice for each individual and a corresponding legend. The chart is generated with D3.js (v5), using the `d3.pie` and `d3.arc` functions to create the SVG segments, with data loaded from a CSV file via `d3.csv`. Custom colors and labels are applied through `d3.scaleOrdinal` and `d3.format` for axis tick values.

Mar 29, 2022
Loading thumbnail…

ICE-7 Line chart

This line chart displays the net worth of the richest people over time, using D3 v5 with SVG rendering. The data source is a CSV file, and the visualization maps years on the x-axis and net worth on the y-axis. It uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart, with labels and styling applied via D3 selections.

Mar 29, 2022
Loading thumbnail…

Fork of Fork of ICE-7 Pie Chart

This example visualizes the net worth of the richest people as a pie chart, with colored segments and a legend listing each name alongside its value in billions. It loads CSV data from a GitHub gist via `d3.csv`, then processes the `NETWORTH` field as numbers. The chart uses `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` for colors, and `d3.format` to display abbreviated tick values. Legends are appended as SVG rectangles and text elements, with the entire graphic rendered in an SVG container.

Mar 28, 2022
Loading thumbnail…

Fork of ICE-7 Pie Chart

This fork of the ICE-7 Pie Chart visualizes the most runs by cricket players, displaying each player’s run count as a slice in a donut-style pie chart with a corresponding legend and numerical values. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute arc segments, assign colors, and format tick values. Data is loaded asynchronously from a CSV file via `d3.csv` and rendered as SVG paths, with legend items built from `rect` and `text` elements.

Mar 28, 2022
Loading thumbnail…

Fork of Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart visualizes student marks by name, with data drawn from estimated UN population statistics. Users can select a year and the number of top countries to display via dropdown menus. The visualization uses React with D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, which are animated on load using the `<animate>` element. Bars are stylized with linear gradients, drop shadows, and continent-based coloring, while tooltips appear via `<title>` elements.

Mar 12, 2022
Loading thumbnail…

ICE-6 DV BAR GRAPH

This example displays a horizontal bar chart of the richest people, showing the top 10 individuals by net worth. The visualization uses React to manage state and render an SVG, with data loaded from a CSV file via the d3.csv function. The chart applies d3.scaleBand for the categorical y-axis labels and d3.scaleLinear for the numerical x-axis, while gridlines and axis ticks are manually generated using the scales’ tick methods. The bars are drawn as SVG rectangles, with their width proportional to each person’s net worth. The data source is a remote CSV URL loaded asynchronously.

Mar 8, 2022
Loading thumbnail…

Scatter Plot for Iris dataset

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for each flower sample. The code loads the data via `d3.csv`, parses numeric values, and uses `d3.scaleLinear` with `d3.extent` to set the scales. Circles are drawn using SVG elements, with axes generated by `d3.axisLeft` and `d3.axisBottom`. Axis labels are added manually as SVG text elements. The plot renders full-screen, with a margin-based layout and a fixed point radius of 5 pixels.

Mar 8, 2022
Loading thumbnail…

Fork of CSCE-5320 ICE-6

This example shows a horizontal bar chart of the top ten cricket players by total runs, with green gridlines and labeled axes. It loads CSV data from a GitHub gist, slices the dataset to the first ten rows, and renders the bars as SVG rectangles using React. The visualization uses `scaleBand` for the player categories and `scaleLinear` for the run values, with `axisBottom` and `axisLeft` omitted in favor of manual tick generation via `xScale.ticks()`. Styling is applied through inline SVG attributes and CSS in the HTML file.

Mar 8, 2022
Loading thumbnail…

CSCE-5320 data visualization ICE-5 assignment

This example displays a static SVG rectangle alongside a CSV data summary, reporting the file’s size in kilobytes, row count, and column count. The page uses D3 v5’s `d3.csv` and `d3.csvFormat` to fetch and parse the remote rich.csv file, then updates a `<pre>` element with the computed metadata. Styling via custom CSS and inline SVG shapes provides a simple visual context, while React is referenced in the project structure but not actively used in the rendering.

Feb 26, 2022
Loading thumbnail…

panda

A panda face rendered with SVG primitives forms the centerpiece of this visualization. The code constructs the face using D3’s `d3.arc` for the eyes, nose, mouth, and ears, paired with React elements for circles and ellipses that define the eye sockets and cheek blush. All shapes are positioned around a central group transformed to the middle of an SVG canvas, with explicit stroke and fill colors. The example demonstrates mixing React’s declarative component structure with imperative D3 shape generators to build a stylized illustration.

Feb 19, 2022