Sergio Peña

@Sergiop79·4 public vizzes

Scatter Plot

This scatter plot displays the populations of the ten most populous countries in 2018, using data from the United Nations World Population Prospects. Circles are positioned along a linear population scale and a categorical country scale, with a dashed grid and labeled axes. The visualization is rendered as SVG using D3 v5, leveraging `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`. Population values are formatted with the `format` function, and the chart includes a title and axis labels.

May 8, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries in 2018, with data from the United Nations World Population Prospects 2017. The chart uses D3 v5’s `csv` loader to parse the data, then applies `scaleLinear` for the population axis and `scaleBand` for the country axis, rendering bars as SVG rectangles. Axes are added via `axisLeft` and `axisBottom`, and each country’s population value is multiplied by 1,000 to reflect actual figures. The visualization is styled with steel-blue bars and a clean white background.

May 3, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars in the Auto MPG data set from the UCI Machine Learning Repository. Red semi-transparent circles represent individual car models, with axis labels and grid lines marking the scales. The visualization is built with D3 v5, using `d3.csv` to load the data, `scaleLinear` and `extent` for scaling, and `axisBottom` and `axisLeft` to render the axes as SVG elements.

May 3, 2019

Loading thumbnail…

Customizing Axis

This bar chart displays the population of the ten most populous countries using 2018 data from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with a custom tick formatter that abbreviates numbers using the `format` function. Axes are customized by removing default domains and tick lines, adding grid lines, and including a title and axis label.

May 3, 2019