Arookie-2020

@Arookie-2020·9 public vizzes

Pathetic Bar Chart

This example presents the top 10 most populous countries as a rudimentary bar chart with no axes or labels, using only filled rectangles scaled by population. Built with React and D3 v5, it loads CSV data from the United Nations World Population Prospects 2019 via `d3.csv`, then maps population values to bar widths using `scaleLinear` and countries to vertical positions with `scaleBand`. Rendered as an SVG, the visualization intentionally omits all chart furniture, emphasizing raw data relationships in a minimal, "pathetic" aesthetic.

Jul 18, 2021

Loading thumbnail…

Rendering Data with React

This example renders a pie chart of CSS named colors using React for the user interface and D3 for the data loading and geometry. The `d3.csv` function fetches color data from a remote gist, while React's `useState` and `useEffect` manage the asynchronous loading state. Each slice is drawn as an SVG path using `d3.arc` and `d3.pie`, with the fill color pulled directly from the dataset's hex values. The visualization displays the full spectrum of named colors as equal-sized wedges.

Jul 18, 2021

Loading thumbnail…

Fork of Vega-Lite API Template4

This visualization displays a bar chart of population by country, with bars colored by religion and tooltips showing population values on hover. The data comes from the UCI Auto MPG dataset via a Gist, though the shown attributes reference country and religion. Built with Vega-Lite API, it registers Vega and Vega-Lite libraries, loads CSV data using d3.csv, and renders the chart as SVG with custom axis and label styling from a config object. The visualization auto-fits to the window size and includes a Vega Tooltip handler for interactive detail viewing.

Jul 17, 2021

Loading thumbnail…

Fork of Vega-Lite API Template3

This visualization shows a bar chart of population by country, sorted in descending order, with tooltips displaying the raw population values on hover. It uses the Vega-Lite API to define the chart specification, while D3.js loads the CSV data from a Gist. The rendering pipeline combines Vega, Vega-Lite, and Vega-Lite API libraries, with Vega-Tooltip for interactive hover details. The chart is configured to fit the full browser window and uses custom axis styling for improved readability. Data originates from the UCI Machine Learning Repository’s Auto MPG dataset.

Jul 17, 2021

Loading thumbnail…

Fork of Fork of Vega-Lite API Template2

This example displays a line chart of temperature readings over time, using a simple categorical tooltip to show each value. The visualization is built with the Vega-Lite API, which is registered with the Vega and Vega-Lite libraries, and rendered as an SVG. Data is fetched asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styling for improved readability.

Jul 17, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API Template presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a GitHub Gist. The visualization shows vehicle fuel efficiency (mpg) against horsepower, with color encoding by country of origin and point size encoding weight, plus tooltips displaying car names. Built with the Vega-Lite API (vl), it registers Vega and Vega-Lite for rendering, uses d3.csv to load data, and applies custom axis and label styling from a config file. The chart auto-fits to the browser viewport with an SVG renderer and integrates vega-tooltip for hover interactions.

Jul 17, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load CSV data with D3 and manage it through React state. The app displays a summary message showing the dataset’s size in kilobytes, row count, and column count. It uses `d3.csv` to fetch CSS named colors from a GitHub gist, with `useState` and `useEffect` handling data loading and state updates. The rendering is plain SVG-free text via a `<pre>` element, and the formatting relies on `d3.csvFormat` to calculate the file size.

Jul 17, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, then display summary statistics about the dataset. Using D3 v7, it fetches a CSV file of CSS named colors from a GitHub Gist and reports the file size in kilobytes, the number of data rows, and the column count. The code highlights both the primary `d3.csv` method for direct parsing and an alternative approach using the Fetch API with `d3.csvParse`. Results appear in a large `<pre>` element.

Jul 17, 2021

Loading thumbnail…

Mouse Follower

A single dark circle tracks the mouse cursor across a blank SVG canvas. The example demonstrates how React state can drive D3 visualizations by updating the circle’s center coordinates on every mouse move. It uses React hooks, specifically `useState` and `useCallback`, to handle the `onMouseMove` event on the SVG element, while importing only the `arc` function from D3 v5, though the rendered output is purely a positioned circle.

Jul 17, 2021