A

angelathacker123

@angelathacker123·22 public vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart shows one week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. It uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to map timestamps, temperatures, and cities to visual channels. Multiple city lines are rendered as SVG paths via d3.line with a curveBasis interpolation, sorted by their last temperature value, and accompanied by a custom color legend. Axes are drawn with d3.axisBottom and d3.axisLeft, with gridlines and labels styled through CSS.

Loading thumbnail…

Scatter 2nd Try

This scatterplot displays the relationship between petal length and sepal width for iris flowers, with each circle representing a data point. The visualization uses React to render SVG elements, while D3 v7 handles the data loading via `d3.csv`, scales through `scaleLinear`, and axis generation. Data comes from the classic iris dataset fetched from a remote CSV file. Hovering over a circle reveals its petal length value through a native SVG `<title>` tooltip element.

Loading thumbnail…

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Loading thumbnail…

Finished Stylizing Bar Chart

A horizontal bar chart displays the 2020 population estimates for ten countries, ordered by country name. The chart uses teal bars against a light background, with a formatted population label on the x-axis. The visualization is built with React and D3 v7, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a CSV of UN population figures, and SVG rendering with CSS styling creates the final polished appearance.

Loading thumbnail…

Stylizing Bar Chart

This example shows a horizontal bar chart of the top ten countries by 2020 population, rendered as SVG within a React component. The bars are styled with a teal fill, and both the plot area and labels use a Poppins font, with custom tick colors. The chart reads data from a CSV file provided by the `d3.csv` loader and uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The code manually creates axis tick marks and uses a `tickFormat` function with `d3.format` to abbreviate large numbers, converting units from "G" to "B".

Loading thumbnail…

Adding Style to Bar Chart

A horizontal bar chart displays United Nations population data for ten countries in 2020, with country names on the y-axis and population values on the x-axis. Built with React and D3 v7, it uses `scaleBand` for the categorical axis and `scaleLinear` for the numeric scale. SVG rectangles render each bar, while custom `AxisBottom` and `AxisLeft` components generate ticks and labels. The data loads asynchronously via D3's `csv` parser from a GitHub-hosted CSV file.

Loading thumbnail…

TRUE Successful Refactored Bar Chart

This bar chart displays the population of the top 10 countries for the year 2020, sourced from a CSV file of UN population data. The chart uses React with D3 v7, rendering SVG elements through custom components for the axes and bars. D3’s `scaleBand` and `scaleLinear` position the bars, while React hooks (`useState`, `useEffect`) manage data loading via `d3.csv`. The visualization highlights a refactored structure with separate components for bottom and left axes and marks.

Loading thumbnail…

Refactor Restart

A horizontal bar chart ranks the ten most populous countries by their 2020 UN population estimates. The visualization loads CSV data via d3.csv, maps it to a linear scale for population and a band scale for countries, then renders SVG rectangles using React components. D3 v7 handles the scales, while React manages the component structure, rendering axes and marks as reusable functional components. All elements are drawn with SVG within a fixed viewport, with loading state managed through React hooks.

Loading thumbnail…

Axes Works

This example shows a horizontal bar chart of the ten most populous countries from a UN population dataset for 2020, with labeled axes. The data loads via `d3.csv` from a GitHub gist, and the chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. React renders the SVG, generating tick marks and labels with `xScale.ticks()` and mapping data to `<rect>` elements.

Loading thumbnail…

Axes Second Try

This bar chart displays the top ten countries by population in 2020, with country names on the y-axis and population counts on the x-axis. The React app fetches CSV data from a GitHub gist using d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars and axes. d3.ticks generate gridlines and labels for an unfilled x-axis, while manually rendered text elements show country names. The visualization uses React state with useEffect to load and slice the data, rendering everything as SVG elements.

Loading thumbnail…

Axes with React and D3

This example shows a horizontal bar chart ranking ten countries by their 2020 population, with the data sourced from a UN population CSV file fetched via `d3.csv`. React controls the SVG rendering, mapping each country name through `d3.scaleBand` for the y-axis positions and population values through `d3.scaleLinear` for bar widths. The chart uses `d3.max` to determine the x-axis scale domain, and React's `useState` and `useEffect` manage the asynchronous data loading and display a "Loading..." message until the data arrives.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the ten most populous countries from a UN population dataset. The chart uses React to manage state and render SVG elements, with D3’s scaleBand and scaleLinear used to map country names and population values to pixel coordinates. A `<g>` element translates the chart by the specified margins, ensuring the bars are positioned within the allotted inner dimensions. The data is loaded asynchronously via `d3.csv`.

Loading thumbnail…

Rendering Data with React and D3 - Final

A React component uses D3's `pie` and `arc` generators to render a color wheel from a CSV of CSS named colors. The `App` component fetches the data with `useEffect` and `csv`, then maps each color to an SVG `path` filled with its hex value. D3's `arc` creates equal-width slices with no inner radius, while React's `useState` handles the asynchronous loading state. The visualization demonstrates direct React DOM rendering of D3-computed geometry in an SVG coordinate system.

Loading thumbnail…

Attempt Arc Rendering Data with React and D3

This example renders a pie chart from a CSV of CSS named colors, with each slice’s fill matching its hex value. The code uses React’s `useState` and `useEffect` to load the data via `d3.csv`, then builds the chart with `d3.pie` and `d3.arc` inside an SVG path element. It displays the full dataset as equal-width slices, with the chart centered in a 960-by-600 viewport and a large loading message before data arrives.

Loading thumbnail…

Rendering Data with React & D3

This example displays every CSS named color as a single path filling a semicircular fan, with each color’s RGB hex value used as the fill. The visualization uses React’s `useState` and `useEffect` to fetch the CSV data, then maps each row to an SVG `<path>` generated by the D3 `arc()` generator. The chart renders via React’s virtual DOM, while D3.js v5 handles the data loading and geometry calculation, producing a static, non-interactive radial color catalog.

Loading thumbnail…

Fork of Test if this is broken

This example visualizes CSS named colors as a radial burst, with each color category rendered as a slice emanating from the center of an SVG canvas. It loads color data from a CSV file using D3’s `csv` utility, then applies the `pie` and `arc` functions from D3 to compute and draw the sector paths. The visualization is built with React components, using hooks like `useState` and `useEffect` to fetch data and re-render once loaded, while D3’s `arc` generator positions each colored path based on the pie layout.

Loading thumbnail…

Test if this is broken

A radial burst of CSS named colors renders as a pie chart, with each slice filled by its corresponding hex value from a CSV dataset. React manages the component state and lifecycle, loading the data via D3’s `csv` utility and computing slice angles with `d3.pie`. The SVG paths are generated using `d3.arc` with an outer radius equal to the viewport width, creating a full-circle explosion of color emanating from the center.

Loading thumbnail…

Beginning Rendering Data with React and D3

This example displays a vertical color strip composed of 148 thin rectangles, one for each CSS named color, ordered as they appear in a CSV file. It uses React’s `useEffect` and `useState` hooks to asynchronously fetch and parse the data with `d3.csv`, then renders each row as a `div` with its background color set to the `RGB hex value` field. The visualization demonstrates a simple React-based mapping of tabular data to SVG-like DOM elements, showing the full CSS color palette as a continuous gradient-like band. Loading state is shown with a large “Loading…” text before data arrives.

Loading thumbnail…

Rendering Data with React and D3

This example renders the CSS named colors dataset as a vertical stack of 960-pixel-wide color swatches, each 4 pixels tall, using React to map each row to a styled `<div>`. The `App` component loads the CSV via `d3.csv` asynchronously with `useEffect`, stores the result in state via `useState`, and displays five swatches per row from left to right? The visualization demonstrates a simple React–D3 integration where D3 handles data fetching and parsing while React exclusively performs the DOM rendering, with a `<pre>` loading fallback before the CSV resolves.

Loading thumbnail…

Fork of Final Loading Data with React and D3

A React component fetches a CSV of CSS named colors using D3’s `d3.csv` utility, storing the parsed data in component state via the `useState` and `useEffect` hooks. While the data loads, a large “Loading…” message is rendered in a `<pre>` element. The example demonstrates asynchronous data loading in a React–D3 integration, where D3 handles the network request and React manages the state; no chart is drawn, as only the raw data is fetched and logged to the console. The final visualization is an SVG container, though it remains empty in the rendered output.

Loading thumbnail…

Final Loading Data with React and D3

This example demonstrates how to load external data with D3 utilities and manage it with React state, displaying a summary of the loaded dataset as text in a large `<pre>` element. The application fetches a CSV file of CSS named colors from a GitHub gist using `d3.csv`, then stores the parsed data via the `useState` and `useEffect` hooks. When the data arrives, a `message` function formats the dataset’s size in kilobytes, row count, and column count, which React renders on the page. The visualization uses no custom drawing, instead showing the raw data statistics as its output.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize CSV data asynchronously using React and D3. It fetches the CSS named colors dataset from a GitHub gist via D3's `csv` function, storing the result in React state with the `useState` and `useEffect` hooks. The rendered view displays a plain-text summary of the loaded data, including size in kilobytes, row count, and column count, calculated using `d3.csvFormat`. Until the data arrives, a “loading” message appears.