Zololen

@Zololen·5 public vizzes

PRUEBA2

This example displays real estate property data from the CORGIS dataset, showing details such as building status, location, and accessibility features. The visualization uses D3 v7 to load the CSV data with `d3.csv` and renders an SVG bar chart with a width of 800 pixels. A tooltip and overlay are prepared for user interaction, though the chart’s main encoding is not fully implemented in the provided code. The page framework is built with Vue and styled via custom CSS, presenting the data within a responsive layout.

Jul 3, 2022

Loading thumbnail…

Example Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3 v5. It fetches a real estate dataset from the Corgis educational repository and displays summary statistics—file size in kilobytes, row count, and column count—in large text. The code uses `d3.csv` to asynchronously fetch and parse the CSV, then `d3.csvFormat` to measure the raw data size. The parsed data is accessed via `data.length` and `data.columns`, with the resulting summary rendered into a `pre` element.

Jul 3, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in large text. The code uses D3 v5’s `d3.csv` method with a Promise to fetch the data, then measures it using `d3.csvFormat`. Alternatively, the commented-out code shows the same task using the Fetch API with async/await and `d3.csvParse`. The data source is a GitHub Gist containing CSS named colors.

Jul 3, 2022

Loading thumbnail…

SVG Animations using CSS transitions

A static red rectangle on an SVG canvas transitions its fill color and stroke width when hovered, using CSS transitions. The code defines a rect element with an initial red fill and black stroke, and a CSS rule targeting rect:hover to turn it green and expand the stroke. The transition property, set to all 1500ms, animates these changes smoothly over 1.5 seconds using vanilla HTML, CSS, and JavaScript.

Jul 3, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and a path—arranged on a 960 by 500 canvas, showing varied fill colors, stroke styles, and transparency defaults. The blue-outlined rectangle frames the drawing area, while a yellow rectangle with a thick navy border and a diagonal line illustrate coordinate-based positioning. It uses raw SVG markup within an HTML page, styled and laid out without any JavaScript libraries or frameworks. The code directly declares elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes controlling geometry, color, and stroke. This serves as a minimal, self-contained reference for SVG rendering in the browser.

Jul 3, 2022