Simon Wongsuwarn

@wongsuwarn·5 public vizzes

Temperature

This visualization displays the relationship between horsepower and weight for various car models, with each point representing a vehicle. The code uses d3.csv to load the auto-mpg dataset from VizHub, then converts the data to numeric values before applying d3.scaleLinear for both axes. d3.axisBottom and d3.axisLeft render the grid lines, while SVG circles with a steelblue fill and opacity are plotted using the scales. The chart includes a title and axis labels, with margins set to accommodate the larger left side.

Jul 7, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The SVG rendering uses D3 v5 scales, axes, and data joins to position semi-transparent blue circles within a chart featuring labeled axes and gridlines. The code explicitly parses numeric fields from a CSV file via d3.csv, then applies linear scales with nice-extended domains and removes domain lines for a cleaner grid. Data originates from the UCI auto-mpg dataset hosted on vizhub.com.

Jul 7, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the world’s most populous countries in 2020, with each circle positioned along a categorical y-axis for country names and a linear x-axis for population counts. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV via `d3.csv`, and population values are formatted using `d3.format` to abbreviate large numbers.

Jul 7, 2019

Loading thumbnail…

Customising axes

A horizontal bar chart displays the 25 most populous countries in 2020, with population values read from a CSV file and multiplied by 1,000. D3’s `scaleBand` and `scaleLinear` position the bars, while `axisLeft` and `axisBottom` generate axes; the bottom axis uses `tickFormat` to convert values like "1.43G" to "1.43B". The y-axis labels are kept, but its domain lines and tick marks are removed, and the chart adds a title and population axis label.

Jul 7, 2019

Loading thumbnail…

Making a simple bar chart

A bar chart displays population estimates for the 24 most populous countries in 2020, using horizontal bars sorted in descending order. The visualization ranks countries from China to Tanzania, with bar lengths proportional to population values loaded from a CSV file. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart in SVG, with population values converted from thousands to raw numbers before rendering.

Jul 7, 2019