plusbeauxjours

@plusbeauxjours·13 public vizzes

Fork of Working with Time

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset as a smooth line chart with circular markers. React components render SVG elements, while d3.scaleTime and d3.scaleLinear map data to coordinates, and d3.line with curveNatural creates the interpolated path. Axis components generate tick marks and labels, with hover tooltips providing formatted timestamps via SVG titles. The code imports specific d3 utilities like csv, extent, max, and timeFormat to parse the external CSV data source.

Sep 22, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the Iris dataset as an SVG scatter plot within a React application, mapping sepal length on the x-axis and sepal width on the y-axis. It uses `d3.scaleLinear` for both axes, with `d3.extent` to compute the domains from the CSV data, and renders circles for each observation. The code includes custom React components for the axes and marks, with `d3.format` handling the x-axis tick labels in compact notation. Styling is applied through CSS classes for ticks and marks, with data loaded via `d3.csv` from a GitHub-hosted file.

Sep 16, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

This fork of a refactored bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset using React and D3 v5. Horizontal bars are rendered as SVG rectangles via the `Marks` component, scaled with `scaleBand` for the y-axis and `scaleLinear` for population values. The chart includes labeled axes using `AxisBottom` and `AxisLeft`, with population formatted using D3’s `format('.2s')`. Data is loaded asynchronously via `csv` and `useEffect`.

Sep 15, 2021

Loading thumbnail…

Fork of Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart with no visible axes, using React and D3 v5. It loads UN World Population Prospects 2019 data via `d3.csv`, sorts and slices the first ten rows, and renders SVG rectangles with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The code defines custom React components for the bottom axis and left axis labels, though the left axis is omitted from the final rendering. The chart displays population values encoded as bar widths, with red tick lines on the bottom axis.

Sep 13, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart using React for component structure and D3 v5 scales for data mapping. The application fetches UN World Population Prospects 2019 data via d3.csv, then renders SVG rectangles whose widths correspond to each nation’s 2020 population estimate. The chart deliberately omits axis labels or tick styling, presenting only raw red tick lines and country names through custom React components like AxisBottom, AxisLeft, and Marks, with y-axis positioning using scaleBand and x-values scaled via scaleLinear.

Sep 13, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst chart displays CSS named colors as equal-width slices arranged in a circle, each filled with its corresponding hex value. The visualization loads color data from a CSV file using D3’s `csv` utility, then processes it with the `pie` layout and renders each slice as an SVG `path` via the `arc` generator. React manages the component state and lifecycle, with `useState` for the fetched data and `useEffect` for the asynchronous data loading, while D3 v5 provides the data parsing and geometry calculations.

Sep 12, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing acceleration, horsepower, and weight as area marks with tooltips displaying car names. It uses the Vega-Lite API (vl) to define the visualization declaratively, with D3’s csv loader fetching the data. The code registers vega, vega-lite, and vega-lite-api, and uses vega-tooltip’s Handler for interactive tooltips. Styling is customized via a config object, and the chart is sized to fit the window, with rendering done in SVG.

Sep 12, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A grid of randomized smiley faces is rendered as SVG, each face using the same geometric layout but with independently varied dimensions for eyes, mouth, and stroke width. Built with React functional components split across multiple files, the code composes a `FaceContainer` that wraps `BackgroundCircle`, `Eyes`, and `Mouth` components. The mouth is drawn using D3’s `arc` generator, while `d3.range` generates the 6×3 array of faces. React Fragments group the eye circles, and each face is positioned via SVG transforms.

Sep 7, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example builds a smiley face from React components and D3.js. The visualization renders a yellow circle with a black stroke as the face, two black circles for eyes, and a mouth drawn as a D3 arc path. The code uses React components for the background, eyes, and mouth, with D3’s `arc()` API to generate the mouth path. The rendering occurs as an SVG, with all elements positioned relative to the center of the canvas.

Sep 7, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a smiley face using React components and SVG primitives, with a yellow circle for the head, two black eyes, and a curved mouth. The mouth is generated with the D3 `arc()` generator, which defines an annular sector path based on inner and outer radii and start/end angles. The face is centered within a 960×500 viewport, and all elements are positioned via a `<g>` transform. The code imports the `arc` function from D3 v7 and uses React 16.9 for component structure, while the SVG is drawn directly in JSX.

Sep 7, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face is rendered as an SVG graphic centered within the viewport. The visualization shows a circular head with two black eye circles and a curved mouth arc, constructed programmatically. The code uses React to build the SVG elements and D3's `arc` generator to define the mouth's path with specific inner and outer radii and angular bounds. The face is drawn using hard-coded dimensions and coordinates, with no external data source.

Sep 7, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as an SVG, featuring a circular head with a black outline and two black eyes positioned symmetrically around the center. The face is incomplete, as it lacks a mouth, aligning with the title’s reference to a half-finished project. The visualization uses React to define the component structure, with ReactDOM rendering the SVG elements to the page. It employs hard-coded constants for dimensions and offsets, drawing circles with SVG’s built-in `circle` element and stroke properties.

Sep 6, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using bare SVG elements defined directly in an HTML file. The visualization shows a large yellow circle with a black outline, accompanied by two smaller black circles positioned to represent eyes. The implementation uses the SVG `<circle>` element within an inline `<svg>` tag, setting explicit attributes for radius, center coordinates, fill color, stroke, and stroke width. No JavaScript libraries or data sources are involved; the graphic is purely static markup with minimal CSS to remove page margins and hide overflow.

Sep 6, 2021