SravaniPosina

Line Chart

This line chart visualizes student growth rates from 1980 to 2005, with years on the x-axis and growth rate on the y-axis. The chart uses d3.csv to load external data, then d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with d3.extent and d3.max for path generation. Rendered as SVG, the chart includes axis labels and a title, with the line path styled in red via CSS.

Mar 12, 2023

Fork of Pie Chart

This example shows a pie chart of fruit sweetness levels, with each slice labeled by fruit name and its corresponding sweetness value in a legend beside the chart. The visualization splits the data into colored segments using D3’s `pie` and `arc` generators, with colors assigned via `scaleOrdinal`. It loads CSV data from a GitHub gist using `d3.csv`, renders the chart as SVG, and displays legend entries with fruit names and formatted sweetness numbers using `d3.format`. The code uses React for component structure and D3 v5 for all data binding and visual encoding.

Mar 11, 2023

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes, with each species represented by a distinct D3 symbol shape. Built as a reusable D3 module, it uses `scaleOrdinal` to assign symbols, `scaleLinear` for axes, and `symbolGenerator` to generate SVG paths. The code draws axes with `axisLeft` and `axisBottom`, and loads data asynchronously via `d3.csv`.

Mar 11, 2023

Fork of PieChart ICE7

This pie chart shows the top 10 car-producing countries in the world for 2019, with each slice colored and labeled in a legend that includes the country name and its production value in thousands. Built with D3 v5, the visualization loads CSV data from a GitHub gist using `d3.csv`, calculates totals per country, and renders the chart as SVG paths using `d3.pie` and `d3.arc`. A `d3.scaleOrdinal` assigns colors to the slices, while the legend is manually positioned with appended circles and text elements.

PieChart ICE7

This pie chart displays the top 10 car-producing countries in 2019, showing each country’s total vehicle output as a proportional slice with a color-coded legend. The chart uses D3 v5’s `pie` and `arc` generators to compute angles and render SVG paths, while `scaleOrdinal` assigns colors. Data is loaded as CSV from a GitHub gist via `d3.csv`, and each country’s value is read from the ’2019’ column, with totals formatted in thousands. The legend pairs circles and text labels with the corresponding values.

Piechart ICE7

This pie chart displays the number of vehicles seized across different U.S. states, with each slice color-coded to correspond to a state listed in a legend alongside its value. The visualization uses D3 v5’s `pie` and `arc` generators to compute and render the SVG paths, with `scaleOrdinal` assigning colors. Data is loaded asynchronously from a CSV via `d3.csv`, and slice labels show values in thousands formatted with `d3.format`, while tooltips and hover interactions are absent.

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes. D3’s `scaleLinear` and `scaleOrdinal` functions position the points and assign distinct symbol shapes to each iris species. Using `d3.symbol` with a `symbolGenerator`, the chart renders three different marker types, while `axisLeft` and `axisBottom` add labeled scales. The code imports from the D3 v6 library and loads data from a remote CSV URL.

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris dataset, mapping petal and sepal measurements to x- and y-axes. It cycles through four data columns every two seconds, updating the x-axis and point positions. The code uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with SVG circles rendered via the `join` API for incremental updates.

Fork of Reusable D3 Scatter Plot

A reusable scatter plot animates the Iris Dataset, cycling through four measured variables on the x-axis every two seconds while sepal length remains fixed on the y-axis. Built with D3 v6, the chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The code demonstrates a configurable chart factory pattern, where setters like `.width`, `.data`, and `.xValue` update the visualization, with `setInterval` triggering re-renders to switch between petal width, sepal width, petal length, and sepal length.

Fork of Reusable D3 Scatter Plot

Fork of ICE6 - Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie in green, Gentoo in violet, and Chinstrap in red). The visualization uses D3 v5 within a React framework, rendering circles via SVG. The code leverages `d3.csv` for data loading, `scaleLinear` for axes, and `extent` to compute domains, while also encoding bill length and depth as unused circle radius properties.

Mar 8, 2023

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

This example shows a horizontal bar chart of the top 15 Netflix movies by score, with red gridlines and labeled axes. It uses React to manage state and render the SVG, while D3 v5’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions handle data loading and scaling. The code builds custom axis ticks and rectangles instead of using D3’s axis generators, and the raw data comes from a gist-hosted CSV file. The chart updates when new data is fetched via the `useEffect` hook.

Mar 8, 2023

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

This horizontal bar chart compares the basic monthly cost of Netflix in fifteen countries. The visualization renders marks as rectangles using React and D3 v5, with D3’s `scaleBand` and `scaleLinear` mapping countries and costs to screen coordinates. Data originates from a CSV file fetched via `d3.csv`, and the SVG output is produced manually through JSX elements.

Mar 8, 2023

ICE-6: Sample example for Marks and channels with d3.js

This example shows the basic cost of Netflix subscriptions for 15 countries using horizontal bars, with each bar’s length encoding cost and the country name as a categorical label. The chart is built with React and D3 v5, using `scaleBand` for the y-axis positions and `scaleLinear` for the x-axis values, rendering SVG rectangles. Data is loaded asynchronously from a CSV file via `d3.csv` and includes a custom row parser to convert numeric values, with axes drawn manually using `xScale.ticks()` and custom text elements rather than D3’s axis components.

Mar 3, 2023

ICE5

This example displays metadata from a store dataset, including row count, column count, and file size, presented as text on a styled HTML page with a background image. It fetches a CSV file from a GitHub Gist using D3’s `d3.csv` function, then formats the data with `d3.csvFormat` and calculates its size in kilobytes. The visualization is rendered with plain HTML elements, including headings and a `<pre>` block, styled by a linked CSS file, and uses React only as a framework reference. The page relies on D3 v7 and JavaScript for data retrieval and message assembly.

Mar 1, 2023

Fork of ICE5

This page displays metadata about a credit card customer dataset, including its size in kilobytes, row count, and column count. It uses D3 v7 to fetch a CSV file from a GitHub gist and parse it with `d3.csv`. The resulting information is formatted using `d3.csvFormat` and written to the page’s DOM via `textContent`. A CSS background image of a credit card and hyperlink to the source dataset are also included.

Fork of yasmeen

This page displays metadata for a New York Uber Cab Dataset, including the file size in kilobytes, the number of rows, and the number of columns. The visualization is minimal, presenting this information as plain text within an HTML page styled with CSS, featuring a cab background image. The code uses the `d3.csv` API to fetch the dataset from a remote URL and `d3.csvFormat` to compute its size, then writes the summary into a `<pre>` element. The page also provides a link to view the raw CSV data.

Fork of ICE5

This page displays metadata about a credit card customer dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a large, bold preformatted text block. It loads the dataset from a CSV URL using D3 v7’s `d3.csv` method, then formats the data with `d3.csvFormat` to calculate the byte length. The page uses a credit card SVG as a background image via CSS and includes hyperlinks to view the dataset and related documentation.

Fork of D3 Starter

This example demonstrates the simplest possible D3 visualization: a single text element reading "Hello D3 version 7" centered on a blank page. It shows how to set up a minimal D3 project using version 7 of the library, loaded via CDN, with the code split into an HTML entry point and a JavaScript module. The implementation uses `d3.select()` to target the `body` element and sets its text content directly, requiring no data binding or rendering pipeline. The page's large font size and centered layout highlight the output clearly.

Fork of Fork of Let's make a face with D3.js!

A smiling face rendered in SVG is centered and built entirely with D3.js shape primitives. The static face consists of yellow circles for the head and eyes, black strokes, and a donut-shaped mouth path created with the `arc` generator. An animation is driven by chained `transition().duration(2000)` calls, which move the two rectangular eyebrows up and down in a repeating cycle. All elements are appended to a group translated to the SVG center, using explicit pixel coordinates for positioning.

Feb 20, 2023