François Plet

@Redcow·8 public vizzes

loading auto mgp scatter plot

This scatter plot visualizes the relationship between acceleration and horsepower in the auto-mpg dataset, with each circle representing a vehicle. The data loads from a CSV file hosted on VizHub. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs within an SVG rendering. Grid lines are styled via tick sizes, and interactive click events log data to the console. The chart includes axis labels and a title, with a steelblue fill and hover effects on the circles.

Jul 6, 2019

Loading thumbnail…

From bars to scatter plot with revert x and y

This example transforms a bar chart into a scatter plot by swapping the x and y axes, displaying country populations as evenly spaced circles with a fixed radius. The visualization uses D3 v5’s `scaleLinear` for the population axis and `scalePoint` for the categorical country axis, with `axisBottom` and `axisLeft` generating gridlines. Data comes from a local CSV loaded via `d3.csv`, and circles are appended to an SVG with click handlers that log each data point to the console.

Jul 6, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to create a minimal interactive web page using the D3.js version 5 library. It displays the text “Hello VizHub!” in a large, styled font on a dark blue background, utilizing the imported `select` API from D3 to target and update the content of a `div` element. The page also showcases modular JavaScript with ES6 imports, loading a message from a separate `myMessage.js` file, and applies custom styling through an external CSS file that imports the Ubuntu font from Google Fonts. The visualization is a simple text rendering that highlights basic D3 DOM manipulation and project structure.

Jul 6, 2019

Loading thumbnail…

custom axis

This example shows the populations of six countries as orange bars on an SVG chart, with a rotated and custom-formatted y-axis that abbreviates large numbers (e.g., "G" becomes "B" for billions). It uses D3 v5 APIs including `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, and removes default tick lines and domains for a cleaner look. The data comes from `data.csv`, with a title and axis label added via SVG text elements.

Jul 6, 2019

Loading thumbnail…

custom axis

This example shows a bar chart of country populations using a linear y-axis and a categorical x-axis. The chart uses D3 v5 to load population data from a CSV file, scales it with `scaleLinear` and `scaleBand`, and renders bars as SVG rectangles with orange fill. An `axisBottom` and `axisLeft` are used to create the custom axes, and clicking a bar logs its data to the console.

Jul 6, 2019

Loading thumbnail…

Let's make a face with D3.js!

This bar chart visualizes population data for six countries using D3.js v5, with orange bars drawn in SVG. The code loads data from a CSV file, maps country names to the x-axis using `scaleBand`, and population values to the y-axis with `scaleLinear`. Axes are added via `axisBottom` and `axisLeft`, while the chart is rendered by appending rectangles to an SVG group, with margins and dimensions derived from the SVG element’s attributes.

Jul 6, 2019

Loading thumbnail…

Let's make a face with D3.js!

A bar chart displays population data for six countries, with bars of varying heights representing each nation’s population. The visualization uses D3.js v5 with SVG rendering, employing `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the x-axis, and `d3.csv` to load the data. The chart is drawn inside a fixed 960x400 pixel SVG container, with margins applied via a group transform. Data is parsed and converted to numeric values before rendering.

Jul 5, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a static smiley face from SVG shapes, including a yellow circle head, eyes, eyebrows, and an arc-based mouth. The eyebrows animate upward and downward through chained `transition()` calls that modify their group’s `transform` attribute over two-second intervals. The code uses D3 selections, `arc()` for the mouth path, and SVG attributes like `cx`, `r`, and `width` to position elements. All shapes are appended to a centered `<g>` group inside an SVG canvas.

Jul 5, 2019