Skip to main content
Log in
P

pblanas

@pblanas·5 public vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between Pokémon species ID and height, with each car represented as a semi-transparent blue circle. The visualization uses D3.js version 5, loading data from a CSV file via the `d3.csv` function, and renders the chart as SVG. The code employs `d3.scaleLinear` for both axes, `d3.extent` to determine domain bounds, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Axis labels and a title are added as SVG text elements, with font sizes and colors defined in a separate CSS file. The data comes from the Auto MPG dataset, though the title incorrectly references Pokémon.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between Pokemon species ID and height, with each car represented as a blue, semi-transparent circle. The visualization uses D3 v5's scaleLinear, axisBottom, and axisLeft APIs to construct the chart, which is rendered as SVG. The data is loaded from a CSV file and mapped to the x and y axes using the extent function to determine scales. The graph incorporates styled tick marks, axis labels, and a title, with circles having a radius of 10 pixels and an opacity of 0.1.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars. The data originates from the UCI Machine Learning Repository's Auto MPG dataset. The visualization uses D3 v5 to render an SVG with black axis lines, red semi-transparent circular points, and labeled axes. The code implements a linear scale for both axes, with the y-axis oriented from bottom to top, and includes a title and axis labels. The plot is drawn within a 960 by 500 pixel canvas.

May 14, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 goal scorers in the world, with countries and goal counts drawn from a CSV file. It shows how D3 v5 axes can be customized: the y-axis uses `axisLeft` for country labels, while the x-axis uses `axisBottom` with a custom tick formatter that converts large numbers into abbreviated units (e.g., "805" to "805"). The chart also removes default axis domains and gridlines, adds an axis label and title, and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis.

May 7, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 goal scorers in the world, with countries and goal counts drawn from a CSV file. It shows how D3 v5 axes can be customized: the y-axis uses `axisLeft` for country labels, while the x-axis uses `axisBottom` with a custom tick formatter that converts large numbers into abbreviated units (e.g., "805" to "805"). The chart also removes default axis domains and gridlines, adds an axis label and title, and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis.

May 7, 2019