MatthewJSonnen

@MatthewJSonnen·3 public vizzes

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository's Auto MPG dataset, where users select which numeric columns map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, while transitions animate circles to new positions over one second with staggered delays. The visualization updates both axes and circle positions whenever a menu selection changes.

May 21, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes Pokémon data, showing the relationship between species ID and base experience, with each circle representing a Pokémon. The plot uses D3 v5 functions like `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and SVG circles with green, semi-transparent fills. The data comes from a CSV file, which is loaded and parsed using `csv()`, with numeric fields coerced via unary plus operators. The chart also includes rotated axis labels, a title, and tooltips that reveal each Pokémon's identifier on hover.

May 14, 2019

Loading thumbnail…

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization demonstrates customized D3 axes: the left axis removes its domain and tick lines, while the bottom axis uses a custom tick format that abbreviates large numbers (converting 'G' to 'B' for billions) and extends tick lines across the chart. The code employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format, rendering as SVG with data loaded from a CSV file.

May 7, 2019