Skip to main content
Log in
K

Kyo

@physicsLoveJava·3 public vizzes

Loading thumbnail…

HTML Starter

This visualization displays a horizontal bar chart comparing population sizes across five countries, using a simple CSV dataset loaded from `data.csv`. The chart employs D3 v6 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths in an SVG canvas. A `<g>` element translates the chart within margins, and rect elements are bound to the data and styled with steelblue fill via the CSS file. The axis labels and bar heights are generated dynamically from the parsed data.

Nov 2, 2020
Loading thumbnail…

HTML Starter

This visualization displays a horizontal bar chart comparing population sizes across five countries, using a simple CSV dataset loaded from `data.csv`. The chart employs D3 v6 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths in an SVG canvas. A `<g>` element translates the chart within margins, and rect elements are bound to the data and styled with steelblue fill via the CSS file. The axis labels and bar heights are generated dynamically from the parsed data.

Nov 2, 2020
Loading thumbnail…

HTML Starter

This example visualizes a simple, static smiley face. The face is composed of a yellow circle for the head, two black circles for eyes, and a black arc for the mouth, all positioned relative to the center of an SVG canvas. The visualization is built with D3 v6 and SVG, using basic D3 selection and shape-creation methods like `d3.select`, `d3.append`, and `d3.arc` to draw the mouth path. The code does not involve any data transformation but rather constructs the face from hardcoded geometric values.

Nov 2, 2020