Skip to main content
Log in
S

sayli-lab

@sayli-lab·10 public vizzes

Loading thumbnail…

Barchart and table_1 with D3.js

A horizontal bar chart displays the populations of nine European countries, sorted from most to least populous. The visualization uses D3.js v6 within a React framework, rendering SVG elements. It employs D3 scales, axes, and the `csv` loader to read the data, with population values multiplied by 1,000. The chart includes axis labels and a title, with tick formatting using the `format` function.

Aug 31, 2020
Loading thumbnail…

Barchart and table with D3.js

This example displays a horizontal bar chart of population counts for eight European countries, rendered as SVG rectangles inside a 960 by 500 pixel viewport. The data is loaded from a local `data.csv` file and parsed with the `csv` function from D3 v6. The chart’s x-axis scale is computed using `scaleLinear` with a domain from zero to the maximum population value, while the y-axis uses `scaleBand` to position each country’s bar. The React-based starter code integrates D3 selectors and attribute setters to map population values to bar widths and country names to vertical offsets.

Aug 28, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from the Data Canvas - Sense Your City dataset. Temperature is plotted over time with distinct colored lines for each city, and a color legend identifies which line corresponds to which location. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `scaleOrdinal` with `schemeCategory10`, `nest` to group data by city, and `line` with `curveBasis` for smoothed paths.

Aug 28, 2020
Loading thumbnail…

Smiley face with D3.js

A yellow smiley face rendered in SVG animates its eyebrows in a repeating up-and-down motion. Drawing from a simple hardcoded set of shape parameters, the code uses D3 selections and the `arc` generator to construct the face, eyes, mouth, and rectangular eyebrows. The animation relies on chained `transition` calls with a two-second duration to move the eyebrow group along the y-axis. The example is built with D3 v6 within a React starter project, targeting the SVG element directly.

Aug 27, 2020
Loading thumbnail…

HTML cars report

This example shows a simple SVG scene with two pairs of circles, one duplicated inside a translated group, rendered in a fixed 960×500 viewport. It relies on the React starter code to mount a bundle, with styles applied via an external stylesheet. The circles are drawn using raw SVG elements in JSX-like markup, with the second circle in each pair filled red, while the `<pre>` element remains ready to display a message. The visualization demonstrates basic layering and coordinate transformation through SVG’s `transform` attribute, without any dynamic data or interaction.

Aug 26, 2020
Loading thumbnail…

HTML cars report

This example displays a simple cars report, listing three vehicles with their model years and prices, with the first entry highlighted in red. The page is built with React, using a static HTML file that contains the list structure and a CSS stylesheet to apply the red highlight and monospace font styling. The rendering approach uses a basic DOM update via JavaScript, targeting a pre element to potentially display a message, though no dynamic data binding or visualization library is employed beyond the standard React starter setup.

Aug 26, 2020
Loading thumbnail…

HTML Car Report

This example shows a simple HTML-based car report that lists three car models with their prices in a plain bulleted list. The Toyota Corola, Volvo XI, and Mazda fun are displayed with their respective prices, and the first item is highlighted in blue using a CSS class. The document relies on standard HTML markup and a linked stylesheet, `style.css`, which sets the body font size and family to 2em monospace and defines the `.highlighted` rule. No JavaScript libraries or APIs are used.

Aug 26, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create simple graphics. Circles, rectangles, lines, and paths are drawn directly in the markup, with attributes like fill, stroke, and stroke-width controlling appearance. A group with an inline fill and stroke attribute overrides those for its child elements, while a separate CSS class applies stroke styling and line-join/line-cap properties to path elements. The rendering approach is pure SVG, with layout transformations handled through the transform attribute and styles defined in an external stylesheet.

Aug 26, 2020
Loading thumbnail…

HTML Car Report

This example shows a simple HTML-based car report that lists three car models with their prices in a plain bulleted list. The Toyota Corola, Volvo XI, and Mazda fun are displayed with their respective prices, and the first item is highlighted in blue using a CSS class. The document relies on standard HTML markup and a linked stylesheet, `style.css`, which sets the body font size and family to 2em monospace and defines the `.highlighted` rule. No JavaScript libraries or APIs are used.

Aug 26, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimalist HTML page that displays the text "Hello HTML" in large, centered type. It uses raw HTML and CSS for layout and styling, with a brief inline script that logs "Hello JavaScript" to the browser’s developer console. No external libraries or frameworks are involved, relying solely on native web APIs for its simple static rendering.

Aug 26, 2020