Samuel Elbaz

@raregamer·22 public vizzes

Bowl of Fruit -General update pattern

Five fruit circles animate in and out of an SVG bowl using the D3.js general update pattern. The example demonstrates enter, update, and exit selections with `selectAll`, `data`, and `.merge`, styling apples red and lemons yellow via `scaleOrdinal`. Fruits are removed, replaced, or deleted over time in `index.js` using a random `id` key, while `transition().duration(1000)` animates radius and position changes through the shared `fruitBowl` function.

Dec 19, 2019

Loading thumbnail…

Bowl of Fruit -General update pattern

Five apples enter a bowl as circles, grow to their target radius, and then shrink and disappear when removed from the data array. One apple also changes color and size in place, demonstrating the D3 general update pattern with enter, update, and exit transitions over one-second durations. The visualization uses an SVG canvas with a d3 ordinal color and radius scale, while the JavaScript controls the data mutations on a fixed timer.

Dec 16, 2019

Loading thumbnail…

Bowl of Fruit -General update pattern

Five circles representing apples shrink and disappear from an SVG bowl as a timer updates the underlying data array. The example demonstrates d3's general update pattern with data joins, entering, updating, and exiting selections. Using `scaleOrdinal` for color and radius mapping, the code renders each fruit as a circle with a text label. The visualization cycles through removing an apple, changing an apple to a lemon, and filtering a fruit, showing how the DOM responds to changes in the `fruits` data.

Dec 11, 2019

Loading thumbnail…

Bowl of Fruit -General update pattern

The example demonstrates D3’s general update pattern by animating a bowl of fruit where apples and lemons appear, change, and disappear over time. It shows a dynamic SVG scene with circles colored and sized by fruit type, plus text labels, updating as the data array mutates. Using D3’s scaleOrdinal for color and radius, the code performs data joins with selection.selectAll, appending, merging, and removing elements across three timed transitions. The rendering is entirely SVG, driven by the fruitBowl module and D3 5.12.0.

Nov 25, 2019

Loading thumbnail…

Bowl of Fruit -General update pattern

Nov 25, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 SVG chart responds to browser resizing. The visualization renders a single rounded rectangle that fills the entire viewport, with its width and height dynamically updated whenever the window resizes. The implementation uses a fixed-position `#chart` container and reads its `clientWidth` and `clientHeight` properties to set the SVG attributes. The code registers multiple `window.addEventListener` callbacks for the `resize` event, though only the initial redraw function actually updates the rectangle’s dimensions.

Nov 25, 2019

Loading thumbnail…

World Population Data Set

This visualization displays world population trends over time with a smooth area chart, emphasizing population growth through a filled curve with labeled axes for time and population count. The SVG rendering uses D3.js APIs including `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` components. Population data is loaded via `csv` from a VizHub dataset, formatted with tick labels like "B" for billions, and styled with custom CSS for the title, axes, and path.

Nov 25, 2019

Loading thumbnail…

Lets Make a Face

This example shows a cartoon face built from basic SVG shapes, including a yellow circular head, two eyes, animated eyebrows, and a mouth created with an arc path. The face is centered and assembled using D3 selections, with the eyebrows repeatedly moving up and down via chained `transition()` calls. SVG attributes like `cx`, `r`, and `transform` position each element, while D3’s `arc()` helper generates the mouth’s curved path. The animation runs automatically on page load using D3 v5.

Nov 18, 2019

Loading thumbnail…

Scatter Plot

A scatter plot displays the populations of the ten most populous countries, with circles positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, reading data from a CSV file. Population values are multiplied by 1000, formatted with ticks using `format('.3s')`, and rendered as steelblue circles in an SVG. Grid lines extend across the plot, with axes labels and a title.

Nov 13, 2019

Loading thumbnail…

A Week in San Francisco Line Chart

This line chart displays temperature variations in San Francisco over a week, using a time-scaled x-axis and a temperature-scaled y-axis with axis labels and gridlines. The visualization is rendered as an SVG, generated with D3.js, leveraging functions like `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with `curveBasis` to create the smoothed area chart. Data is loaded from an external CSV file containing timestamps and temperature values, which are parsed and mapped to the chart’s coordinates. The chart includes a title and styled axes with rotated labels for enhanced readability.

Nov 13, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a sample of cars from the auto-mpg dataset. Each red circle represents one car, with its position determined by D3's `scaleLinear` mapping the horsepower and weight values to screen coordinates. The visualization uses D3 v5's `csv` to load remote data, `axisLeft` and `axisBottom` for the labeled axes with grid lines, and SVG circles with opacity for the points. The plot is rendered entirely in SVG within a fixed 960x500 viewport.

Nov 13, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, with a custom tick formatter via `format('.3s')` to abbreviate numbers. SVG rendering is used, drawing steel-blue bars with margins and a title. The data comes from a CSV file where population values are multiplied by 1000 during loading.

Nov 12, 2019

Loading thumbnail…

A Week in San Francisco Line Chart

This line chart visualizes temperature fluctuations in San Francisco over a week, using time on the x-axis and temperature on the y-axis. The chart includes labeled axes, grid lines, and a smooth red curve connecting daily data points. Built with D3 v5, the code uses `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. Data comes from a CSV file loaded via D3’s `csv` function, with timestamps parsed as dates and temperatures converted to numbers.

Nov 4, 2019

Loading thumbnail…

A Week in San Francisco Line Chart

This line chart visualizes temperature fluctuations across a week in San Francisco, with time on the x-axis and temperature on the y-axis. The red curved line connects daily data points, while labeled axes and a title orient the viewer. Built with D3.js v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`. The SVG rendering applies grid lines, axis labels, and styling from an external CSS file. Data comes from a CSV of timestamped temperatures fetched via `d3.csv`.

Nov 4, 2019

Loading thumbnail…

A Week in San Francisco Line Chart

This line chart visualizes temperature variations in San Francisco over a week, with time on the x-axis and temperature on the y-axis. Red connecting lines and steel-blue circles mark individual data points, while labeled axes and a title provide context. The visualization uses D3.js v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render the SVG. Data is loaded from an external CSV containing timestamps and temperature readings, which are parsed and converted before being plotted.

Nov 4, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a collection of cars, with each point representing a vehicle. The plot uses linear scales for both axes and includes labeled axes for horsepower and weight, along with a title. The visualization is built with D3.js, employing functions like `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart within an SVG. Data is loaded from a CSV file using D3's `csv` function, and the points are rendered as semi-transparent red circles with a fixed radius.

Oct 31, 2019

Loading thumbnail…

Making a bar chart

This bar chart displays the populations of ten countries, using horizontal bars ordered from most to least populous. Built with D3.js, it uses `scaleLinear` for the population axis and `scaleBand` for the categorical country labels, with axes generated via `axisLeft` and `axisBottom`. The SVG rendering applies a steelblue fill to the rectangles, and the data is loaded from a CSV file.

Oct 29, 2019

Loading thumbnail…

Making a bar chart

This example displays a horizontal bar chart of country populations, sourced from a CSV file and rendered as an SVG. The D3.js library maps population values to bar lengths using a linear scale, while country names define the categorical axis. Explicitly coded axis generators, `axisLeft` and `axisBottom`, place labels for interpretation. The bars are drawn by appending `rect` elements, whose width is derived from the scaled population data, and the visualization is styled with steelblue fills, as seen in the accompanying CSS.

Oct 28, 2019

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values scaled along the x-axis and country names on the y-axis. It loads data from a CSV file and renders the bars as SVG rectangles using D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. The bars are styled with a steelblue fill via CSS, and axes labels are positioned with margins for readability.

Oct 28, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS style rules combine to create a static, colorful composition. It shows circles, rectangles, lines, and a path, with fill colors applied directly via attributes or inherited from group elements. The rendering uses plain SVG elements inside an HTML file, with CSS classes in an external stylesheet controlling stroke appearance, such as width, color, and line join for the path. The code also relies on SVG transform attributes to scale and translate the entire graphic.

Oct 25, 2019

Loading thumbnail…

Cars Report

This example demonstrates VizHub’s ability to render a simple text message, “Hello VizHub!”, using an ES6 module named `myMessage.js`. The page loads an HTML wrapper that injects the message into a `<pre>` element via JavaScript. Styling is handled with CSS, importing the Ubuntu font and applying a dark blue background with large, light-colored text. The code relies on standard browser APIs and module bundling through VizHub’s build process, showcasing basic file structure and modular imports rather than data visualization.

Oct 24, 2019

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the message “Hello HTML!” in large, centered text. It uses plain HTML and CSS, with a `.message` class setting the font size and text alignment. The page contains no JavaScript, data, or external libraries, relying solely on the browser’s default rendering of static markup. The simplicity highlights how a single HTML file can produce a complete, styled visual output without additional dependencies.

Oct 24, 2019