misstong

@misstong·5 public vizzes

Fork of Pathetic Bar Chart

This bar chart displays the top 10 most populous countries based on United Nations World Population Prospects 2019 data. It renders horizontal bars using SVG `<rect>` elements, scaled with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. React manages the component state, fetching the CSV via `d3.csv` and updating the visualization after loading. The chart intentionally lacks axes or labels, emphasizing raw bar lengths. The `useState`, `useEffect`, and `useCallback` hooks coordinate asynchronous data loading and rendering within a React app.

Sep 17, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a car model and its name shown as a tooltip on hover. The visualization uses the Vega-Lite API to define the chart specification programmatically, while D3’s `csv` function loads the dataset from a GitHub gist. The `vega` and `vega-lite` libraries handle rendering to SVG, and `vega-tooltip` provides interactive hover details. Custom axis styling and opacity settings are applied via the `config.js` file.

Sep 17, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the file size, row count, and column count of the CSS Named Colors dataset. The visualization uses the d3.csv method from D3 v5 to fetch the remote CSV file and then formats the results into a text message shown in a large pre element. The code also includes commented-out alternatives using the Fetch API with async/await and a nested promise structure, illustrating different approaches to handling asynchronous data loading.

Sep 17, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A React component renders a stylized smiley face using SVG, with a yellow background circle, two black eyes, and a curved mouth drawn from an arc. The face is centered on a 960 by 500 canvas, with fixed eye offsets and mouth dimensions passed as props. The code uses React 16.7 and D3 v5's `arc` generator to create the mouth path, while the background and eyes are simple SVG circle elements.

Sep 17, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiley face drawn with SVG shapes: a large yellow circle for the head, and two small black circles for the eyes. The page uses plain SVG markup embedded directly in an HTML document, with no JavaScript libraries or data sources. The SVG canvas is sized at 960 by 500 pixels, and the circles are positioned using explicit `cx`, `cy`, and `r` attributes. Styling is applied through inline presentation attributes and a minimal CSS rule that removes the page margin and hides overflow.

Sep 12, 2022