JulienJacquot

@JulienJacquot·6 public vizzes

Fork of Refactored Bar Chart

This fork of the refactored bar chart displays the top 10 most populous countries based on the United Nations World Population Prospects 2019 data. The chart uses horizontal bars with axes, rendered as SVG elements within a React application. The visualization employs D3 v5 scales for positioning, with `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous population values on the x-axis. Data is loaded asynchronously using D3's CSV parser and processed through custom React components for axes and marks.

Feb 12, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart, with population values formatted in billions and labeled on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements for the bars. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Axis components render tick marks and labels, while native SVG `<title>` elements provide tooltips. The chart uses a Poppins font and a teal color scheme for the marks.

Feb 12, 2022

Loading thumbnail…

JJA

This example demonstrates a minimal React setup that renders a static "Hello JSX" heading using ReactDOM. It combines a separate HTML entry point with CSS styling and a JavaScript module that imports React and ReactDOM to mount the component into the root element. The page includes an additional "Hello HTML!" message styled with large font size, illustrating basic integration of CSS and JavaScript in a React application. It does not include data visualization or dynamic behavior.

Jan 29, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This fork of the Smiley Face Part II visualization renders a full-screen smiley face using React and SVG. The face is centered on the canvas, with a yellow circle for the head, a black stroke for the outline, and black circles for the eyes, positioned relative to the center. The code imports React and ReactDOM to dynamically compute dimensions from `window.innerWidth` and `window.innerHeight`, then uses SVG elements within a `<g>` transform to draw the face. The rendering adapts to the browser window size.

Jan 29, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces, each with unique eye positions, radii, stroke widths, and mouth dimensions, fills the viewport. The example demonstrates composing SVG visualizations from React components and D3 shape generators. Each face is built from a yellow background circle, two dark eyes, and a mouth path created using D3's `arc` generator. The `range` function from D3 generates the array of faces, while React's component model handles the reusable `Face`, `Eyes`, `Mouth`, and `BackgroundCircle` elements, rendered into a single SVG container per face.

Jan 29, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a minimal SVG circle rendered as a static, un-styled element within an HTML page. It demonstrates the simplest possible use of SVG markup directly embedded in a document, with no external JavaScript or data binding. The code uses only native browser SVG rendering for the circle, defined by its radius attribute, and relies on inline HTML structure. The circle has no fill or stroke specified, so it appears as a black shape by default. This serves as a starting point for building more complex visualizations.

Jan 26, 2022