pengyugatech

@pengyugatech·6 public vizzes

Running Total of TMDb Movies by Year

This visualization shows the cumulative running total of TMDb movies by year, with each red bar representing the accumulated count up to that year. The data, loaded from a CSV file, is rendered as an SVG bar chart using D3.js. The code uses `d3.scaleTime()`, `d3.timeParse()`, and `d3.axisBottom()` to handle time-based axes and formatting, with the y-axis displaying the running totals.

Jan 25, 2023

Loading thumbnail…

Making a Bar Chart

A bar chart displays population estimates for ten countries, with each bar’s height proportional to values from a CSV file. The visualization loads data via `d3.csv`, converts population strings to numbers using unary plus, then renders SVG rectangles scaled to the chart’s height and width attributes. Styling is handled by a linked stylesheet, while the chart itself is built with D3 v7’s `select` and `csv` methods, drawing directly into the static SVG container.

Jan 9, 2023

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a simple cartoon face using D3.js v7 with SVG rendering. It draws a yellow circular head, two black eyes, and an arc-shaped mouth using basic shape primitives and the `d3.arc` generator. The face is assembled by appending SVG circles and a path to an SVG canvas, with the mouth’s arc defined by inner and outer radii and start/end angles. Positional attributes like `cx`, `cy`, and `r` are set explicitly, while a group element applies a translation transform to center the head.

Jan 6, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path arranged in scaled and translated groups. The visualization uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and stroke-width, while CSS classes define stroke properties and line joints. The `<g>` elements apply transforms for scaling and positioning, with one group inheriting fill and stroke settings from its parent. The code relies solely on native SVG and CSS, with no external JavaScript libraries.

Jan 4, 2023

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML cars report listing three vehicle entries with model, year, and price, highlighting the 2012 Nissan Leaf in red. It uses plain HTML markup with a linked CSS stylesheet for styling. The page structure includes a header, an unordered list of car data points, and a CSS rule targeting the `highlighted` class to change text color. No JavaScript libraries or frameworks are used; the visual presentation relies solely on static HTML elements and CSS formatting.

Jan 4, 2023

Loading thumbnail…

Hello D3

This example shows the simplest possible D3 visualization: a webpage that displays the text "Hello D3 version 6" centered on a blank page. The HTML file loads D3 v6 from a CDN and an external bundle, while the JavaScript imports the `select` function from the D3 library and uses `d3.select('body').text()` to set the body’s text content directly. There is no data or chart involved; the focus is purely on the initial setup and rendering of a string through D3’s selection API.

Dec 30, 2022