hafsa2020 (@hafsa2020), VizHub

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars extend from the left axis, colored teal with a clean, minimal design. The React-based implementation uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and the `format` function to abbreviate population values (e.g., “1.4B”). SVG rendering includes custom React components for axes and marks, with simple tooltips provided via SVG `<title>` elements.

Feb 23, 2020

Loading thumbnail…

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization over time, with dropdown menus allowing users to switch between metrics and coin types. The code uses D3 v5’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG path, with smooth transitions via `d3.transition`. Data is loaded from a local `buildings.json` file and parsed using `d3.timeParse`. A React framework is present, though the rendering and animation are handled directly through D3’s SVG and transition APIs.

Feb 20, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars extend from the left axis, colored teal with a clean, minimal design. The React-based implementation uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and the `format` function to abbreviate population values (e.g., “1.4B”). SVG rendering includes custom React components for axes and marks, with simple tooltips provided via SVG `<title>` elements.

Feb 20, 2020