steelerfan107

@steelerfan107·12 public vizzes

Fork of Missing Migrants on a Map

This example visualizes the share of the population infected with HIV/AIDS across countries for 2017, using a choropleth map colored with a sequential yellow-orange-red scale. The map is rendered with React and D3 v5, using `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from World Atlas TopoJSON. The color scale maps the disease prevalence values from the Missing Migrants Dataset to the color legend sequentially via `scaleSequential`.

Mar 16, 2021

Loading thumbnail…

Fork of Working with Time

This visualization uses a React-based D3 v5 implementation to display a scatter plot of the Data Canvas Sense Your City dataset. It aggregates the dataset’s “Total Dead and Missing” values over time, binning the reported dates into monthly intervals using D3’s histogram function with `timeMonths` thresholds. The resulting bar chart is rendered as SVG rectangles, with time on the x-axis and the binned death counts on the y-axis. The code explicitly defines axes with `scaleTime` and `scaleLinear`, and formats tick labels using `timeFormat`.

Mar 13, 2021

Loading thumbnail…

Fork of Polished World Map

This visualization presents a natural Earth projection world map with country boundaries, graticules, and city locations. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land masses and interiors from World Atlas TopoJSON data, while circles sized by population via d3.scaleSqrt represent cities from a CSV dataset. Built with React and D3 v5, the SVG rendering applies subtle gray styling to geographical features and semi-transparent teal dots for urban centers.

Mar 13, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The visualization displays points colored by species, with dropdown menus to select which measurements appear on the x and y axes, and maintains a color legend that highlights points of a selected species while dimming others. Built with React and d3.js using the `scaleLinear` and `scaleOrdinal` functions, the plot renders as SVG with custom axes and mark components.

Mar 13, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This visualization demonstrates a pet-selection dropdown interface where the choice updates the displayed state. The React app uses a `Dropdown` component to manage user input, with options that have mismatched labels and values, causing a misleading display of selected pets. The code relies on React and ReactDOM to render the interface, while the dropdown’s `onChange` event triggers a state update. The interface is presented in a full-screen HTML page with styled controls, though the actual visual feedback of the selection is not shown beyond the console log.

Mar 11, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the pathetic bar chart displays the top 10 most populous countries as green landmasses on a black globe, with white graticule lines and country borders. It uses React with D3 v5 to load world topology data via `d3.json` and `topojson.feature` and `topojson.mesh`. The map is rendered as SVG using `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule`. Population data comes from the United Nations World Population Prospects 2019, though no bars or axes are shown.

Mar 11, 2021

Loading thumbnail…

Mouse Follower

A bar chart displays the ten most populous countries for 2020, with horizontal bars stretching from the left edge based on population size. The visualization uses React hooks to load and parse the data from a CSV file via `d3.csv`, then renders SVG rectangles positioned with `scaleBand` for country categories and `scaleLinear` for population values. The chart updates asynchronously, showing a loading message until the data arrives. The bars span the full window dimensions, with no axes or labels visible.

Mar 5, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization demonstrates loading and parsing a CSV file containing CSS named colors. It displays three statistics about the dataset: the file size in kilobytes, the number of data rows, and the number of columns. The example uses the D3.js library’s `d3.csv` method to fetch the remote CSV URL and handle the asynchronous response with a Promise. After loading, `d3.csvFormat` converts the parsed data back to a string to calculate its length, which is then rendered as text in a large HTML `<pre>` element.

Mar 3, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example shows how to fetch and parse CSV data from a remote URL using the native Fetch API. It defines an asynchronous function that retrieves the text content of a CSV file containing CSS named colors, then logs the raw text to the browser console for inspection. The code demonstrates both a modern async/await approach and an older promise-chain alternative, with the fetch call targeting a GitHub Gist hosted dataset. No data transformation or visualization occurs yet, as the focus is purely on loading the data into the application.

Mar 3, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads a CSV file of CSS named colors and displays its metadata: file size, row count, and column count in large text. It uses D3 v5’s `d3.csv` method to fetch and parse the remote CSV, then accesses the resulting data’s `length` and `columns` properties to compose the message. The page also includes commented-out alternatives for parsing via `fetch`, `async`/`await`, and `d3.csvParse`. The visualization is minimal, focusing solely on the parsed data’s summary statistics.

Mar 3, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A grid of fifty randomly generated smiley faces rendered with React components and SVG. Each face uses the `d3.arc()` API to create its mouth, while the background circle, eyes, and mouth are composed from reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`). The faces vary randomly in eye radius via `Math.random()`, producing subtle visual differences across the grid. The SVG viewport is fixed at 100 by 100 pixels per face, with the entire layout generated programmatically using D3's `range()` function.

Mar 2, 2021

Loading thumbnail…

Part 1

A yellow circle with two black eyes is rendered on an SVG canvas. The graphic is created using React and ReactDOM, with circle positions and sizes defined by variables for the center point, eye offset, and stroke width. The visualization demonstrates a simple, static composition built programmatically through SVG elements within a React application.

Feb 27, 2021