jim25522532

@jim25522532·7 public vizzes

Fork of Working with Time

A histogram visualizes the distribution of frequency data against interval boundaries (組界) from a lab dataset. The chart uses a bar chart layout with a D3.js v5 `scaleBand` for the categorical x-axis and a linear scale for the y-axis, displaying counts via SVG rectangles. The code leverages React components (AxisBottom, AxisLeft, Marks) and D3 utilities like `csv`, `scaleLinear`, and `histogram()` (from D3's histogram extension) to bin and render the data. The static visualization is styled with custom fonts and colors, with the dataset fetched from a Gist, presented in a React-based rendering pipeline.

May 10, 2021

Loading thumbnail…

lab05

A bar chart displays the frequency distribution of values across numeric bins, with horizontal bars representing each group's frequency. The chart uses a linear x-axis for frequencies and a categorical y-axis for bin boundaries, with steelblue bars and labeled axes. Built with D3 v5, it employs `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG elements via `axisLeft`, `axisBottom`, and appended rectangles. Data comes from a local CSV file with columns for group boundaries and frequencies.

May 3, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects, with population values scaled in thousands. The visualization showcases customized D3 v5 axes: the y-axis uses `scaleBand` for country labels, while the x-axis employs `scaleLinear` with a tick formatter that converts millions to billions. The code uses `axisLeft` and `axisBottom` to render axes, removes default domain lines, and adds custom axis labels and a title via SVG text elements.

May 3, 2021

Loading thumbnail…

Points on a Map

A world map renders country boundaries and graticules from World Atlas TopoJSON, with city points sized by population using a square-root scale. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw shapes, while circles are positioned by projecting latitude and longitude coordinates. The SVG output is styled with a light gray land fill and semi-transparent teal city markers.

Mar 27, 2021

Loading thumbnail…

Stylized Scatter Plot with Color Legend

This interactive scatter plot displays the Iris flower dataset, allowing users to compare measurements of sepal and petal dimensions across species. The visualization uses React with D3 v5 scales and SVG rendering, featuring dropdown menus to select which attributes appear on the x and y axes. A color-coded legend distinguishes the three Iris species, and hovering over legend entries dims non-matching data points for focused comparison. The implementation leverages d3.scaleLinear, d3.scaleOrdinal, and custom axis components built with React.

Mar 9, 2021

Loading thumbnail…

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet from a predefined list. It uses React’s `useState` hook to manage the selected value, which is initialized to "hamster" and logged to the console on each change. The custom `Dropdown` component receives options, an id, the selected value, and a callback to update state, rendering native `<select>` and `<option>` elements. The UI is styled with custom CSS for enlarged font sizes, and ReactDOM renders the app into the root element.

Mar 8, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file in the browser. It first fetches a remote CSV containing CSS named colors, then uses `d3.csvParse` to convert the raw text into a structured array of objects. The visualization displays summary statistics about the parsed data—file size in kilobytes, number of rows, and number of columns—in a large `<pre>` element. The code relies on the native `fetch` API within an async function, and renders results as plain text without any charts or graphical elements.

Mar 7, 2021