ncjB

@ncjB·3 public vizzes

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which data columns map to the X and Y axes via two dropdown menus, triggering animated transitions of the circles to their new positions. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and custom dropdown menu and scatter plot components. SVG rendering with d3 transitions animates the updates over two seconds.

Mar 28, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, with a categorical color scale and a legend showing the mapping. The visualization uses d3.geoPath with a natural Earth projection to render country boundaries, and it supports interactive zooming via a custom zoom overlay. Data is loaded from the world-atlas package, combining TopoJSON geometry with tab-separated attribute data. Hovering a country highlights it in red and displays its name and economy type in a tooltip.

Mar 6, 2020

Loading thumbnail…

Customizing Axes

This visualization displays the top 10 most populous countries using a horizontal bar chart, based on 2018 United Nations population estimates. The chart shows customized axes, with the y-axis stripped of its line and ticks, and the x-axis using abbreviated population labels like “1.42B” via `d3.format`. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, rendered as SVG. Gridlines extend from the x-axis ticks, and axis labels and a title are added manually.

Jan 23, 2020