Ana

@min1max·2 public vizzes

Customizing Axes

This example presents a horizontal bar chart ranking the top 10 most populous countries (from a 2018 UN World Population Prospects estimate) by their population. The visualization stands out through its custom axes: the y-axis strips away default domain lines and tick lines, while the x-axis uses a custom tick format (d3.format('.2s')) and extends grid lines across the plotting area. Built with d3.v5, the code uses `scaleLinear` and `scaleBand` to map data to coordinates, `axisLeft` and `axisBottom` to generate axes, and SVG for rendering, with extensive styling applied via CSS.

Oct 12, 2019

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Two dropdown menus allow users to select which columns are mapped to the X and Y axes, with the points animating to their new positions. The visualization uses d3.scaleLinear, d3.extent, and d3.axisBottom and axisLeft to construct the plot, while a custom dropdownMenu function handles the selection interface. The scatter plot is rendered as SVG with a transition over two seconds.

Oct 12, 2019