April Fangzhu Guo

@april980123·7 public vizzes

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate, multiplied by 1000 for actual figures. It demonstrates custom axis styling using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with tick labels formatted via `format('.3s')` and gridlines styled through CSS. SVG rendering shows horizontal bars with tick marks and labels, while title and axis labels use custom font sizes and colors.

Jan 20, 2024

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The chart customizes D3 axes with a left-aligned y-axis and a bottom x-axis using `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` and `d3.scaleBand` map populations and country names to SVG rectangles. Data is loaded from a CSV file via `d3.csv`, with populations multiplied by 1000 for accurate scaling.

Jan 20, 2024

Loading thumbnail…

Learn D3.js

This visualization draws a smiling face using D3.js in an SVG canvas. A yellow circle forms the head, with black circles as eyes and a curved arc path as the mouth. The eyebrows, rendered as rectangles, animate upward and then back down using chained `transition().duration(2000)` calls. The code uses the `select`, `append`, and `arc` APIs from D3 v7 within a React framework, manipulating SVG attributes directly.

Jan 20, 2024

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

Jan 20, 2024

Loading thumbnail…

Putting SVG in the HTML

This example demonstrates how to embed a static SVG graphic directly within an HTML page for a simple car-themed report. The SVG contains basic shapes such as circles, rectangles, lines, and paths, styled with CSS and inline attributes like `stroke` and `fill`. It uses no external libraries, relying solely on core HTML, CSS, and JavaScript. The stylesheet applies global margins and overflow settings, while specific CSS classes and attribute selectors define visual properties for elements like lines. The rendering is purely SVG-based, with no interactive data binding or dynamic updates shown.

Jan 20, 2024

Loading thumbnail…

Fork of HTML Starter

This example displays a simple HTML cars report listing two vehicle entries, with one item highlighted in red. The page uses a plain HTML structure with an external CSS stylesheet that sets the body font size and family, while the `.highlighted` class applies the red color emphasis. There is no JavaScript functionality or data processing; it is a static webpage built with basic HTML and CSS markup.

Jan 20, 2024

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling through CSS, using circles, rectangles, lines, and paths within a single scalable vector graphic. The SVG is rendered directly in an HTML document, with the `<g>` elements grouping shapes to apply transformations and shared styling. CSS classes like `.lines` define stroke properties for the line and path elements, while inline attributes set fill colors and stroke widths. The visualization shows how SVG’s coordinate system and CSS work together to control shape appearance and positioning, with a scale transform applied to the entire group.

Jan 20, 2024