P

PiotrekW2

@PiotrekW2·21 public vizzes

Loading thumbnail…

My bar chart

This example shows a horizontal bar chart of national populations with bars proportional to each country’s population value. The chart renders as SVG rectangles positioned within a fixed 960-by-500 viewport using D3 v5’s `select`, `append`, and `scaleLinear` APIs. Population data loads from a CSV via `d3.csv`, with values multiplied by 1,000 before mapping through a linear scale. The underlying framework emphasizes fundamental DOM manipulation techniques demonstrated in the accompanying video.

Loading thumbnail…

D3 bar chart

This bar chart displays the populations of the world’s ten most populous countries, sorted by rank, with China leading and Mexico last. The code loads a CSV file using `d3.csv`, scales the data with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, and renders SVG rectangles. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the chart drawn inside an SVG container using D3 v5.

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to demonstrate fundamental DOM manipulation and data binding by generating a playful visualization of global population data. The code loads a CSV file containing country population figures and renders them as SVG rectangles using D3’s `select`, `csv`, and `data` joins, with a smiley face motif whose eyebrows animate as a visual accent. The page leverages D3 v5 and direct SVG manipulation within an HTML document, showcasing how shape generation and layout can be driven by external data.

Loading thumbnail…

Let's make a face with D3.js!

This example creates a face using D3.js, drawing shapes onto an SVG element. It begins by selecting the SVG and appending a group (`g`) to contain the face’s parts, using the `d3.select` API. The code loads data from a CSV file via `d3.csv`, though the exact usage is incomplete. The visualization demonstrates a simple, programmatic approach to constructing a facial composition, relying on SVG rendering within a 960×500 canvas. Styling is minimal, with the page margin reset for a clean display.

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, where the eyebrows animate upward and then back down in a looping motion. The face is centered using a translated `<g>` group, with circles for the eyes and a D3 arc path for the mouth. It demonstrates fundamental DOM manipulation with D3 v5, using `select`, `attr`, and chained `transition().duration()` calls to move the eyebrow group. The animation runs continuously, shifting the eyebrows vertically by 50 pixels before returning to their original position.

Loading thumbnail…

Let's make a face with D3.js!

D3.js builds a smiley face from SVG shapes: a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth. The code uses `d3.select` and `d3.arc` to construct the face, then applies a chained `transition().duration(2000)` to repeatedly move the eyebrow group up and down, creating an animated expression. All elements are centered via a translation transform.

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a smiley face with D3.js v5, using SVG shapes and animation to make the eyebrows move. A yellow circle forms the face, with two smaller circles for eyes and a path drawn with the `arc` helper for the mouth. The code uses `select` and `append` to create elements, and `transition().attr` to animate the eyebrows upward and back down over two seconds each way. The face is centered by translating a group element, with all dimensions derived from the SVG’s width and height attributes.

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face demonstrates basic DOM manipulation and chained transitions by animating raised eyebrows. Built from SVG primitives—circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—the code uses d3.select and d3.arc with explicit positional variables. The eyebrows move via transition().duration(2000) calls that shift the group’s transform attribute between two vertical offsets, creating a repeating motion. The example uses d3.v5 and renders entirely in SVG within a fixed 960x500 viewport.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can manipulate SVG elements to create an animated smiley face with moving eyebrows. The code selects an `<svg>` element and uses D3’s data-binding and attribute methods to position facial features, while the eyebrow movement relies on D3 transitions. It renders entirely in-browser using D3 v5, with no external data source—the face is built from static shapes defined in `index.js`. The visual result is a playful, interactive-looking illustration of core D3 DOM manipulation techniques.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. The chart presents countries along the x-axis and their population values along the y-axis, with bars rendered as SVG elements. The code uses D3 v5, specifically the `select` and `append` methods to build the visualization, loading data from a CSV file with `d3.csv`. The example serves as a tutorial, with an accompanying YouTube video demonstrating the construction process.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization renders as an SVG with a clean, minimal layout, showing each country’s population value as a vertical bar. The chart is built with D3 v5, using the `d3.csv` function to load the dataset and `d3.scaleLinear` for the y-axis, while the bars are drawn with SVG `rect` elements. Data is stored in a CSV file and styled with a single CSS file.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Country names appear on the left axis, with population values on the bottom axis. The code reads data from a CSV file, multiplies population values by 1000, and renders steel-blue rectangles using `selectAll('rect').data().enter().append()`.

Loading thumbnail…

Let's make a face with D3.js

A yellow face with eyes and eyebrows is drawn in SVG using D3.js. The eyebrows animate up and down through chained `transition` and `duration` calls, while the mouth alternates between a frown and a smile using `setTimeout` to invoke a custom `mouthFunction` that redraws an arc path via D3's `arc` generator. The code uses `select`, `append`, and `attr` to build the face from primitive shapes, and `exit` and `remove` to replace the mouth path.

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 and SVG to draw a simple, stylized face on a 960×500 pixel canvas. The code creates a single yellow circle with a black outline, centered both horizontally and vertically, by setting the radius to half the SVG height. It demonstrates basic SVG shape construction and attribute manipulation through D3's `select` and `append` methods, using the `attr` function to position and style the circle. No data source is involved; the visualization is purely programmatic.

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple face on an SVG canvas. It creates a single yellow circle with a black stroke, positioned at the center of a 960-by-500 pixel SVG element. The code retrieves the SVG’s dimensions via `attr` calls and uses `svg.append('circle')` to place the shape, setting its radius to half the canvas height. The visualization demonstrates basic SVG shape construction with D3’s selection and attribute methods.

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v3 to construct a cartoon face entirely from SVG elements, with each facial feature—eyes, nose, and mouth—positioned and styled through D3 selections. The face is built procedurally, combining geometric shapes and paths, while the code applies D3’s data-binding and attribute manipulation to control placement and dimensions. The rendering leverages SVG within a large viewport, and the styling is handled via external CSS. The demonstration focuses on compositional techniques rather than data mapping, showcasing D3’s utility for generative drawing and static visualization design.

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v3 to construct a cartoon face entirely from SVG elements, with each facial feature—eyes, nose, and mouth—positioned and styled through D3 selections. The face is built procedurally, combining geometric shapes and paths, while the code applies D3’s data-binding and attribute manipulation to control placement and dimensions. The rendering leverages SVG within a large viewport, and the styling is handled via external CSS. The demonstration focuses on compositional techniques rather than data mapping, showcasing D3’s utility for generative drawing and static visualization design.

Loading thumbnail…

Hello VizHub

A minimal D3.js example displays the text “Hello VizHub!” centered on a dark background using the Ubuntu font. The code imports the `select` function from d3.v5 to target the `#message` div and sets its content from an ES6 module. Styling comes from an external stylesheet that sets font size, color, and the Google Fonts import. This demonstrates a basic project structure with separate HTML, JavaScript, and CSS files.

Loading thumbnail…

Hello VizHub

A minimal D3.js example displays the text “Hello VizHub!” centered on a dark background using the Ubuntu font. The code imports the `select` function from d3.v5 to target the `#message` div and sets its content from an ES6 module. Styling comes from an external stylesheet that sets font size, color, and the Google Fonts import. This demonstrates a basic project structure with separate HTML, JavaScript, and CSS files.

Loading thumbnail…

Cars Report

This visualization displays the first car model from a static JSON array, rendering the name “Fiat” in large, centered text on a dark background. The example demonstrates a minimal data-to-DOM pipeline using ES6 modules: cars2.js defines and exports the parsed data, while index.js imports it and writes the value into a pre element via `document.getElementById` and `textContent`. The page uses Google Fonts’ Ubuntu typeface and relies entirely on vanilla JavaScript and CSS, with no external libraries.

Loading thumbnail…

Hello VizHub

This example displays a car price report by parsing an embedded JSON array and formatting each model with its price using JavaScript string templates. The page renders a large, centered text output onto a dark background with Ubuntu typography, using `document.getElementById` to inject the formatted message into the HTML. It relies on the `JSON.parse` method to convert the data and plain DOM manipulation to update the `<pre>` element, with no external visualization libraries.