cyriltoneatto965

@cyriltoneatto965·6 public vizzes

D3 scatter plot

This example uses D3.js to create a scatter plot of the classic Iris dataset, loaded via a CSV file from a gist. It displays two measurements, petal length along the x-axis and sepal length along the y-axis, as small circles. The code leverages `d3.csv` for data loading and parsing, `d3.scaleLinear` for mapping data values to screen coordinates, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The visualization is drawn as an SVG, sized to fill the browser window, with a fixed margin around the plot.

Nov 21, 2023

Loading thumbnail…

JS in HTML

This example demonstrates a minimal HTML page that integrates CSS for styling and JavaScript for logging a message to the console. The page displays the text “Hello HTML” with a large, centered CSS class, while the accompanying `index.js` file imports a constant from `something.js` and logs “Hello A thing.” to the browser console. The code uses vanilla JavaScript module imports and the `console.log` API, without any external libraries or data sources.

Nov 17, 2023

Loading thumbnail…

Javascript First Steps 2

A wave of fifteen circles animates across the screen, rising and falling in a sine pattern driven by a continuously incrementing time variable. Using D3 v6, the code selects all circles, binds new data from `d3.range` on each interval, and updates their `cx` and `cy` attributes to create smooth motion. The React-free example renders SVG directly to the body, with the animation updating every 30 milliseconds.

Nov 17, 2023

Loading thumbnail…

Javascript First Steps

This example demonstrates the foundational steps of building a visualization with D3 and React. It creates a minimal web page with a bare HTML structure and an empty SVG element appended to the body using D3’s `select` and `append` methods. The JavaScript code contains commented-out exercises on array methods like `push`, `forEach`, `filter`, `map`, `reduce`, and `sort`, illustrating how data transformations work in D3. The visualization itself is purely an empty SVG canvas, with no data or shapes rendered, serving as a starting point for learning JavaScript and D3 syntax.

Nov 17, 2023

Loading thumbnail…

D3 first steps

This example generates a full-screen grid of 100 vertical and horizontal bars using D3 selections and joins, then applies two circular SVG masks to create a striking cross-hatch pattern. Built with a React-wrapped D3 v6 setup, the code uses `select`, `range`, and `join` to bind data to rectangles, while the masks—one with a white circle on black, the other inverted—reveal and hide intersecting lines around a central focal point.

Nov 16, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes in a static web page, including rectangles, circles, and lines with various fill and stroke styling. The code defines a 969x500 SVG canvas containing a large red-outlined rectangle, two circles with different colors and stroke widths, and a navy line connecting two points. The visualization uses plain HTML and CSS within a React framework, rendering shapes directly through SVG elements without additional data sources or JavaScript libraries.

Nov 15, 2023