Skip to main content
Log in
M

mtan8

@mtan8·5 public vizzes

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This line chart displays one week of temperature data from cities worldwide, sourced from the Data Canvas - Sense Your City project. Using d3.csv to load data and d3.nest to group by city, the visualization renders multiple temperature trends over time with d3.line, applying a curved basis interpolation. The chart includes custom axes with d3.axisLeft and d3.axisBottom, a categorical color scale using d3.scaleOrdinal with schemeCategory10, and a legend generated from a separate colorLegend function. The SVG output features semi-transparent lines with mix-blend-mode for overlapping clarity.

Sep 24, 2021
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a static, colorful graphic. It uses raw SVG elements such as circles, rectangles, lines, and paths, along with inline attributes like `fill` and `stroke`. The code employs CSS classes to define stroke properties for line and path elements, and groups shapes with the `transform` attribute to scale and translate them. The rendering is entirely SVG-based, with no external data source, showing basic shape composition and styling in a web page.

Aug 4, 2021
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a static, colorful graphic. It uses raw SVG elements such as circles, rectangles, lines, and paths, along with inline attributes like `fill` and `stroke`. The code employs CSS classes to define stroke properties for line and path elements, and groups shapes with the `transform` attribute to scale and translate them. The rendering is entirely SVG-based, with no external data source, showing basic shape composition and styling in a web page.

Aug 4, 2021
Loading thumbnail…

HTML Starter

This example displays a simple report of used cars, listing each vehicle with its model year and price. It demonstrates the fundamental structure of an HTML page, where the browser renders the document using CSS for styling and JavaScript for interactivity. The code uses standard HTML elements like `<h1>`, `<ul>`, and `<li>`, and a linked `styles.css` file applies the monospace font and highlights one list item in red. The page’s content is static, presenting the car data as a straightforward bulleted list.

Aug 4, 2021
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that combines CSS styling and JavaScript. It renders the text "Hello HTML" in large, centered type and logs "Hello JavaScript!" to the browser’s console. The code uses a plain `<style>` block for layout and a `<script>` element for the console output. It serves as a basic template for adding interactivity and styling without external libraries.

Aug 4, 2021