B

BeihaiTianming

@BeihaiTianming·19 public vizzes

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the estimated 2018 populations of the ten most populous countries, sourced from the UN World Population Prospects and loaded via `d3.csv`. It showcases customized D3 v5 axes: the bottom axis uses a `.tickFormat` with `d3.format` to abbreviate numbers (e.g., “1.4B”), and both axes have their domain lines removed. The chart uses `d3.scaleLinear` for population and `d3.scaleBand` for countries, with static axes rendered as SVG.

Loading thumbnail…

Fork of Data Table Summary

This example displays a plain-text summary of a 2018 United Nations population dataset, showing row count, column count, file size in kilobytes, and the first 10 rows as formatted JSON. The code uses `d3.csv` to load the data, `csvFormat` to measure its byte length, and D3 selections (`select`, `append`) to write results into `<pre>` elements. The black background with green monospace text creates a terminal-like aesthetic, though no interactive or graphical visualization is present.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A dynamic smiley face rendered in SVG responds to mouse movement by shifting its eyebrows. The example demonstrates fundamental D3.js DOM manipulation, using `d3.select` and `d3.event` to track the cursor and update the eyebrow positions through attribute changes. The face itself is constructed from basic SVG shapes—circles for the head and eyes, and paths for the mouth and eyebrows—all styled via a linked CSS file. The code relies on D3 v5 and runs entirely in the browser, with no external data source.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face built entirely with D3.js v5 uses SVG shapes and transitions to animate its eyebrows. The code draws a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, all positioned within a centered group. D3’s `transition()` method moves the eyebrow group upward and back over two 2-second intervals, creating a repeated eyebrow-raising effect. The example demonstrates fundamental DOM manipulation and SVG rendering through D3’s `select`, `append`, and `arc` APIs.

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and styling can be combined with CSS for visual customization. The code uses raw SVG elements such as circle, rect, line, and path, organized within transform and translate groups to position and scale them. CSS classes like `.lines` apply stroke colors and widths, while inline attributes control shape fills and strokes. A video tutorial appears embedded in the README, suggesting the visualization serves as a supplementary learning resource for SVG and CSS techniques. The rendering is purely SVG, with no JavaScript libraries involved.

Loading thumbnail…

Fork of HTML Cars Report

This example presents a simple HTML cars report that lists three vehicles with their model years and prices. The page uses a monospace font at a large size, with the first vehicle, a 2012 Nissan Leaf, highlighted in red via the CSS class `highlighted` on its list item. The underlying structure relies on basic HTML elements and an external stylesheet (`styles.css`) for styling. The data is embedded directly in the markup rather than fetched from an external source, demonstrating fundamental CSS selectors and class-based styling.

Loading thumbnail…

Fork of Cars Report

This example demonstrates a simple async data-fetching and filtering workflow for a car inventory. It shows a list of car descriptions, formatted as “year make model: $price,” displayed in a large `<pre>` element after a simulated two-second delay. The code uses JavaScript modules to separate concerns: `getCars.js` parses a hardcoded JSON array and returns a Promise, `formatCar.js` formats each car object, and `generateReport.js` filters cars under a price threshold and joins the results. The main script updates the DOM via `getElementById` and handles the Promise resolution.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with color encoding for origin and size encoding for weight. It uses the Vega-Lite API, rendering through Vega and Vega-Lite libraries with D3 for CSV data loading. The visualization includes tooltips for vehicle names and uses a custom configuration for improved readability. Data comes from the UCI Machine Learning Repository Auto MPG dataset, with a dark theme and larger fonts for enhanced presentation.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays the size and structure of a CSV dataset containing CSS named colors, showing its file size in kilobytes, row count, and column count. It loads the data from a GitHub gist using `d3.csv`, then formats and measures the content with `d3.csvFormat`. The code also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, demonstrating different approaches to parsing CSV data. The results appear in a large `<pre>` element.

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces spans the view, each rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth. The faces vary in stroke thickness, eye position and size, and mouth width and radius, created by the React component `Face`, which imports `BackgroundCircle`, `Eyes`, and `Mouth`. D3's `arc` function generates the mouth path, while D3's `range` supplies the count for the map. Each face is drawn in an SVG container using React's declarative component composition, with all measurements computed via `Math.random()`.

Loading thumbnail…

Fork of Smiley Face Part V

A smiley face rendered as an SVG in React, composed of a yellow background circle, two black eyes, and a mouth arc. The code splits visual components into separate ES6 modules, using React Fragments for the eyes. The mouth is drawn with a d3 arc generator, while the overall layout is positioned via an SVG transform. Each component receives its geometry as props, with dimensions defined in the main index.js file.

Loading thumbnail…

Fork of Smiley Face Part IV

This fork presents a yellow smiley face drawn with SVG shapes, centered within a fixed 960-by-500 canvas. It computes the face’s geometry—including the mouth arc’s inner and outer radii, stroke width, and eye placement—using D3’s `arc` generator. The React component renders a background circle, two eye circles, and a path for the mouth, all positioned via a translated group. The visualization demonstrates combining React’s component model with D3’s path generation for static, data-driven graphics.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a yellow smiley face using React and D3 v5, with SVG elements for the face, eyes, and mouth. The code defines circles for the head and eyes, while a D3 arc generator (`arc()`) creates the mouth path with specified inner and outer radii and angular extents. All shapes are positioned relative to a center point using SVG group transforms, and the styling includes a yellow fill with a black stroke. The implementation uses React’s `ReactDOM.render` to mount the SVG into the DOM, with static geometry values for offsets and radii.

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A React and D3 smiley face uses a yellow circle for the head, two circles for eyes, and an arc for the mouth. The code imports `arc` from D3 v5 to generate the mouth path with inner and outer radii and specific start and end angles. The SVG is rendered declaratively via React components, with dimensions set to 960 by 500 pixels. The example applies stroke styling to the face outline and positions all elements relative to the center using a translation transform.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiley face as a React component, using SVG shapes for the head, eyes, and mouth. The code constructs a yellow circle with a black stroke for the face, positions two eye circles using offset coordinates, and generates the mouth as an arc path with `d3.arc()`. The entire graphic is centered within an `<svg>` element, and the React app is mounted into the DOM with `ReactDOM.render()`. Layout values like center coordinates and radii are defined as constants, making the composition straightforward and declarative.

Loading thumbnail…

Fork of Smiley Face Part II

A React-based smiley face graphic fills the browser window using dynamic viewport dimensions. The face is constructed with SVG circles: a yellow head with a black stroke, two eyes positioned symmetrically via computed offsets, and no mouth despite the title. React 16.9 renders the elements through `ReactDOM.render`, while the component calculates center coordinates, radii, and stroke widths from `window.innerWidth` and `window.innerHeight`. The code imports React and ReactDOM directly, demonstrating a minimal functional component returning JSX with SVG attributes like `cx`, `cy`, and `r`. No external data sources or interactions are present.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from basic SVG shapes, with a yellow circular head, two smaller circles for eyes, and a nose-like center point. The code uses raw SVG elements (`circle`) with explicit attributes for `cx`, `cy`, `r`, `fill`, and `stroke` to position and style each part, rendered in an inline SVG container sized 1000 by 500 pixels. It is a static visualization with no interactive or animated behavior, demonstrating a straightforward, hardcoded geometric composition without employing any JavaScript libraries or data-driven features.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face built entirely with D3.js v5 uses SVG shapes and transitions to animate its eyebrows. The code draws a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, all positioned within a centered group. D3’s `transition()` method moves the eyebrow group upward and back over two 2-second intervals, creating a repeated eyebrow-raising effect. The example demonstrates fundamental DOM manipulation and SVG rendering through D3’s `select`, `append`, and `arc` APIs.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays a large-text greeting and logs a message to the browser console. The page uses plain CSS for styling and JavaScript for the console output. No external libraries are used; it relies on the built-in `console.log` API to write "Hello JavaScript!" to the developer tools. The rendering approach is static text layout via the browser’s default document flow.