AkrutiKhurana2103

ICE 8 Social Network Graph

This example visualizes a social network of six individuals, with nodes grouped by community and linked by weighted connections. The graph shows relationships between people like Noampi, Akruti, and Priya, using light green lines and pink circles. The visualization loads data from a JSON file and uses the older `d3.layout.force` API (not `d3.forceSimulation`) to simulate physics, with node positions updated on tick events. Text labels display names, and users can drag nodes to rearrange the network. The SVG rendering is handled directly through D3 selections.

Apr 3, 2022

Tree

A horizontal tree diagram visualizes hierarchical data with color-coded nodes representing question-answering states. Users toggle node expansion by clicking, with smooth transitions animating node positions and link paths. The visualization uses D3 v5's `tree` layout, `hierarchy` function, and `linkHorizontal` generator to compute the layout, while SVG elements and `transition` handle the rendering and animation. Interactive zooming is supported through the `zoom` API. The dataset comes from a static JavaScript object defining a tree structure with visit, attempt, and correctness classifications.

Tree

This interactive tree diagram displays a hierarchical decision flow for faced questions, with nodes representing statuses like "Visit," "Attempted," "Correct," and "Incorrect." Users click any node to collapse or expand its children, triggering smooth animated transitions. The visualization uses D3 v5's `tree` and `hierarchy` layouts alongside `linkHorizontal` for curved edges, with SVG rendering and zoom/pan support via `d3.zoom`. Node colors and labels are driven by embedded JSON data, and transitions are handled through D3’s `.transition()` methods with configurable durations.

Tree

This example displays a family tree as an animated SVG diagram using D3 v6. The visualization shows a hierarchical structure of names, with parent-child connections drawn as blue lines that animate from each parent node to its child. Circles representing individuals are grey with red borders, and text labels appear with staggered timing based on depth. The code uses D3's `stratify` method to convert the flat parent-child data into a hierarchy, then applies `tree` layout and `transition` animations to animate the paths, circles, and text.

US_Map

A choropleth-style map displays the contiguous United States with state boundaries, rendered in SVG using React. The visualization uses `d3.geoAlbers` for projection and `d3.geoPath` to draw geographic features, with `d3.geoGraticule` generating graticule lines. Land areas are filled pink, interiors stroked darkblue, and the sphere background is yellow, styled via CSS. Geographic data comes from the US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

World_Map

This example displays a world map rendered as SVG paths, with countries filled in green against a dark blue spherical backdrop. It uses D3.js v5 and TopoJSON to load and project geographic data, applying the `geoNaturalEarth1` projection and `geoPath` generator to convert country features into scalable vector graphics. The map is drawn on a yellow background, with country borders outlined in black, and the sphere itself is styled using CSS classes. No interactive behavior or animations are included.

ICE7_Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying relationships between petal and sepal measurements. The visualization cycles through four variable combinations every two seconds, allowing comparison of different attribute pairings. Each species—setosa, versicolor, and virginica—is distinguished by color, with a legend identifying the groups. The plot is built as a reusable D3 module, using `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` from the d3 library for axes and scales. SVG circles represent data points, with animated axis updates driven by `setInterval`.

Area_Chart

This area chart shows the number of passengers traveling with Qatar Airways from 2011 to 2021, drawn as a smooth, maroon-filled curve with a black outline. Using D3 v5, the code loads CSV data, parses dates with `d3.timeParse`, and builds scales with `scaleTime` and `scaleLinear`. It generates the line and area paths with `d3.line` and `d3.area`, applies `curveBasis` for smoothing, and renders axes with grid lines via `axisBottom` and `axisLeft`.

Line_Chart

This line chart shows the number of passengers flown by Qatar Airways from 2011 to 2021. The x-axis encodes years while the y-axis maps passenger counts, with a single maroon line tracing the trend over time. The visualization uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for axes, and d3.line to generate the path. Data is loaded via d3.csv from a GitHub gist, with dates parsed using d3.timeParse. The SVG is rendered with grid lines and styled axis labels.

Line Chart

This line chart visualizes US auto sales from 2005 to 2022, plotting airline prices over time. The data is loaded from a CSV file using d3.csv, then rendered as an SVG path generated by d3.line. It uses d3.scaleTime and d3.scaleLinear to map the x and y dimensions, with axes created via d3.axisBottom and d3.axisLeft. The chart includes labeled axes and a title, with gridlines drawn through tick size extensions. The line path is styled with a red stroke.

LineChart

This line chart displays US auto sales from 2005 to 2022, with years on the x-axis and sales figures on the y-axis. The chart is rendered as an SVG using D3 v5, with data loaded from a CSV file via `d3.csv`. The code uses `scaleTime` and `scaleLinear` to map data to pixel coordinates, `axisBottom` and `axisLeft` for grid lines and ticks, and a `line` generator to draw the path. Axis labels and a title are added as text elements, with red stroke styling on the line path.

Pie_Chart_ICE_7

This example shows flight ticket prices from the US to India on June 21st, using a pie chart where each slice’s size and label represent the price in dollars for a different airline. The chart renders in SVG and includes a legend listing airline names alongside their corresponding prices in thousands. The code uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `csv` functions to load data from a GitHub Gist, compute slice geometry, and assign a fixed set of ten named colors to the segments. Text labels are placed at slice centroids via `arc.centroid()`.

Pie_Chart_ICE_7

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its value in thousands. The chart uses d3.pie and d3.arc to generate the segments, d3.scaleOrdinal for coloring, and includes a legend with country names and death counts. Data is loaded from a CSV file via d3.csv, and labels are positioned using the arc centroid method. The visualization is rendered as SVG with D3 v5, displaying both the graphical slices and textual annotations.

Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris Dataset, displaying measurements like petal width and sepal length as colored circles. It cycles through different column pairs every two seconds, animating the axes and points to show relationships between various flower attributes. The chart uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function that follows the reusable chart pattern. Data loads via `csv` from a GitHub Gist, and the SVG rendering updates smoothly as the selected variables change.

Mar 23, 2022

Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width along the x- and y-axes, with circles colored by species (setosa in red, versicolor in pink, and virginica in blue). It also encodes sepal length and width as the rx and ry attributes of each circle, though they remain unchanged due to a fixed radius. Built with D3 v6, the code loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scales, and renders axes with `axisLeft` and `axisBottom`. All elements are drawn as SVG circles appended to the body.

Mar 6, 2022

ICE-6

This bar chart visualizes Netflix stock price data, showing the High values for a selection of dates. The chart uses a horizontal bar layout, with dates on the y-axis and price on the x-axis. Built with React and D3 v5, it loads CSV data via `d3.csv` and renders SVG rectangles positioned by `scaleBand` and `scaleLinear`. The grid lines and axis ticks are generated using D3’s scale methods.

Mar 5, 2022

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, with country names on the y-axis and population values on the x-axis. The chart is built using React components that render SVG marks and channels directly, employing D3’s `scaleBand`, `scaleLinear`, and `csv` to load and scale the data. Grid lines are drawn using manually generated ticks, while bars are rendered as SVG rectangles, demonstrating an integration of React state management with D3 utilities for data processing and scaling.

Fork of Bar Chart

This bar chart visualizes global video game sales by genre, from Action’s 563 million units to Strategy’s 23 million. Built with D3 v6, it uses `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis, drawing SVG rectangles from CSV data. Interactive hover effects transition bars from steelblue to orange, and mouseout reverts them via `transition.attr` over 250 milliseconds. Axis labels and titles are appended as SVG text elements.

es

A horizontal bar chart ranks the top 10 cities in Greater Boston by the number of Yelp restaurants rated four stars or above, with Boston leading at 1,011. The chart uses d3.csv to load city–count data, d3.scaleLinear and d3.scaleBand for axes, and d3.axisLeft and d3.axisBottom to render ticks. Bars are drawn as SVG rectangles with a purple fill, and the visualization includes a title and axis label. The underlying data is aggregated from the public Yelp dataset.

ICE_6

This bar chart displays the top 10 most populous countries in 2019, using a horizontal bar layout with country names on the y-axis and population values on the x-axis. It is built with React and D3 v5, using `d3.csv` to load data from a remote CSV file, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rectangles for bars. Gridlines and tick labels are generated with `d3.ticks()`, while the chart is rendered entirely as SVG within a React component.

ICE_5

This example displays a small red diamond shape over a gray SVG canvas, with a zigzagging line of colored segments descending through it. It accompanies a dataset summary from the Netflix Stock Price Prediction Dataset, loaded via the `d3.csv` API. The visualization uses D3 version 7 and renders as static SVG elements, while the page’s text reports the dataset size in kilobytes, rows, and columns. The black crosshair lines overlay the drawing to indicate a coordinate reference.

Feb 27, 2022

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

This example demonstrates how to load and parse CSV data with D3.js v7, displaying the file size, row count, and column count of a remote dataset. The page combines an SVG illustration with a styled HTML header and a `<pre>` element that updates dynamically via JavaScript. Using the `d3.csv` method, it fetches data from a GitHub gist URL and computes metadata from the parsed result, including formatted size in kilobytes and the number of columns. The visualization serves as a simple educational tool for understanding asynchronous data loading in a React-agnostic, plain HTML context.

Feb 24, 2022

Funny Face

A cartoon face rendered as an SVG with React and D3 shows a symmetrical smiley with distinct eyes, pupils, a nose, and a tongue. The face’s head is a gold circle with a brown stroke, while the left eye is pink and the right eye is white, each with differently positioned pupils. The code uses D3’s `arc` generator to create the mouth path, and React components structure each facial feature. All elements are positioned within a single SVG group transformed to the center of a 1000×500 canvas.

Feb 20, 2022

Pink Face

A pink smiley face is drawn in an SVG canvas, with a large pink circle outlined in red serving as the face and two smaller black circles as eyes. The visualization is midway to completion, as the mouth is only half drawn, appearing as a pink arc created using D3's `arc` generator. The code selects the SVG element with `d3.select` and appends a group, then uses the `arc` function from D3 v7 to generate the mouth path with specified inner and outer radii and angular start and end points.

Feb 20, 2022