trungngonptit

@trungngonptit·6 public vizzes

Cars Scatter Plot

This scatter plot displays the relationship between vehicle weight and horsepower for cars in the auto-mpg dataset, with each point representing an individual car. The visualization uses d3.csv to load the data, d3.scaleLinear with .nice() to map the weight and horsepower values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render the axes. The chart is drawn as an SVG with semi-transparent steelblue circles, and the x-axis labels are formatted using d3.format to display numbers in abbreviated form.

May 28, 2020

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with populations read from a CSV file and scaled in thousands. It demonstrates customizing both axes: the y-axis removes its domain line and tick marks, while the x-axis uses a tick format to abbreviate large numbers (e.g., converting billions to "B"). The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering as SVG within a React framework.

May 25, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the populations of ten countries, using data from a CSV file. The chart renders as SVG, with country names on the y-axis and population totals on the x-axis, scaled linearly. The code uses D3 v5 methods like `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, compute scales, and draw axes, while appending rectangles for each bar. Population values are multiplied by 1000 after parsing.

May 25, 2020

Loading thumbnail…

D3 Starter

This example shows a simple, animated face built entirely with SVG shapes. D3 selections are used to create a yellow circle for the face, smaller circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The right eyebrow animates up and down using chained `transition` calls with a 2-second duration. The visualization demonstrates fundamental D3 v5 concepts like data joins, attribute manipulation, and SVG rendering within a React environment.

May 22, 2020

Loading thumbnail…

SVG Starter

This example demonstrates how to create basic SVG shapes within a React application using raw SVG markup, without relying on external visualization libraries. It shows circles, rectangles, lines, and paths styled with CSS attributes like stroke and fill. The visualization uses static, hardcoded data rendered through SVG elements, including groups with transforms for scaling and translation, and nested shapes to illustrate layering and style inheritance. The code serves as a minimal starting point for building SVG-based visualizations in a web browser.

May 22, 2020

Loading thumbnail…

d3.js learning

A stacked bar chart shows the changing composition of four product categories across five years, from 2006 to 2010. The visualization uses d3.v3 with SVG rendering, building layers via `d3.layout.stack()` and mapping time with `d3.time.format`. Bars are colored per category, with a legend and interactive tooltips that display each segment’s value on mouseover. The data is embedded as JavaScript objects, not loaded from a file.

May 22, 2020