lujinxuan-fang

@lujinxuan-fang·8 public vizzes

Car Scatter Plot

This example displays the top 10 most populous countries as a scatter plot, with circles positioned along a linear population scale on the x-axis and a point scale for country names on the y-axis. The visualization loads data from a CSV file and renders it as SVG using D3 v5’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` APIs. The code transforms raw population numbers by multiplying them by 1000 and formats tick labels using D3’s `format` function.

Mar 8, 2020

Loading thumbnail…

Scatter Plot

This visualization displays a scatter plot of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis, using circles sized at a fixed radius. The data, sourced from a CSV file, is loaded via `d3.csv` and scaled using `scaleLinear` for the population axis and `scalePoint` for categorical positioning. Built with React and D3 v5, the SVG rendering uses `axisBottom`, `axisLeft`, and custom tick formatting to label values in abbreviated units. The code applies margins, axes, and a title, with circles colored blue and a steelblue rectangle style defined in CSS.

Mar 8, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the populations of the top 10 most populous countries, with a linear scale for population values and a band scale for country names. The visualization uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom with custom tick formatting for labels. The chart renders to SVG with margin-based layout, includes gridlines from the x-axis, and applies a custom title and axis labels.

Mar 8, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the ten most populous countries using United Nations World Population Prospects 2019 data. The code employs React with D3 v5, utilizing `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, rendering bars as SVG rectangles. The chart includes custom axis components, a formatted tick label that converts gigabytes to billions via `format('.2s')`, and hover tooltips using SVG `<title>` elements. The visualization deliberately omits traditional axes labels on the y-axis, presenting a minimal aesthetic with Poppins typography.

Mar 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build an animated face from basic SVG shapes within a React framework. The code draws a yellow circle as the face, adds two eyes with matching eyebrows, and constructs a mouth using the D3 `arc` path generator with specific inner and outer radii. Eyebrows animate via chained `transition()` calls, moving upward and back down over a two-second duration. The SVG canvas is 960×500 pixels, with all elements positioned relative to a centered group using translation transforms.

Mar 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js (v5) with SVG to render a smiley face with animated eyebrows. The code draws a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc for the mouth using `d3.arc()`. A chained `transition().duration(2000)` sequence moves the eyebrows upward and back over four seconds, demonstrating basic DOM manipulation and animation with `d3.select` and `append`. The fixed 960x500 SVG canvas centers the face via a translated group element.

Mar 8, 2020

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates how to compose basic geometric shapes—circles, lines, paths, and rectangles—within a single SVG canvas. The code uses React and SVG elements with inline styling and CSS classes applied via the `styles.css` file. It shows how CSS can selectively style SVG groups, such as applying stroke properties to the `.rect` class, while other shapes rely on direct presentation attributes. The visualization presents a static arrangement of colored shapes and lines without interactive behaviors.

Mar 8, 2020

Loading thumbnail…

Cars Report

This example shows a text-based cars report that filters a hardcoded list of five vehicle objects by price and formats each as a line of text. The code uses JavaScript promises, array methods (`filter`, `map`, `join`), template literals, and ES6 module imports/exports. After a simulated two-second delay, `getCars()` resolves with parsed JSON data, then `generateReport()` selects cars under $2,000 and renders the formatted results in the page’s `<pre>` element, replacing the initial "Loading..." message.

Mar 6, 2020