EK Azubuike

@ekazubuike·4 public vizzes

Let's make a bar chart!

A bar chart displays population estimates for eight countries in 2017, using a vertical layout with country names on the y-axis and population values on the x-axis. The visualization reads population data from a CSV file and renders it as SVG rectangles using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. The chart applies a steelblue fill to the bars, with axes generated through D3’s axis components.

Oct 2, 2018

Loading thumbnail…

Let's make a face!

A yellow circle is drawn at the center of an SVG canvas, with its radius and position set via chained D3 selections. The example demonstrates basic SVG shape creation and attribute manipulation using D3 v5, with the circle's fill color and dimensions defined through `attr()` calls. The code imports `select` from D3 and appends a circle element to the pre-existing SVG container, while CSS styles the page background and typography.

Oct 2, 2018

Loading thumbnail…

CSV Summary

This visualization displays a minimal summary of a CSV file’s contents as oversized text, showing the number of rows, column count, and file size in kilobytes. The code loads data from a remote auto_mpg.csv file using d3.csv, then computes metrics with csvFormat and object inspection. The results are appended to the body as a pre element, with styling controlled by the styles.css file, which sets a dark background and large Ubuntu font. The example demonstrates basic data loading and text output without any interactive features.

Sep 26, 2018

Loading thumbnail…

Hello VizHub!

This example demonstrates basic text rendering in a web page styled with CSS, displaying the message “Hello VizHub!” as an interactive introduction to the VizHub platform. The visualization consists of a single text element centered on a dark background, using the Ubuntu font family. The code employs D3.js v5 as a library, with the `index.js` file importing a message from an ES6 module (`myMessage.js`), while the HTML structure and external stylesheet handle layout and styling. No data sources or dynamic visualizations are present; the example serves as a minimal starter template for building more complex data visualizations.

Sep 26, 2018