Skip to main content
Log in
L

Leyou Hong

@LeyouHong·8 public vizzes

Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes a sequence of eight numeric values as a smooth, filled area. The chart uses D3 v3’s `d3.svg.area` generator with cardinal interpolation to create a curved line, which is layered with axes generated via `d3.svg.axis`. The data originates from a simple inline array, rendered as an SVG with a steelblue fill and stroke. The visualization includes labeled axes, with the y-axis rotated and titled “Price($)”, and is styled with a light gray background and gray gridlines.

Oct 22, 2020
Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes a small dataset of eight values as a smooth, filled area beneath a curve. The chart uses an SVG rendering with D3 v3, employing `d3.svg.area()` with a cardinal interpolation to create a flowing line that is filled with steelblue and stroked with the same color. Axes are generated using `d3.svg.axis()`, with a rotated y-axis label reading "Price($)". The data appears to be manually specified inline, not from an external source, and the visualization focuses on aesthetic presentation over precise data density.

Oct 22, 2020
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays an array of seven data points as a smooth, cardinal-interpolated curve, with axes labeled by index and value. The SVG rendering uses a D3.js v3 line generator to map the data, while the y-axis includes a rotated “Price($)” label. The chart’s gray background and steelblue stroke come from CSS rules, and the axes are drawn with `d3.svg.axis()`. The source data is a simple inline array.

Oct 22, 2020
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, based on 2018 United Nations estimates loaded from a CSV file. It demonstrates extensive D3 axis customization using `d3.axisBottom`, `d3.axisLeft`, and a linear scale. The x-axis uses a custom tick formatter to abbreviate values (e.g., converting kilometers to billions) and renders gridlines, while the y-axis removes its domain line and ticks. Axis labels, titles, and styling are applied via CSS classes.

Oct 20, 2020
Loading thumbnail…

Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using 2019 United Nations population data, with a horizontal layout and stylized teal bars. The chart maps country names to a `d3.scaleBand` on the y-axis and population values to a `d3.scaleLinear` on the x-axis. React renders the SVG elements, with custom `AxisLeft` and `AxisBottom` components generating ticks and labels. Population values are formatted using `d3.format` to display billions, and hover tooltips appear via SVG `<title>` elements.

Oct 20, 2020
Loading thumbnail…

D3 test

This example renders an empty SVG canvas with a width of 900 pixels and a height of 500 pixels. The code selects the SVG element using D3’s `select` method and retrieves its dimensions. While the JavaScript imports `csv` from D3, no data is loaded or visualized, and the SVG remains blank. The example demonstrates a minimal setup using D3 v5 within a React framework, with no visible visual output or interaction.

Oct 20, 2020
Loading thumbnail…

D3 test

This example shows a simple, animated face built with SVG shapes in React. The code uses D3 v5 selection methods to create a yellow circle for the head, two circles for eyes, and a path for a mouth generated with the `d3.arc` API. A rectangular eyebrow is animated using chained `transition().duration(2000)` calls, moving it vertically and back. Rendering is done entirely through SVG elements, with static positions defined in `index.js` and loaded via `bundle.js`.

Oct 20, 2020
Loading thumbnail…

D3 test

This example shows a simple, animated face built with SVG shapes in React. The code uses D3 v5 selection methods to create a yellow circle for the head, two circles for eyes, and a path for a mouth generated with the `d3.arc` API. A rectangular eyebrow is animated using chained `transition().duration(2000)` calls, moving it vertically and back. Rendering is done entirely through SVG elements, with static positions defined in `index.js` and loaded via `bundle.js`.

Oct 20, 2020