Cassie-Xiao-Yu

@Cassie-Xiao-Yu·5 public vizzes

Shape with SVG and CSS

This example displays a horizontal bar chart of population data for ten countries, using SVG rectangles scaled by a linear population axis and a band scale for country names. The visualization is built with React and D3 v5, leveraging `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart. Data from a CSV file is loaded via `csv`, with populations multiplied by 1000, and styled through CSS properties like `fill: steelblue` on the bars.

May 22, 2020

Loading thumbnail…

Shape with SVG and CSS

This example uses SVG shapes and CSS to draw a cheerful face with a yellow circle, black eyes, and eyebrows, all rendered statically in a React-like D3 v5 setup. A path, built with the `arc` generator, forms a half-circle mouth. The right eyebrow animates via chained `transition().duration(2000)` calls, moving it upward and back, while other elements remain fixed. The code demonstrates basic SVG attribute manipulation with D3 selections, including `attr` and `transition`, within an HTML page that loads d3.v5.

May 21, 2020

Loading thumbnail…

Shape with SVG and CSS

This example displays a minimalist SVG canvas filled with overlapping black lines shaped into rounded, green-edged polygonal forms. The visualization leverages D3 v5 strictly for logging the library to the console, while the visual output is driven entirely by SVG and CSS. The `styles.css` file defines stroke colors, widths, and line joins for elements grouped under the class `.lines`, creating a simple geometric composition with no dynamic data or interactions.

May 21, 2020

Loading thumbnail…

HTML cars report

This example shows a minimal static SVG scene with two circles and a rectangle, one circle highlighted in red, rendered on a 960x500 canvas. The code uses raw SVG elements (`circle`, `rect`) placed directly in the HTML structure, styled with a small external CSS file that removes body margins and defines a `.highlighted` class. No JavaScript libraries or data sources are involved; it is a barebones demonstration of embedding SVG shapes in an HTML page.

May 21, 2020

Loading thumbnail…

HTML cars report

This example presents a minimal HTML page titled “Cars Report” that displays a simple bulleted list of two items, with the first item styled in red via a CSS class called “highlighted.” It uses plain HTML markup in an `index.html` file and a linked `styles.css` stylesheet to apply monospace font and large text size to the body. The page is built with React framework, as noted in the source metadata, but the displayed content itself relies on static HTML and CSS rather than interactive components or data-driven rendering.

May 21, 2020