S

Sumanya4

@Sumanya4·27 public vizzes

Loading thumbnail…

Fork of Family Tree

This interactive family tree visualizes three generations of a family using SVG circles and animated connecting paths. The data is hardcoded in a JavaScript array, then converted to a hierarchy with `d3.stratify()` and positioned using `d3.tree().size([950, 250])`. Circles and labels appear with transitions over 800–1000 milliseconds, while links animate from their source to target coordinates. Node colors are assigned by generation depth: maroon for the root, navy for the first generation, and black for the second, all rendered with bold white text labels.

Loading thumbnail…

Untitled

This example shows a force-directed network graph of named nodes with circular labels and red connecting lines. The visualization uses `d3.forceSimulation` with link, charge, and center forces to position the nodes, which are rendered as SVG circles with white fills and text labels. The code loads node and link data from a local `flare.json` file, and the simulation updates node and link positions continuously during the animation tick.

Loading thumbnail…

Fork of USA Country Map

This fork of a USA country map displays the 50 states using a purple fill with white borders, and hovering over a state highlights it in yellow. The visualization loads geographic data from a TopoJSON file via `d3.json`, then converts it to GeoJSON using `feature` and `mesh` from TopoJSON. The map is rendered as SVG paths generated by `d3.geoPath` with the `geoAlbersUsaTerritories` projection, all within a React component that manages data fetching through the `useData` hook.

Loading thumbnail…

Fork of World Map with D3.js!

This example renders an interactive world map using D3.js and TopoJSON. Countries are drawn as SVG paths with white fills and black strokes, while the surrounding sphere is teal. The map uses the `geoEquirectangular` projection and `geoPath` to convert geographic data into screen coordinates. It loads country boundaries from the world-atlas dataset (countries-110m.json) and highlights individual countries in navy when hovered.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through different variable pairings every two seconds. The visualization uses a reusable D3 chart module, with `scaleLinear` for axes, `scaleOrdinal` for categorical coloring by species, and `axisLeft`/`axisBottom` for ticks. Data is loaded via `d3.csv` from a GitHub Gist, rendered as SVG circles, and includes a legend. The chart demonstrates a modular approach to building configurable, animated D3 visualizations.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization displays vehicle sales in India from 2009 to 2022, combining a smooth line chart with a filled area beneath it to emphasize sales trends over time. The SVG-based chart uses D3 v5 APIs including `line`, `area`, `curveBasis`, `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom`. It loads CSV data from a GitHub gist, formats year and sales values as numbers, and renders axes with gridlines, axis labels, and a colored area fill using the `area` generator.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This example shows US cancer cases from 2009-2022 as a combined line and area chart, with GDP as the y-axis and year as the x-axis. The chart is rendered using D3 v5 with SVG, using scaleLinear for both axes and d3.line, d3.area, and curveBasis to draw the smoothed line and filled area beneath it. Data is loaded as CSV from a GitHub gist, and the axes use tick marks with removed domain lines. The visualization applies a blue color to the area fill and a bold black stroke for the line, with a prominent title and axis labels.

Loading thumbnail…

Fork of Fork of Line Chart

This example visualizes India’s GDP in billion US dollars from 2009 to 2022 as a red line chart. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` with grid lines, and a `line` generator. Data is loaded from a CSV file via `d3.csv`, parsed with `new Date` and numeric conversion, then drawn in a centered group with margins, axis labels, and a title.

Loading thumbnail…

Fork of Fork of Pie Chart

This example shows the distribution of extinct animal species by country using a pie chart, with a legend displaying each country’s name and its corresponding count. The visualization is built with D3 v5, using the `d3.pie` and `d3.arc` generators to compute and render the SVG paths, and `d3.scaleOrdinal` to assign colors to each country. Data is loaded asynchronously from a GitHub-hosted CSV via `d3.csv`. Each slice is labeled through a custom legend, and numeric values are formatted with `d3.format`.

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, plotting petal length against petal width on the axes while coloring each point by species—setosa in pink, versicolor in blue, and virginica in red. The visualization uses D3 v6 (d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom) to render an SVG with circles whose radii are fixed but also encode sepal length and width via the `rx` and `ry` attributes. Data loads via `d3.csv` from a GitHub gist, and the chart fills the entire browser window.

Loading thumbnail…

Fork of ICE-6

A horizontal bar chart displays the populations of the top ten most populous countries for 2017, sorted in descending order. The visualization uses D3's `csv` function to load data from a remote gist, with `scaleBand` and `scaleLinear` mapping country names to y-axis positions and population values to bar widths. Rendered as an SVG through React, the chart includes red grid lines and axis labels generated via D3's tick functions.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x- and y-axes, with each point colored by species (setosa in blue, versicolor in red, and virginica in black). The code uses D3 v6’s `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a remote CSV, build linear scales, render axes, and draw circles via SVG. The plot fills the browser window, and points are fixed at a radius of 5 pixels, while sepal measurements are stored but not visually encoded.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x- and y-axes, with each point colored by species (setosa in blue, versicolor in red, and virginica in black). The code uses D3 v6’s `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a remote CSV, build linear scales, render axes, and draw circles via SVG. The plot fills the browser window, and points are fixed at a radius of 5 pixels, while sepal measurements are stored but not visually encoded.

Loading thumbnail…

IRIS Dataset Scatter plot

This example visualizes the classic Iris Dataset, plotting sepal length against petal length for individual flowers. Each circle represents a sample from one of three species, though the color mapping for species is not applied in the rendering. The visualization uses D3 v5 to load CSV data, create linear scales with `d3.scaleLinear` and `d3.extent`, and render the scatter plot as SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window and includes custom axis labels.

Loading thumbnail…

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

This visualization displays the top 20 countries by COVID-19 cases on January 28, 2020, using a horizontal bar chart rendered as SVG. React manages the component state and DOM elements, while D3 v5 provides scales (`scaleBand`, `scaleLinear`), CSV data loading, and tick generation. The data comes from a GitHub-hosted CSV file, and bars and axes are drawn as React elements positioned by D3 scales. Styling is handled via CSS, with green bars and red gridlines.

Loading thumbnail…

Fork of Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart displaying the first 20 countries from a COVID-19 dataset, with each bar’s length representing the number of cases reported on January 28, 2020. The chart is built using React for component rendering and D3 v5 for scales and axes, with SVG as the output format. D3’s `scaleBand` and `scaleLinear` position the bars and map case counts to pixel widths, while `xScale.ticks()` generates the axis tick labels. The data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Rendering Marks and Channels with React & D3

This example visualizes the top 20 countries by COVID-19 cases using a horizontal bar chart rendered as SVG. React manages the component state and lifecycle, fetching data from a CSV file via d3.csv, while d3.scaleBand and d3.scaleLinear create the categorical and quantitative scales. The chart displays green bars alongside custom gridlines and tick labels generated through React’s map function, with the data sourced from a GitHub gist containing pandemic statistics.

Loading thumbnail…

Rendering Marks and Channels with React & D3

This example shows motorcycle sales data across 20 countries as a horizontal bar chart, using blue rectangles positioned with `d3.scaleBand` and `d3.scaleLinear`. The code initializes React state with `useState` and loads CSV data asynchronously via `d3.csv`. Axes are manually drawn using React elements and `xScale.ticks()`, while `d3.max` computes the domain. The SVG rendering is handled entirely through React components, demonstrating how D3 scales and data join with React’s declarative approach.

Loading thumbnail…

Untitled

This scatter plot visualizes the Iris Dataset, a classic multivariate dataset of flower measurements, using a vanilla HTML implementation with D3. It displays the data points across multiple dimensions, allowing comparison of sepal and petal lengths and widths across the three iris species. The visualization leverages `d3.scalePoint` and `d3.scaleLinear` to map the axes, with `d3.select` and `d3.axisBottom`/`d3.axisLeft` rendering the chart elements. The plot is interactive, highlighting individual points on hover to reveal their species and values.

Loading thumbnail…

Rendering Marks and Channels with React & D3

This example visualizes the GDP of countries as a horizontal bar chart using React and D3. It shows the top 10 countries by population from a CSV data source. The code uses `d3.csv` to load and parse data, `d3.scaleBand` and `d3.scaleLinear` for axes, and renders SVG rectangles for bars with axis ticks and labels.

Loading thumbnail…

SCATTER PLOT WITH IRIS DATASET

This visualization plots the Keeling Curve, showing monthly average and interpolated CO2 concentrations from NOAA’s Mauna Loa records over time. Two line charts trace the raw average and interpolated data against a shared x-axis of decimal dates, with gridlines extending from the axes. The example uses D3’s `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to generate the paths and axes, loading data from `co2_mm_mlo.csv` via `d3.csv`.

Loading thumbnail…

IRIS Dataset Scatter plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal length for individual flowers. The code uses D3 v5 to load CSV data, map it to x and y scales via `scaleLinear` and `extent`, and render circles as SVG marks. Axes are added using `axisLeft` and `axisBottom`, with margins and responsive sizing based on the window dimensions.

Loading thumbnail…

Fork of Assignment 5 - Bubble Chart

This bubble chart visualizes average horsepower versus average torque for various car brands, with bubble size encoding average highway MPG and color distinguishing each make. A black tooltip appears on hover, displaying the car brand. The visualization is built with D3 v7, using SVG circles, linear scales for axes, a power scale for bubble radius, and an ordinal color scale. Data is loaded from a CSV file, and the chart includes legends for bubble size and color categories.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data using D3.js, displaying the file size, row count, and column count of a GDP dataset in a styled HTML page. The code uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to calculate its size, then updates the DOM with the summary information. The visualization also includes an embedded SVG illustration of a house and uses D3 v7 within a React framework.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data with D3.js, displaying the dataset's size, row count, and column count on an HTML page. The visualization pairs a static SVG city illustration with a styled message area that updates dynamically. The code uses `d3.csv` to fetch the remote CSV file, `d3.csvFormat` to calculate the data size in kilobytes, and JavaScript to populate the message container. The page also incorporates CSS for typography and layout, with D3 v7 loaded via a CDN.

Loading thumbnail…

My Emoticon

A large circular emoticon face combines a red background, cartoonish blue eyes, and a stylized smile built from layered SVG paths. The React application renders the face by composing separate `Eyes` and `Smile` components, which are positioned using SVG `<g>` elements with `translate` and `scale` transforms, then mounted through `ReactDOM.render`. The visual style relies on CSS classes defined in `style.css` to color the various path and ellipse shapes.

Loading thumbnail…

Fork of Smile

A stylized red smiley face is rendered on a black-outlined circle, combining two distinct SVG components: a pair of detailed cartoon eyes and a wide, expressive mouth. Built with React and drawn using SVG elements, the composition layers ellipses, paths, and circles to create depth and character. The code imports the `Smile` and `Eyes` components, positions them with SVG `transform` attributes, and leverages CSS classes for styling, all within a React production build.