jiayuansun

@jiayuansun·9 public vizzes

Scatter Plot

This scatter plot visualizes the populations of the top 10 most populous countries, with countries on the y-axis and population on the x-axis. The code uses D3 v5 within a React framework, loading data from a CSV file and rendering SVG circles. It employs `d3.scaleLinear` and `d3.scaleBand` for scales, with `d3.axisBottom` and `d3.axisLeft` to generate axes, and formats tick labels using `d3.format`.

May 9, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with countries on the y-axis and population values on the x-axis. The visualization uses React and D3 v5, employing `d3.scaleLinear` for the x-scale and `d3.scaleBand` for the y-scale. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, with population formatted using `d3.format` to abbreviate large numbers. Data is loaded from a CSV file via `d3.csv` and rendered as SVG circles.

May 9, 2020

Loading thumbnail…

barchart

This bar chart displays the top 10 most populous countries, with horizontal bars representing each nation’s population in billions. The visualization renders as an SVG, using React and D3 v5, with `d3.csv` loading data from a CSV file. It employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks. Bars are appended as SVG `rect` elements, with axis lines removed for a cleaner presentation.

May 9, 2020

Loading thumbnail…

make a face

This example displays a horizontal bar chart of country populations using a clean, monospace aesthetic. The visualization encodes population values with bar width via a `d3.scaleLinear` and country names along the y-axis using `d3.scaleBand`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the SVG rendering is driven by React and D3 v5. The data is loaded from a local CSV file and parsed with D3’s `csv` function.

May 9, 2020

Loading thumbnail…

make a face

This example draws a simple cartoon face using D3.js v5 and SVG. A yellow circle forms the head, two black-outlined circles serve as eyes, and an arc path creates a smiling mouth. The code uses d3.arc to generate the mouth’s path with specified inner and outer radii and angles, while d3.select appends circles and a group element to the SVG. The face is positioned using fixed coordinates and the viewBox dimensions are read from the SVG attributes.

May 9, 2020

Loading thumbnail…

html car report

This example demonstrates an HTML car report using primitive SVG shapes to represent vehicle components and basic styling. The visualization renders a simple scene with circles and rectangles positioned at different coordinates, including a group transformation that shifts elements down the canvas. The page uses plain HTML and CSS, with the SVG elements styled through an external stylesheet that sets a monospace font and highlights specific elements in red. The rendering approach relies entirely on native SVG markup within the HTML document, requiring no external JavaScript libraries.

May 9, 2020

Loading thumbnail…

html car report

This example displays a static HTML car report listing a 2012 Nissan Skyline and a 2014 Ford Fusion, with the first car highlighted in red via a CSS class. Built with React, the page uses plain HTML elements and a linked stylesheet (`styles.css`) to control typography and color, demonstrating a minimal structure for presenting categorical data without interactive or dynamic features.

May 9, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes temperature readings in San Francisco over a week in March 2015, with each hourly observation plotted as a point along a smooth curve. The x-axis represents time while the y-axis shows temperature in degrees, with grid lines and axis labels for clarity. A red vertical line follows the mouse cursor across the chart, and a tooltip displays the exact timestamp at the hovered position. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft`, rendering as SVG with data loaded from a CSV file.

May 9, 2020

Loading thumbnail…

HTML Starter

This example renders a bare-bones HTML page that displays a hardcoded string of car data, parsed from JSON using `JSON.parse` and accessed via `document.getElementById` to set the text content of a `<pre>` element. The page imports `cars` and `formatCar` from separate modules, though the current code only shows the raw `cars` string rather than formatted output. It uses standard browser APIs and a simple CSS style block to center large text, serving as a minimal foundation for building interactive visualizations.

May 9, 2020