Sophia Oku

@Sophiaoku·5 public vizzes

Learning SVG

This example demonstrates creating and styling SVG circles with D3.js. It renders seven circles with distinct positions, radii, and neon colors over a pale green background, each with uniform opacity. The visualization uses the `select` function and the D3 General Update Pattern with method chaining to create an SVG element sized to its container and then bind data arrays to circle elements, setting attributes like `cx`, `cy`, `r`, and `fill` dynamically.

Sep 8, 2024

Loading thumbnail…

Bar Chart

This example demonstrates a responsive bar chart with axes that maintain consistent tick mark density across different screen sizes. The visualization uses D3.js to render the SVG elements, while a ResizeObserver watches the container and updates the chart’s width and height state accordingly. The axes automatically recalculate their tick counts based on the available space, ensuring readable labels whether viewed in a small panel or full-screen mode. The code structures reusable axis and label modules, highlighting a clean separation of concerns for building adaptive visualizations.

Sep 6, 2024

Loading thumbnail…

Animals Bar Chart

This bar chart displays the ten most populous countries as of January 1, 2024, with country names on the x-axis and population in thousands on the y-axis. The visualization is built using D3.js, specifically leveraging `scaleBand` and `scaleLinear` for positioning, along with axis functions like `axisLeft`. The code filters data from the `@curran/un-population-estimates-2024` source, sorts by the population column, and renders bars within an inner rectangle. It also integrates custom `xAxisLabel` and `yAxisLabel` utilities from `@curran/axis-labels` for clear axis annotations.

Sep 6, 2024

Loading thumbnail…

Blank Viz

This example demonstrates a static HTML page with inline CSS and D3 v5, titled "Wildlife Trafficking Incidents per Species (2015 to 2023)." It uses a `<script>` tag to load d3.v5.min.js from a CDN. The page renders placeholder text and lists (coffee, tea, milk) styled with CSS selectors like `.headerTitle` and `#headerTwo`, without any data visualization or interactive behavior.

Sep 6, 2024

Loading thumbnail…

HTML Basics

This example introduces the VizHub V3 Runtime Environment, showing a minimal "Hello World" setup where a single circle is rendered inside an SVG element via static HTML. It demonstrates the simplified entry point using an exported `main` function from `index.js`, which receives a `container` DIV and `options` with `state` and `setState`. The code highlights interactive widgets for continuous hot reloading, such as adjusting font size by holding Alt and dragging numbers, and emphasizes real-time feedback without an `index.html` file.

Aug 3, 2024