KrishnaPriyaKurra

@KrishnaPriyaKurra·12 public vizzes

Social Network Graph ICE-8

This network graph shows the social connections among a group of eight people, with nodes representing individuals and directed links indicating friendship relationships, such as "Friend with." The data is loaded from a JSON file and visualized using D3 v6's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. The graph is rendered as an SVG, with draggable nodes that react to mouseover and mouseout events. Each connection includes a triangular marker at its endpoint to indicate direction, while node and link colors and styles are defined in a separate CSS file.

Apr 4, 2022

Loading thumbnail…

Family Tree ICE-8

This family tree visualization displays hierarchical relationships through an interactive, collapsible tree layout. Nodes represent family members, color-coded by generation level, with labeled links showing connections. The example uses D3.js v3’s `d3.layout.tree` for layout, with SVG rendering and animations for smooth transitions. Data is loaded from a JSON file containing nested family structures, and the tree supports zooming and dragging via `d3.behavior.zoom`.

Apr 4, 2022

Loading thumbnail…

World Map with Topojson data

This example shows a world map rendered as a set of countries, with a pink sphere background and green-stroked yellow country shapes, using SVG output. It loads TopoJSON world data from a GitHub gist and converts it to GeoJSON features via the `feature` method from `topojson`. The map uses a `geoMercator` projection and `geoPath` from D3 v5 to generate the SVG paths, while `select` and `json` handle DOM selection and asynchronous data loading.

Apr 3, 2022

Loading thumbnail…

USA Country Map with Topojson data

This map of the United States renders state boundaries using a yellow fill with blue outlines. The visualization employs D3’s `geoAlbersUsa` projection and `geoPath` to generate the SVG paths from TopoJSON data fetched from a GitHub gist. State names appear as tooltips via appended `title` elements, and hovering changes the fill color to green. The code uses `topojson.feature` to convert the TopoJSON topology into GeoJSON features, and relies on the `geo-albers-usa-territories` library for the projection. The SVG canvas is fixed at 960 by 500 pixels, with styling applied via an external CSS file.

Apr 3, 2022

Loading thumbnail…

Area Chart ICE-7

This area chart displays the population of the USA from 2010 to 2022, with a yellow line and a green filled area beneath it. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and the `area()` generator with `curveBasis` to create the smooth filled region. Data is loaded from a CSV file via `d3.csv`, and the SVG output includes styled axes and labels. The code also draws the line using `line()` with the same curve, rendering the chart entirely as SVG elements.

Mar 28, 2022

Loading thumbnail…

Reusable Scatter Plot for Iris Dataset ICE-7

This reusable scatter plot visualizes the Iris dataset, mapping petal width and sepal length for three species of iris flowers distinguished by color. Built with D3 v6, it uses a custom `scatterPlot` function that leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG axes and circles. The chart also displays a color-coded legend and accepts configurable margins and radius. Though the code defines an animation-less SVG rendering, it prepares nested shapes using `rx` and `ry` attributes, suggesting potential ellipse variation. The dataset is loaded asynchronously via `csv` from a GitHub gist URL.

Mar 28, 2022

Loading thumbnail…

Line Chart ICE-7

This line chart shows the population of the United States from 2010 to 2022. The chart uses a time-scaled x-axis for years and a linear y-axis for population values, with styled gridlines and axis labels. The visualization is rendered as an SVG using React and D3 v5, employing `d3.csv` to load data from a GitHub gist, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to draw the path. The code includes custom CSS for tick colors, axis labels, and a bold stroke for the line.

Mar 28, 2022

Loading thumbnail…

Pie Chart ICE-7

This pie chart displays the top 10 most populated countries in the world based on 2022 population data loaded from a GitHub gist via d3.csv. The visualization uses d3.pie and d3.arc to generate SVG path segments, with colors assigned through d3.scaleOrdinal. A custom legend, built with SVG circles and text, shows each country name alongside its population value formatted with d3.format, while the chart is centered using an SVG group transform.

Mar 28, 2022

Loading thumbnail…

Iris Dataset Scatter Plot with D3.js

This example visualizes the classic Iris dataset as a scatter plot, showing the relationship between petal length (x-axis) and sepal length (y-axis) for three flower species, with each species color-coded via a custom marker function. The plot uses D3.js v6 to load CSV data, parse numeric fields, and render SVG circles positioned with `d3.scaleLinear` and `d3.extent`. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, while labels are added manually. The implementation also leverages `d3.csv` for asynchronous data fetching and `select`/`join` for data binding, with a responsive full-window SVG layout.

Mar 27, 2022

Loading thumbnail…

ICE-6: Rendering Marks and Channels with D3.js and SVG

A horizontal bar chart displays the 30 most populated cities, ranking them by their 2022 population figures. The visualization uses D3.js scales and SVG `<rect>` elements, with the x-axis employing a linear scale and the y-axis a band scale to position each bar. City names appear on the y-axis with a green fill, while a blue tick grid and pink bars encode the population values. React manages the component state, loading the city dataset asynchronously via D3’s `csv` parser.

Mar 6, 2022

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data from a remote URL using D3.js version 7. The page displays a header message and a flag image, while a script fetches the dataset via `d3.csv()` and computes its size in kilobytes, row count, and column count using `d3.csvFormat()`. The resulting statistics are rendered in a styled `<pre>` element, showing the parsed data's dimensions without visualizing the actual values.

Feb 28, 2022

Loading thumbnail…

Shocking Face

A shocking face rendered as a React SVG composition draws the viewer's eye with a pink circular head, wide white eyes with black pupils, and thick black eyebrows angled in alarm. The face is completed by a single black mouth circle, all set against a bright green background. The code uses React and ReactDOM to render the static SVG elements, which are defined directly in the component's JSX, with no interactive or animated behavior.

Feb 21, 2022