S

Snigdha6698

@Snigdha6698·36 public vizzes

Loading thumbnail…

Network graph

This network graph visualizes connections between seven Texas cities, with colored circles representing nodes and green lines showing links between them. The graph uses a force-directed layout from the older `d3.layout.force` API, with circle radius and link thickness reflecting edge weights from the loaded JSON data. Nodes are draggable, and their positions update continuously during the simulation, with city names displayed next to each circle. The SVG rendering approach and d3.v4 library are used throughout.

Loading thumbnail…

Famil Tree

This visualization shows a family tree with colored circles representing individuals and lines connecting parents to their children. The data is hardcoded as a list of parent-child relationships, and the tree layout is computed using D3's `d3.stratify()` and `d3.tree()` functions. Rendered as an SVG with animated transitions, nodes are drawn as circles styled with pink fills and blue strokes, while text labels appear inside each circle. The animation uses D3's `.transition().duration()` to smoothly draw connections and reveal nodes over time.

Loading thumbnail…

USA Country Map

This choropleth-style map displays the contiguous United States rendered as an SVG, with each state filled in maroon and state boundaries drawn in black. The visualization uses a React component with the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw the geographic features. State boundaries are created using TopoJSON’s `mesh` function, while the underlying data comes from a remote TopoJSON file served via a GitHub gist. The map is static with no interaction or animation.

Loading thumbnail…

ICE8 World Map

This example displays a world map using the Natural Earth projection, with country boundaries rendered as filled paths on an SVG canvas. It demonstrates fundamental D3.js DOM manipulation by loading geographic data from a remote TopoJSON file, converting it to GeoJSON with the `feature` function, and projecting it using `d3.geoPath` and `geoNaturalEarth1`. The sphere outline and countries are styled via CSS, with sky-blue fills and thin stroke outlines. The visualization relies on D3 v5 and TopoJSON v3 to generate the map.

Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart displays the number of users across different years, with each slice colored distinctly and accompanied by a legend showing the year and corresponding user count. The visualization loads comma-separated data from a GitHub gist URL using d3.csv, then applies the d3.pie and d3.arc generators to compute and draw the SVG paths. Colors are assigned via d3.scaleOrdinal with a fixed array, while the legend uses SVG rectangles and text elements positioned with translate transforms.

Loading thumbnail…

fork of ICE-7

This line chart shows the number of international students in the USA over time, with years on the x-axis and student counts on the y-axis. The visualization uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for scaling, and d3.line to generate the path. It renders as an SVG with gridlines, axis labels, and a green stroke, styled via CSS. Data is parsed using d3.timeParse for year formatting.

Loading thumbnail…

Fork area

This fork-area chart displays the number of Apple users over time, with a purple filled area beneath a smooth curve. The visualization uses D3 v6 with SVG rendering, employing `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the path. Data is loaded via `csv` from a remote dataset, with dates parsed using `timeParse`. Axes are customized with tick formatting and labels, and the chart includes a titled layout with margins, gridlines, and rotated axis text.

Loading thumbnail…

Reusable Scatter plot

This animated scatter plot visualizes the Iris dataset, showing relationships between petal and sepal measurements, with points colored by species (setosa, versicolor, virginica). The visualization cycles through different attribute pairs on the axes every two seconds, dynamically updating via a reusable chart component. Built with D3.js v6, it uses scaleLinear for axis scaling, axisLeft and axisBottom for ticks, and SVG circles for marks. The code imports scatterPlot, a custom reusable function following the Towards Reusable Charts pattern, with data loaded via d3.csv.

Loading thumbnail…

Fork of area

This area chart shows India’s annual CO2 emissions per capita over time, using a smooth curve to emphasize the upward trend. The visualization loads CSV data from a GitHub gist, parses years as dates, and maps them to a time scale while emissions use a linear scale. Rendered as SVG, the chart employs d3.area with curveBasis, along with axisBottom and axisLeft for labeled axes, and custom tick styling via CSS.

Loading thumbnail…

Fork line chart

This fork line chart displays annual US auto sales from 2005 to 2022 using an SVG line path rendered with d3.line. The x-axis uses d3.scaleTime for yearly dates, while the y-axis employs d3.scaleLinear to map sales values. Axes are generated with d3.axisBottom and d3.axisLeft, with gridlines and labels styled via CSS. The data is loaded from a CSV file using d3.csv. The chart highlights the sales trend in red, with margins and axis-label positioning handled through D3’s selection and transform methods.

Loading thumbnail…

ICE7 line chart

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 visualization uses d3.csv to load the dataset from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data coordinates. The chart is rendered as an SVG path using d3.line, with axes generated via d3.axisBottom and d3.axisLeft, and includes gridlines, axis labels, and a title.

Loading thumbnail…

ice7 pie chart

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its value in thousands and accompanied by a legend listing country names and corresponding figures. The visualization uses D3.js v5 with an SVG rendering, employing the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate the chart from CSV data fetched via `d3.csv`. The code maps death counts to a categorical color scheme and appends text labels and legend elements directly to the SVG.

Loading thumbnail…

piechartfork

A pie chart displays the 2015 sales for different companies, with each slice colored and labeled in a legend alongside its total value. The visualization uses D3 v5’s `pie` and `arc` functions to generate the SVG segments, with `scaleOrdinal` assigning colors from a fixed palette. Data is loaded asynchronously via `d3.csv` from a gist, and the chart is rendered within a React-based HTML page, with legend text and values formatted using `d3.format`.

Loading thumbnail…

ICE 7 fork

A donut chart displays 2022 US auto sales by brand, with the total sales volume for each brand represented as a slice of the circle. The visualization uses D3.js version 5, specifically the `pie`, `arc`, and `scaleOrdinal` APIs to calculate slice angles and apply a categorical color palette. Data is loaded asynchronously from a CSV file via `d3.csv`. Each slice’s fill color corresponds to a legend on the right, which lists brand names and their sales figures formatted in thousands with a “K” suffix.

Loading thumbnail…

ICE7 Pie chart

This pie chart visualizes the distribution of credit ratings, with the largest segment representing 73.21% for "AAA Local" ratings. The chart is rendered as an SVG using D3 v5, with `d3.pie` and `d3.arc` generating the segments and `d3.scaleOrdinal` assigning colors from a custom palette. A legend accompanying the chart displays each rating label and its corresponding percentage value, formatted with `d3.format`. Data is loaded asynchronously from a JSON file and parsed into numeric values before rendering.

Loading thumbnail…

ICE 6 Scatter Plot

This D3.js scatter plot visualizes the Iris Dataset, plotting petal length on the x-axis and petal width on the y-axis. Data points are color-coded by species: pink for setosa, green for versicolor, and blue for virginica. The visualization encodes each flower’s sepal length and width as the `rx` and `ry` attributes of the circles, adding an additional dimension to the plot. Built with vanilla HTML, it uses `d3.csv` to load the data, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for scales and axes, and appends SVG circles to render the marks.

Loading thumbnail…

fork

A horizontal bar chart displays the 2019 population estimates for the ten most populous US states. The React application uses D3.js v5 to fetch CSV data from a GitHub gist, then maps state names to the y-axis and population values to the x-axis. SVG rectangles render the bars with a skyblue fill, while green gridlines and axis labels are generated using D3's scaleBand, scaleLinear, and tick functions.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x- and y-axes while coloring each point by species (setosa, versicolor, virginica). Circles are rendered using D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with the sepal measurements stored as unused `rx` and `ry` attributes. The SVG fills the window, and data is loaded asynchronously via `d3.csv` from a GitHub gist. The view includes 24-pixel tick labels and no interactivity.

Loading thumbnail…

fork

This visualization displays a horizontal bar chart ranking the top 10 most populous countries, with country names on the y-axis and population values on the x-axis. It uses React to manage the component state, loading data from a CSV file via `d3.csv`, and renders the chart as an SVG. The chart employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis, with bars representing each country's population.

Loading thumbnail…

Fork of ICE6

This visualization displays a horizontal bar chart of the top 10 countries by population from a CSV dataset loaded via a URL. The bars are rendered as SVG rectangles using D3 scales, with the x-axis showing population values and the y-axis listing country names. The React app uses D3's `csv` to fetch and parse data, `scaleBand` and `scaleLinear` for positioning, and renders the chart inside an SVG element with a steelblue fill.

Loading thumbnail…

ICE 6 -2

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v6 (d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom) to render SVG circles, sized with a fixed radius. Data is loaded as CSV and parsed into numeric values. The chart fills the viewport, with axes labeled and tick text enlarged for readability.

Loading thumbnail…

ICE6

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family structure, with green and blue bars representing different meter readings. The code uses React with d3-scale-band and d3-scale-linear scales, d3.stack for stacking, and SVG rendering to display the data. The chart loads CSV data from a GitHub gist and includes labeled axes, a legend, and a vertical y-axis label. It employs d3.csv for data loading and d3.max for computing the domain, with the visualization showing account-specific usage patterns over time.

Loading thumbnail…

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

This example shows a horizontal bar chart ranking the top 10 most populous countries, with country names on the y-axis and population values on the x-axis. The chart loads data from a CSV file using `d3.csv`, sorts and slices the data to the first ten rows, and renders SVG rectangles whose widths are scaled using `d3.scaleLinear`. React manages the component state via `useState` and `useEffect`, while D3 provides the scales, axes, and tick formatting. The visualization demonstrates how React and D3 can be combined to render marks and channels declaratively.

Loading thumbnail…

Untitled

This visualization shows the average share of renewable energy production from 2000 to 2020 across EU member states, with each year plotted as a green vertical bar. The bar heights are scaled proportionally to the data’s maximum value, and axis tick labels appear at intervals rounded up to the nearest five. Built with p5.js, the sketch loads a CSV dataset via `loadTable`, draws axes and gridlines using Canvas drawing functions like `line` and `rect`, and spaces bars dynamically based on row count and available chart width.

Loading thumbnail…

Fork of dataset ICE6

This example displays a horizontal bar chart comparing the population or quantity of the first ten entries from a CSV dataset of Brazilian stock tickers. The visualization uses React to manage state and D3 v5 for scales, axes, and SVG rendering. Data is loaded asynchronously via `d3.csv`, while `scaleBand` and `scaleLinear` position the bars and map values to widths. The chart includes custom axis ticks and styled rectangles, with all rendering happening inside a single SVG element.

Loading thumbnail…

code5

This example displays a webpage with a static SVG diagram and a text summary of a store dataset loaded from a CSV file. It uses D3 v7’s `d3.csv` to fetch and parse the data, then computes and shows the file size, row count, and column count. The page also demonstrates ES6 module imports for D3 functions and local variables, and applies custom styling via an external CSS file.

Loading thumbnail…

Fork of code5

This example demonstrates loading and summarizing a CSV dataset, displaying basic file statistics such as row and column counts. It uses D3 v7’s `d3.csv` and `d3.csvFormat` to fetch and measure the data, then writes the summary into a page element. The page also showcases modular ES6 imports and a custom stylesheet, with a salmon background and a large image loaded from a GitHub repository.

Loading thumbnail…

code5

This example displays a static SVG diagram alongside a text report that summarizes a CSV dataset. The page loads D3 v7 from UNPKG and uses `d3.csv` to fetch data from a GitHub gist, then calculates the file size in kilobytes with `d3.csvFormat`, counts rows and columns, and inserts that message into a `<pre>` container. Styling via `newstyle.css` sets a salmon background and centers the 800-pixel image. The code also includes unused ES6 module imports showing D3’s `select` function and a local `message` export.

Loading thumbnail…

Untitled

This example displays basic dataset summaries for a CSV file loaded from a GitHub gist, showing file size in kilobytes, row count, and column count in a pre-formatted text container. The page also includes a static SVG diagram and a heading. The code uses D3 v7’s `d3.csv` to fetch and parse the remote data, then applies `d3.csvFormat` to calculate the formatted file size. Results are written to the DOM via `document.getElementById`, and the HTML page links to an external stylesheet named `newstyle.css`.

Loading thumbnail…

code5

This example shows a summary of a movie dataset loaded from a CSV file, displaying the file size, row count, and column count in a text container on an HTML page. It includes a static SVG image and a React-compatible setup. The code uses d3.csv to fetch and parse the remote CSV, d3.csvFormat to compute the file size, and d3.csvFormat and data.columns to report dataset dimensions. Styling is handled via a linked CSS file, with D3 v7 loaded from a CDN.

Loading thumbnail…

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

This example demonstrates how to load and parse a CSV dataset in the browser using D3.js, displaying basic metadata about the movie dataset in a pre-formatted text container. The page shows the dataset’s file size in kilobytes, row count, and column count. It uses the `d3.csv` method to fetch the remote CSV file from a GitHub gist, then employs `d3.csvFormat` to calculate the data size. The results are written to the DOM via `document.getElementById` with React.

Loading thumbnail…

invert smiley

This example renders a pink smiley face with an inverted expression using React and D3. The code draws a large circle for the head, two small white circles with brown strokes for eyes, and an arc-shaped mouth created with the D3 `arc` generator. The SVG elements are positioned using React JSX, with D3 handling the geometric calculations for the mouth’s path. The visualization uses SVG for rendering and demonstrates combining React’s declarative component structure with D3’s shape utilities.

Loading thumbnail…

Fork of homework smiley face

This example shows a stylized smiley face rendered as an interactive-free vector graphic, with green pupils, purple irises, and a smile formed by a D3 arc path. The face includes exaggerated features such as thick black eyebrows, eyelashes, and vertical lines on the sides, all drawn as SVG elements within a React component. The code uses React 17 and D3 v7, specifically the `arc()` generator to create the mouth, while all other shapes are plain SVG circles, ellipses, and lines. The SVG canvas is 960 by 500 pixels, centered by a transform, and the face is constructed with fixed numeric coordinates.

Loading thumbnail…

This is fork smiley for ICE-4

This fork of the classic smiley face example renders a static SVG scene using React and D3.js v7. It shows a large circular face with two eyes, colored pupils, a mouth drawn as an arc, and stylized hair and eyebrow lines. The visualization is constructed declaratively in React, with SVG primitives like circles, ellipses, and lines, while D3’s `arc` API generates the mouth path. All elements are positioned relative to a central transform, with hardcoded dimensions and stroke widths.

Loading thumbnail…

Fork of ICE4 cat face

This example shows a stylized cat face made of geometric shapes, built as a React component rendered to SVG. The face includes a circular head with eyes, ears, whiskers, and a mouth arc, each drawn using SVG primitives like circles, ellipses, lines, and paths. The code uses D3’s `arc` generator to create the mouth shape and relies on JSX within React to compose the SVG elements. All dimensions and positions are hard-coded, with no external data or interactivity.

Loading thumbnail…

ICE4 cat face

This example draws a stylized cat face using React and D3 v7, rendered as SVG. The face consists of a large circle for the head, two eyes with green pupils and purple centers, whiskers made from black lines, and ears formed by thick strokes positioned at the top corners. A mouth is generated by the `d3.arc()` function with an inner and outer radius, creating a curved shape. All elements are positioned relative to the center of a 960×500 viewport.