scarlet shao

@scarlet-128·6 public vizzes

Temperature in San Francisco Scatter Plot

This scatter plot displays the relationship between horsepower and weight for various car models, with each circle representing one vehicle. The encoding uses a linear scale for both axes, with a circular mark radius of 10 pixels. The visualization is rendered as an SVG using D3 v6, utilizing `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions. Data is loaded from a CSV file via `csv()` from D3, with axis labels and tick formatting applied. The chart includes a title and uses a semi-transparent steelblue fill for the circles.

Jun 19, 2021

Loading thumbnail…

Cars Scatter Plot

This example shows the relationship between horsepower and weight for a collection of cars, with each vehicle represented as a semi-transparent circle. The scatter plot uses a linear scale for both axes, with tick marks extending across the plot area to create a grid. The D3 library handles data loading from a CSV file, and the `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` functions position the points and axes. The visualization is rendered as SVG, with axes labels and a title formatted using custom CSS classes.

Jun 3, 2021

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using a categorical y-axis for country names and a linear x-axis for population counts. The D3 v6 code uses `select` and `csv` to load data, `scaleLinear` and `scalePoint` for scales, and `axisLeft` and `axisBottom` for axes. SVG circles are positioned with `cx` and `cy` attributes, and a formatted tick label converts values from G to B.

Jun 3, 2021

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the ten most populous countries, with population values in thousands. The chart customizes both axes by removing domain lines, adding grey tick lines for the x-axis, and styling tick labels. Built with D3.js v6, it uses `scaleLinear` and `scaleBand` for scales, `axisBottom` with a custom tick format, and `axisLeft` for the categorical axis. Data is loaded from a CSV file.

Jun 3, 2021

Loading thumbnail…

Let's make a face

A cheerful, schematic face is built from SVG primitives in a 960×500 viewport, centered via a translated group. Its yellow head, black-outlined circle, two dark eyes, and a wide mouth arc are composed with D3’s `select`, `append`, and `arc` APIs. The eyebrows, drawn as rectangles, animate upward and back down over two seconds using chained `transition().duration(2000)` calls on the group’s `transform` attribute, while the rest remains static.

May 30, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—are drawn on an SVG canvas with styling applied through CSS. The SVG markup defines each shape’s coordinates and attributes, while the linked stylesheet controls stroke color, width, and line joins for the grouped `.lines` elements. React is not used; the code relies on plain HTML, CSS, and JavaScript (though no JavaScript appears in the visible files). The rendering method is SVG, with a scale transform applied to the root group.

May 30, 2021