gavriel-binshtok (@gavriel-binshtok), VizHub

Making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, scaled by thousands. The visualization uses D3 v5 with SVG rendering, reading data from a CSV file and mapping population values to bar widths via `d3.scaleLinear` and country names to `d3.scaleBand`. The code demonstrates data loading with `d3.csv`, appending rectangles to the SVG, and applying margins to position the chart. No axes or labels are drawn, focusing purely on the bar geometry.

Dec 8, 2019

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, scaled by thousands. The visualization uses D3 v5 with SVG rendering, reading data from a CSV file and mapping population values to bar widths via `d3.scaleLinear` and country names to `d3.scaleBand`. The code demonstrates data loading with `d3.csv`, appending rectangles to the SVG, and applying margins to position the chart. No axes or labels are drawn, focusing purely on the bar geometry.

Dec 8, 2019

Loading thumbnail…

data

This example shows a bar chart of population data for the top ten countries, with each bar’s width scaled to its population. The visualization uses D3 v5 to load CSV data, parse the population values, and render SVG rectangles. It relies on `d3.scaleLinear` for the x-axis scaling and `d3.csv` for data ingestion, with the SVG dimensions defined in the HTML. The bars are appended directly to the svg selection, though the y-axis positioning is incomplete.

Nov 25, 2019

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js to construct a simple face from an SVG canvas, setting a red background via `select('svg')` and `style('background-color', 'red')`. The page loads D3 v5 from a CDN and applies a monospace, large-font style from an external stylesheet, with a `.highlighted` class that turns text red. The code imports the `select` function from D3 and applies it to the existing SVG element, though no face elements are actually drawn in the provided script, leaving the visualization as a placeholder for further shape-building logic.

Nov 25, 2019

Loading thumbnail…

Untitled

This example presents a single, large monospaced line of text that changes color from black to red. It demonstrates a minimal typographic interaction using plain HTML and CSS, with no external libraries or JavaScript. The visible data is the text itself, which the viewer reads as a static sentence; the only dynamic behavior is the style change triggered by a user action, such as hovering or clicking. The rendering relies on the browser’s default text layout, with the `:hover` or `:active` pseudo-class from CSS providing the color transition.

Nov 6, 2019

Loading thumbnail…

Cars Report

This example displays a car report with a list of filtered vehicles, highlighting a selected entry in red within a green-styled page. It demonstrates ES6 module imports and exports across multiple JavaScript files, using `cars.js` to parse JSON data, `formatCar` to construct string descriptions, and `generateReport` to filter cars by price and join the results. The HTML output is styled with CSS, and the `index.js` file calls `generateReport` to populate the page via `document.getElementById`, though the message element is not present in the provided markup.

Nov 2, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to render a simple text message using D3.js within the VizHub environment. The code imports the `select` function from D3 v5 and uses it to set the text content of a `div` element, with the string imported from a separate ES6 module. The page features large, centered Ubuntu typography against a dark blue background, styled via external CSS. This minimal example highlights basic module imports and D3 DOM manipulation.

Oct 16, 2019