lisacaligagan

@lisacaligagan·7 public vizzes

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation by rendering a smiley face with animated eyebrows, built using D3.js v5. The visualization uses `d3.select` to target an SVG element and `d3.scaleLinear` to map data, though the code also includes a CSV loading attempt with `d3.csv` that references a population dataset. The face is drawn through SVG rect elements appended to the chart, with the eyebrow movement implied by the code's structural setup. The example relies on raw SVG attribute manipulation rather than higher-level layout or force simulation APIs.

Mar 10, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017 data. The data is loaded from a CSV file and rendered as SVG rectangles. The visualization uses the D3 v5 library, specifically the `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to map population values to bar widths and country names to vertical bands. The chart includes labeled axes and bars filled with a steel blue color.

Mar 10, 2019

Loading thumbnail…

Let´s make a facewith SVG and CSS

A stylized face is drawn using SVG shapes within an 960x500 canvas, centered via a transformed group. The face consists of a large teal circle, two small eyes, and a dark arc-shaped mouth. Animated eyebrows, implemented as rectangles, move vertically using chained D3 transitions, creating a simple expressive motion. The example uses D3 v5’s `select` and `arc` APIs to construct the scene, with CSS applied in `styles.css` for page layout.

Mar 10, 2019

Loading thumbnail…

Untitled

This example shows a dynamic network visualization, mapping relationships between connected nodes that drift and settle into clusters over time. The rendering relies on `d3.forceSimulation` for physics-based layout and `d3.geoPath` to draw curved links between points, with node positions updated via `d3.forceSimulation`'s integration loop. The visualization uses the v3 dataset, with nodes and edges loaded from a local JSON structure via `d3.json`. The scene is rendered using the Canvas API, with `getImageData` used to sample pixel colors for a subtle background texture, while CSS transitions handle hover state shifts.

Mar 10, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example displays a small collection of primitive shapes—circles, rectangles, and lines—arranged in an SVG canvas. It demonstrates how SVG elements can be styled and transformed using both inline attributes and an external CSS stylesheet. The SVG groups use transform attributes like scale and translate to reposition shapes, while CSS classes like `.lines` and `.lines path` apply stroke colors and widths. The visualization shows basic geometric composition without any interactivity or data binding, relying solely on static SVG markup and CSS styling.

Mar 10, 2019

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML page that displays a three-item car report with prices. The page presents a list of vehicles with their model years and costs, using a basic title and an unordered list to structure the content. It relies on standard HTML and CSS, with an external stylesheet that sets the font size to 2em and a sans-serif family. The `highlighted` class is applied to the first list item, coloring it red via CSS rules. The code includes empty JavaScript files, but no behavioral logic executes beyond the static markup and styling.

Mar 10, 2019

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML cars report listing three vehicles with their model years and prices, highlighting the first entry in red. It uses plain HTML for content structure, a CSS stylesheet (`styles.css`) to set a 2em sans-serif font and apply the `.highlighted` class for red text. The page is rendered directly in the browser without any JavaScript libraries or data-processing frameworks; the data is hardcoded in the markup. The report demonstrates basic semantic markup and CSS styling for presentation.

Mar 10, 2019