wukangqian

@wukangqian·4 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, with population values along the x-axis and country names along the y-axis. Using D3 v5, it loads data from an external CSV file and renders SVG rectangles via `selectAll('rect').data(data).enter()`. The scales are built with `scaleLinear` and `scaleBand`, while axes are generated with `axisLeft` and `axisBottom`. Population numbers are formatted using `format('.3s')` with “B” replacing “G” for billions.

Sep 9, 2020

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes—a circle, a rectangle, and a polyline path—rendered with inline SVG elements and styled via external CSS. The example demonstrates how CSS classes control stroke color, width, and fill, including a blue path with rounded line joins. It uses raw SVG tags like `circle`, `rect`, `line`, and `path`, with a transform applied to scale and translate the group. The code exercises standard SVG geometry and CSS styling rules without any JavaScript or additional libraries.

Sep 9, 2020

Loading thumbnail…

Cars Report

This example displays a single data point—the year of the first car in a small dataset—as large text on a web page. The React-free front end renders the message into a `<pre>` element using plain DOM manipulation. It imports the car records from a static JavaScript file (`cars.js`) that parses a JSON string, then accesses `cars[0].year` to show the value. The visualization relies on standard browser APIs like `document.getElementById` and sets the `textContent` property to update the display.

Sep 8, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a static text message to the browser. The code defines a simple functional `App` component returning a div with the class "message" and the text "Hello React!", then mounts it into the root DOM element using `ReactDOM.render`. It loads React and ReactDOM from a UMD bundle via unpkg, and styling is applied through a CSS rule in the HTML file. No data sources or interactive behaviors are present; it serves purely as a starter template for integrating React into an Observable-style visualization environment.

Sep 8, 2020