YuShuenWang

@YuShuenWang·6 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles mark each vehicle, with axis labels and a title displayed alongside tick marks. Built with D3 v5, it uses `csv` to load data, `scaleLinear` for both axes, and `axisBottom` and `axisLeft` to render the coordinate system. The SVG-based chart applies a margin convention and uses CSS to style circles, ticks, and text.

Sep 21, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017, with population values scaled in thousands. It demonstrates how to customize D3 axes by removing domain lines and tick marks from the left axis, formatting population tick labels using `d3.format` to abbreviate values (e.g., replacing 'G' with 'B'), and extending tick lines across the chart with `tickSize`. The SVG rendering uses `d3.scaleLinear` and `d3.scaleBand`, with an axis label and title added as text elements.

Sep 21, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

Shapes and Colors with SVG and CSS demonstrates basic SVG shape primitives, including circles, rectangles, lines, and paths, with styling applied through both inline attributes and an external CSS stylesheet. The example shows how CSS classes, such as `.lines`, control stroke color and width, while SVG presentation attributes like `fill` and `stroke` set individual element properties. A group transform scales and translates the entire composition, and a video embed references external documentation. The code uses raw SVG elements and CSS rules directly, with no JavaScript libraries, to illustrate fundamental vector graphics rendering.

Sep 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript data-processing pipeline that fetches car data, filters it by price, and formats the results into a text report displayed in a webpage. The visualization shows a loading message while `getCars()` returns a Promise simulating a two-second delay, after which `generateReport()` filters cars priced under $2,000 and maps each to a formatted string using `formatCar`. The final output appears as a list of filtered car descriptions in a styled `<pre>` element, with no charting or rendering libraries used.

Sep 17, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates a simple SVG visualization that responds to browser window resizing. It uses CSS to stretch a fixed-position chart container and JavaScript to redraw the graphic whenever the window dimensions change. The code reads the container’s `clientWidth` and `clientHeight`, sets the SVG’s width and height attributes accordingly, and draws two green diagonal lines forming an X using d3.select, `attr`, and line elements. A window `resize` event listener triggers the `redraw` function, ensuring the graphic always fills the viewport.

Sep 17, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as SVG shapes in D3.js v5 shows animated eyebrow movements. The code builds the face using `d3.select`, `d3.append`, and `d3.arc` to create a yellow circle head, two eyes, and a mouth. Eyebrows are rectangles that move up and down via chained `transition().duration()` calls, each lasting two seconds. The example demonstrates fundamental DOM manipulation with D3's imperative API, drawing all elements on a 960×500 SVG canvas.

Sep 17, 2020