Skip to main content
Log in
H

hhernandezATsxu

@hhernandezATsxu·7 public vizzes

Loading thumbnail…

Making a Bar Chart - 072019

This bar chart displays the population of ten countries, sorted alphabetically along the y-axis with horizontal bars whose lengths correspond to population values. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for labeled axes, and renders SVG rectangles. Data is loaded from a CSV file using `d3.csv`, with populations multiplied by 1000 during preprocessing.

Jul 20, 2019
Loading thumbnail…

Making a Bar Chart - 071919

A horizontal bar chart ranks ten countries by population, using steel-blue bars scaled linearly from zero to each country's total. The visualization loads population data from a CSV file, multiplies the values by 1,000, and renders an SVG with D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The bars are grouped with margins and a padding of 0.1, with country labels on the y-axis.

Jul 20, 2019
Loading thumbnail…

Making a Bar Chart - 071919

A horizontal bar chart ranks ten countries by population, using steel-blue bars scaled linearly from zero to each country's total. The visualization loads population data from a CSV file, multiplies the values by 1,000, and renders an SVG with D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The bars are grouped with margins and a padding of 0.1, with country labels on the y-axis.

Jul 20, 2019
Loading thumbnail…

Making a Bar Chart - 071919

This example shows a bar chart of country populations using data loaded from a CSV file, with each country’s population value mapped to a rectangular bar. The bars are rendered as SVG rectangles with fixed width and height values of 300, so the visualization does not yet scale the bars to reflect the data magnitude. The code uses D3 v5’s `select` and `csv` methods to fetch the data, parse the population strings into numbers, and append the rectangles to an SVG canvas.

Jul 20, 2019
Loading thumbnail…

Making a Bar Chart - 071919

This example shows an empty SVG canvas with no data or visual elements rendered. The code sets up a basic D3 v5 bar chart scaffold by selecting the SVG element, reading its width and height attributes, and importing the `select` function from the d3 module. The accompanying stylesheet hides the page margin and overflow, while the script loads from a separate bundle, but no chart is actually drawn.

Jul 20, 2019
Loading thumbnail…

HJH at SXU --- Hello VizHub

This example demonstrates a minimal VizHub setup that renders a static text message on a styled web page. It displays the phrase "Hello VizHub!" centered against a dark blue background using the Ubuntu font. The visualization is built with D3.js v5, specifically using the `select` function to target the `#message` div and set its text content. The code also highlights modular programming through an ES6 module, `myMessage.js`, which exports the message string, while `styles.css` handles all visual styling.

Jul 18, 2019
Loading thumbnail…

HJH at SXU --- Hello VizHub

This example displays a large, centered greeting, “Hello VizHub,” in white text on a dark navy background using the Ubuntu font. It demonstrates basic VizHub capabilities by combining a modular JavaScript structure with D3.js. The D3 `select` function targets the `#message` div to set its text from an imported ES6 module. The page’s styling is defined in a separate CSS file, showcasing how to split code, styles, and content across files.

Jul 18, 2019