Luiz Domingues

@lcsd·11 public vizzes

Fork of Contour Plot with CSV Data (Plotly.js)

A contour plot visualizes ten data points from a CSV file, mapping xi, yi, and zi values across a grid with color-coded iso-lines and labels. The example uses Plotly.js’s `newPlot` with a `contour` trace type, setting `colorscale` to Rainbow and enabling `connectgaps` to smooth regions. D3 v7 handles CSV parsing via `d3.csv`, extracting arrays for x, y, and z coordinates. Axis ranges are dynamically computed from maximum values, and the layout includes custom margins, tick labels, and a title. Data is rendered directly in the browser without additional server processing.

Jan 13, 2023

Loading thumbnail…

05_Customizing Axes

This visualization shows the top 10 most populous countries based on 2018 United Nations estimates, with China, India, and the United States leading. It builds on a basic bar chart by customizing d3.axisBottom with tick formatting that converts large numbers to abbreviated labels, turning G into B for billions. The chart removes default domain lines and tick marks from both axes, adds a rotated title, and includes explanatory axis labels. Data is loaded from a CSV file and rendered as SVG rectangles using d3.scaleLinear for the population scale and d3.scaleBand for the country categories.

May 17, 2022

Loading thumbnail…

05_Customizing Axes

May 15, 2022

Loading thumbnail…

03_Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with circles for the eyes, a mouth formed by the `d3.arc` generator, and rectangular eyebrows that animate upward and back down via chained `transition` calls over two seconds each. The code selects the SVG element, positions a group at its center, and uses D3's modular imports (`select`, `arc`) to construct and manipulate shapes. The eyebrows' movement demonstrates basic DOM updates through D3's data-join-free attribute transitions.

May 15, 2022

Loading thumbnail…

D3 Intro Smiley Face

This example shows a simple smiley face drawn entirely with SVG shapes, centered in a 960×500 viewport. It demonstrates basic D3 selections, attribute manipulation, and SVG group transformations. The code appends a yellow circle for the face, then uses two nested groups to position eye circles and line paths with `translate` transforms, relying on D3’s `select` and `append` methods. Black strokes outline the face and eye details, while CSS hides page margins and overflow.

May 14, 2022

Loading thumbnail…

SVG Tests HTML/CSS/SVG

A set of static SVG shapes demonstrates the effects of CSS and SVG transforms. Circles, rectangles, and a line are drawn directly in the markup, some with explicit fills and strokes, while a surrounding group applies a non-uniform scale. A nested group uses translation and rotation, with inherited stroke properties and a lightgreen fill. The page loads a linked stylesheet that resets the body margin and hides overflow, affecting the canvas presentation. No JavaScript or interactions are present.

May 14, 2022

Loading thumbnail…

Cars Report HTML/CSS/SVG

A minimal HTML page demonstrates a sample car sales report by listing three vehicles with prices, where the 2012 Nissan Leaf is highlighted in red and bold via the `.highlited` CSS class. The page includes a centered, italicized message below the list and embeds a PNG version of the Ghostscript Tiger image from Wikimedia Commons. The example uses plain HTML elements, a linked external `styles.css` for typography and styling, and an `<img>` tag with a hyperlink reference, with no JavaScript libraries like D3.

May 14, 2022

Loading thumbnail…

01_SVG shapes and animation sandbox

An SVG playground demonstrates layered rectangles forming a striped sky, animated drifting clouds, and a static vector flower. The code uses raw SVG elements like `<rect>`, `<circle>`, `<ellipse>`, and `<path>`, with `<animateMotion>` to move cloud groups along predefined paths over 25–120 second loops. No external libraries are used; rendering relies entirely on inline SVG markup and CSS styling for the canvas dimensions.

May 13, 2022

Loading thumbnail…

01_SVG Playing Around and Studying

This example shows an animated SVG landscape with a cycling sky, sun, land, trees, and birds. It uses the SVG DOM API with `document.createElementNS` to construct all elements dynamically. The sky and sun gradients are animated via SVG `<animate>` elements, while CSS keyframes drive the sun and moon's rotation. The birds are generated procedurally through a custom `bird()` function and positioned with CSS transforms.

May 13, 2022

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle with a thick black border changes its fill and stroke in response to hover. Using only CSS transitions, the rectangle’s fill transitions to light green, its stroke to darkmagenta, and its stroke width expands from 20px to 100px over three seconds. The code applies the `transition` property with `all` duration to the `rect` selector, triggered by the `:hover` pseudo-class, without any JavaScript or D3 involvement.

May 13, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG landscape depicts a stylized sunrise and sunset cycle over rolling hills. The visualization uses a radial gradient for the sky and linear gradients for two landscape layers, all defined within SVG `defs` tags. The sun, a simple circle, moves vertically via an SVG `<animate>` element, while the gradient colors transition to simulate the shifting light. This example demonstrates fundamental SVG animation and gradient techniques without any external libraries.

May 7, 2022