diska432

@diska432·11 public vizzes

World Map

This example visualizes a world map using a Natural Earth projection, displaying landmasses filled with a teal color and graticule lines shown as subtle gray strokes. It marks the boundaries between countries with highlighted interior lines. The code uses the D3 library’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` functions within a React component, rendering the map as SVG. The geographic data is sourced from the `world-atlas` package via TopoJSON, which is processed using `feature` and `mesh` functions.

Jul 7, 2023

Loading thumbnail…

Working with Time

This visualization displays temperature readings over a week, using a time-based x-axis and linear temperature y-axis. The line chart connects data points with a natural curve, providing a smooth representation of temperature fluctuations. React components render the SVG, while d3.scaleTime and d3.scaleLinear handle scales. The d3.line generator applies curveNatural to create the path, and axes are built with custom React components. Data comes from a CSV file of San Francisco weekly temperatures.

Jul 6, 2023

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. Each circle represents a flower specimen, with a fixed radius and teal fill. The chart uses React components to render SVG axes and marks, while D3’s scaleLinear and extent functions compute the scales from the CSV data. Axis labels and tick formatting are customized, and tooltips display values via SVG title elements.

Jul 6, 2023

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries for 2020, sourced from UN data loaded via D3's `csv` utility. The horizontal bars, rendered as SVG `rect` elements, use a teal fill and Poppins typography. React state manages the fetched data, while D3's `scaleBand` and `scaleLinear` position the bars and axes. A `<title>` element provides tooltips, and the x-axis tick labels are formatted using D3's `format` function.

Jul 5, 2023

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of UN population data for 2019, displaying the top 10 countries by population. The chart uses React components to render SVG bars and axes, with D3 utilities like `scaleBand` and `scaleLinear` for positioning and scaling. Data is loaded asynchronously via D3’s `csv` parser, and React’s `useState` and `useEffect` hooks manage the data fetching and state. The axes and marks are separated into reusable React components, demonstrating a modular approach to building visualizations.

Jul 5, 2023

Loading thumbnail…

Axes with React and D3

This example displays horizontal bar charts of the top ten countries by 2020 population from a United Nations CSV dataset. It uses React state to load the data through D3's `csv` utility, then renders an SVG with D3's `scaleBand` and `scaleLinear` for the axes. The code draws axis lines and tick labels via `.ticks()`, and creates the bars as SVG `rect` elements.

Jul 5, 2023

Loading thumbnail…

The Margin Convention

This example demonstrates a horizontal bar chart of the top 10 most populous countries in 2020, using D3 scales to map population counts to bar widths and country names to vertical positions. The chart applies the margin convention, translating the SVG group by a fixed margin so the bars fit within the inner chart area. React state manages the fetched CSV data, loaded asynchronously via `d3.csv`, while `d3.scaleBand` and `d3.scaleLinear` handle the scales, and SVG `<rect>` elements render each bar.

Jul 5, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliation by country using a bubble chart. Each circle represents a country’s population grouped by religion, with circle size encoding population magnitude. The visualization is built with the Vega-Lite API, registered through Vega and Vega-Lite, and renders using SVG. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the code loads religion and population data via a CSV fetched with d3.csv. Custom axis styling and tooltips are configured through Vega-Lite’s config and the vega-tooltip handler.

Jul 5, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a remote CSV file using D3’s `d3.csv` method, then displays summary statistics about the parsed data. The program fetches a gist-hosted CSV file containing named CSS colors, counts the number of columns in the dataset, and calculates the approximate file size in kilobytes using `d3.csvFormat`. The resulting text output, formatted with large typography, appears inside a `<pre>` element, providing a minimal, direct visualization of the data’s basic properties without any graphical chart.

Jul 5, 2023

Loading thumbnail…

Smiley face Part II

A grid of fifteen smiley faces is generated randomly, each face varying in eye radius due to a `Math.random()` call. The example demonstrates component reusability in React by composing a `Face` from separate `BackgroundCircle`, `Eyes`, and `Mouth` components. The `Mouth` component uses D3's `arc` generator to create the smile path, while the `FaceContainer` handles SVG scaling and centering with a `translate` transform.

Jul 4, 2023

Loading thumbnail…

Hello D3

This example displays the text “Hello D3” centered on the page using a large CSS font size. The text is rendered by selecting the `.message` div and setting its content through D3’s `select` function. It uses the D3 v6 library, loaded via a CDN, and demonstrates a minimal setup with separate HTML and JavaScript files for a React-friendly workflow.

Jul 4, 2023