guangyi1012

@guangyi1012·5 public vizzes

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It customizes D3 axes by removing the domain lines, styling tick text and lines, and formatting population values with `d3.format` to abbreviate numbers like “1.4B”. The chart uses `d3.scaleBand` for countries and `d3.scaleLinear` for population, with `d3.axisLeft` and `d3.axisBottom` to render axes.

Feb 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

A simple SVG composition uses D3.js v5 to build and animate an abstract face. It binds an array of animal objects with red, yellow, and green types to three rectangles via `d3.scaleOrdinal` and `d3.schemeCategory10`, with click handlers that modify the data. A circle is appended and animated using `transition.attrTween`-style chained `.transition().delay().duration()` calls, moving, resizing, and recoloring from black to green. The rendering is static at first, then transitions over two seconds, all within a 960×500 SVG canvas.

Jan 25, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to render basic geometric shapes using SVG elements styled with CSS, all within a React application. It shows a minimal HTML page that displays the text “Hello HTML” as a placeholder, with the core focus on illustrating the integration of SVG markup and CSS styling in a React component structure. The code uses React to manage the component hierarchy and relies on standard SVG shape elements and CSS properties for visual presentation.

Jan 6, 2020

Loading thumbnail…

HTML Cars Report

This example presents a static HTML report listing two used cars, with the first entry—a 2012 Nissan Leaf at $1800—highlighted in green text on a yellow background. It demonstrates basic document structure and styling using plain HTML elements and a linked CSS file, with no JavaScript or data-visualization libraries involved. The styling uses a monospace font and a font-size of 30pt applied to the body, while the highlighted class is defined separately in the stylesheet.

Jan 5, 2020

Loading thumbnail…

HTML Starter

A basic HTML page that displays the text "Hello HTML" centered and in a large font size. The example serves as a minimal template for creating web-based visualizations without any external libraries. It uses standard HTML markup with inline CSS styling within a `<style>` tag to control the layout, and includes a `<pre>` element containing the word "hello" above the main content. This starter demonstrates the simplest possible approach for rendering content in a browser.

Jan 5, 2020