Miguel-GC

@Miguel-GC·5 public vizzes

Scatter Plot

This scatter plot displays the ten most populous countries, with each circle representing a nation’s population on the x-axis and country name on the y-axis. The code uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart, and loads data from a CSV file via `d3.csv`. Circles are rendered as SVG elements, with axis ticks and labels styled through CSS. The x-axis uses a custom tick format that abbreviates large numbers by converting gigabytes to billions.

Nov 26, 2019

Loading thumbnail…

Let's test D3

This example renders a single red SVG circle with a radius of 200 pixels on a 960 by 500 canvas. The visualization is built using D3 v5, where the `select` and `append` methods are used to target the SVG element and add the circle, while `attr` and `style` set its visual properties. The SVG is given a red background, and the circle inherits no fill, so it appears as a hollow ring against the colored backdrop.

Nov 25, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example animates a smiley face in SVG, moving its eyebrows up and down in a repeating two-second cycle. The face is constructed using D3.js v5 to append and position geometric shapes—circles for the eyes, rectangles for the eyebrows, and a path created with the `arc()` generator for the mouth—within a central group. The animation relies on chained `transition().duration(2000)` calls on the eyebrows group to alternate its vertical transform, demonstrating fundamental DOM manipulation with D3.

Nov 25, 2019

Loading thumbnail…

Cars Report

This example displays a list of cars filtered by price, showing each car’s year, make, model, and price in a large text element. It uses asynchronous JavaScript with a Promise-based `getCars` function that delays data retrieval by two seconds, simulating a fetch. The initial message “Recuperando datos...” appears until the data resolves, then `generateReport` filters cars under $2000 and formats each line using `formatCar`. The implementation relies on ES6 modules, `JSON.parse`, and `Promise` resolution to update the DOM’s `textContent`.

Nov 25, 2019

Loading thumbnail…

Cars report

This example displays a text-based report of cars filtered by a maximum price. It shows a list of car models, their year, make, and price, generated from a hardcoded JSON array. The code uses D3.js v5, though primarily for versioning, with the core logic relying on JavaScript’s `filter`, `map`, and `join` methods. The `generateReport` function filters the data, formats each entry using `formatCar`, and displays the result in a styled HTML page with a dark background and white text.

Nov 25, 2019