krandslam

@krandslam·7 public vizzes

Multiple Views with Brushing

This example combines a bubble map and a date histogram to explore the Missing Migrants Dataset. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from World Atlas TopoJSON, with circle size scaled by the square root of deaths. The histogram below aggregates monthly totals using `d3.bin` and `d3.timeMonths`. Brushing the histogram with `d3.brushX` filters the map’s circles by date range, demonstrating linked views through React state.

Oct 14, 2023

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping sepal length on the x-axis against sepal width on the y-axis. Each circle represents an individual iris flower, with axis labels and gridlines styled using CSS. Built with React and D3 v5, the example uses `scaleLinear`, `extent`, and `max` from the D3 library to compute scales and domains, while SVG circles render the data points with a custom `Marks` component. The axes are generated by `AxisBottom` and `AxisLeft` components, which use `xScale.ticks()` to produce tick marks and labels with a numeric format function.

Oct 13, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color occupying a slice of a circle. It loads color data from a CSV file using `d3.csv` and renders the slices as SVG paths with React. The layout is computed with `d3.pie` and `d3.arc`, while React manages the component state and handles the rendering of each path element. The visualization demonstrates a hybrid approach where D3 handles data loading and geometry calculations, and React handles the DOM updates.

Oct 13, 2023

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization presents the top 10 most populous countries as a "pathetic" bar chart, intentionally omitting axes and labels to strip the data down to its raw visual form. Using D3's `scaleBand` and `scaleLinear`, the chart maps country names to vertical bands and population values to horizontal bar widths within an SVG. The data comes from the United Nations World Population Prospects 2019, loaded via D3's `csv` function. Built with React, the chart updates state asynchronously, rendering a `<pre>` loading message until the data arrives, then displaying the SVG with filled rectangles.

Oct 12, 2023

Loading thumbnail…

Rendering Data with React

This example shows a bar chart of the top 10 countries by population in 2020, rendered as SVG elements via React. The underlying CSV data is fetched and parsed with D3’s `csv` utility, then scaled using `scaleBand` and `scaleLinear`. React’s `useEffect` and `useState` manage asynchronous data loading, while `ReactDOM.render` mounts the app. Each bar’s height and width are derived from D3’s `max` and scale functions, mapping country names and population values to screen coordinates.

Oct 11, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basics of loading and parsing CSV data with D3.js, displaying summary statistics about a dataset of named CSS colors. The visualization shows the file size (123 kB), row count (148 rows), and column count (4 columns) in large text. It uses the `d3.csv` function to fetch and parse the remote CSV file from a GitHub Gist, then `d3.csvFormat` to calculate the data size. The page presents the results in a simple pre-formatted text container, with commented-out alternatives using fetch and `d3.csvParse`.

Oct 9, 2023

Loading thumbnail…

Random generated Smiley Faces

The gallery displays a grid of randomly generated smiley faces, each rendered as an SVG composed of a yellow background circle, two eyes, and an arced mouth. React components structure the face, while D3’s `arc` API generates the mouth path. The index.js file maps over a D3 `range` to produce 18 faces, assigning random values for stroke width, eye offset, eye radius, and mouth dimensions per face, highlighting varied expressions within a consistent layout.

Oct 9, 2023