ltostes

@ltostes·8 public vizzes

Fork of Refactored Bar Chart

This example presents a bar chart of the ten most populous countries based on United Nations World Population Prospects 2019 data, loaded from a CSV URL. The chart displays population totals as horizontal bars, with country names on the y-axis and population values on the x-axis. It uses React for component-based rendering, d3.scaleBand and d3.scaleLinear for scaling, and d3.csv for data loading. The visualization renders as SVG, with separate React components for the bottom axis, left axis, and marks (rectangles), all coordinated through props.

Jul 27, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization renders CSS named colors as a radial burst of slices around a central point, with each slice filled by its corresponding hex value. The code loads color data from a CSV using `d3.csv`, computes slice angles with `d3.pie`, and draws them as SVG paths via `d3.arc`. React handles component state and rendering, updating the chart once the data arrives. The visualization uses React hooks like `useState` and `useEffect` to manage the asynchronous data loading.

Jul 26, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example plots automobile engine displacement against horsepower using a scatterplot overlaid on the full browser window. The data is loaded from a remote CSV file and rendered with the Vega-Lite API, which translates a declarative specification into an interactive visualization. The visualization uses the `vl` module to define the point marks, encoding x and y positions from quantitative fields, while enabling tooltips that display the car model name. Accompanying `config.js` settings customize axis appearance, and the `index.js` script registers the Vega and Vega-Lite libraries, applies the custom config, and appends the rendered SVG to the page.

Jun 15, 2021

Loading thumbnail…

Circle movement - with data

A React application displays a summary of data loaded from a remote CSV file, showing the file size, row count, and column count as text. The program uses D3’s `csv` function to fetch and parse the CSS named colors dataset, with React managing the asynchronous loading state via `useState` and `useEffect`. The rendered output is an SVG element containing a preformatted text block that updates from a loading message to the final statistical summary once the data arrives. The example demonstrates a simple pattern of combining D3’s data handling with React’s state management for dynamic visualization pages.

Jun 15, 2021

Loading thumbnail…

TestPlot

This example visualizes the distribution of athlete weights and heights from a CSV dataset, using colored bins to compare counts across sexes. It loads the data with `d3.csv`, processes weight, height, and sex fields, then renders a histogram with `Plot.rectY` and `Plot.binX` from the Observable Plot library. The chart is embedded into an HTML `<pre>` element, with D3 v6 providing data parsing and Plot handling the visualization.

May 24, 2021

Loading thumbnail…

Loading and parsinc CSV data

This example demonstrates loading and parsing CSV data using D3.js, displaying the file size in kilobytes, row count, and column count of a dataset of CSS named colors fetched from a GitHub Gist. The code uses `d3.csv` to asynchronously retrieve and parse the remote CSV, then computes the formatted size with `d3.csvFormat` before rendering the summary into an HTML `<pre>` element. Alternatives using the Fetch API with `d3.csvParse` are also included as comments.

Apr 25, 2021

Loading thumbnail…

Circle movement

A yellow circle with a black outline follows the mouse cursor across an SVG canvas. The circle's position is updated in real time using React state and a mouse move event handler. The visualization uses React's `useState` and `useCallback` hooks alongside D3's `range` utility, with an SVG `<circle>` rendered directly. The code includes reusable components for a face, but the active example only displays the moving circle.

Apr 25, 2021

Loading thumbnail…

Well Hello HTML

A grid of 18 identical smiley faces shows how React components and D3’s `arc()` API combine to render an SVG face. The code defines reusable `Face`, `Eyes`, `Mouth`, and `BackgroundCircle` components, each taking size and position props, with random eye radius per face. A `FaceContainer` wraps the SVG `<g>` and applies a translation transform, while `ReactDOM.render` mounts the entire set into the page.

Apr 23, 2021