taujeng

@taujeng·3 public vizzes

d3 barchart

This bar chart displays populations for several countries, with China, India, the United States, Lalaland, and Legoland represented as horizontal bars. The chart uses D3 v5 with an SVG rendering approach, loading data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Population values are converted from strings to numbers and multiplied by 1000 before rendering.

Jul 12, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries based on United Nations World Population Prospects 2019 data. The visualization uses React with D3 scales to map country names along the y-axis and population values to bar widths, with teal-colored rectangles representing each nation. The code loads CSV data asynchronously using `d3.csv`, transforms population values from strings to numbers, and renders the chart with custom axis components that apply Poppins font styling and gray tick marks for a clean, modern aesthetic.

Jul 11, 2021

Loading thumbnail…

Smiley Face pt 1

This example draws a simple smiley face using static SVG elements: a large yellow circle for the head and two smaller black circles for eyes. The code defines the SVG directly in the HTML markup, while React is loaded via UMD builds but not used to render any components. The face lacks a mouth, leaving the expression incomplete despite the title. The rendering uses fixed coordinates and dimensions within a 960 by 500 viewport.

Jul 11, 2021