Mario Morales Barquero

@shishiokun·7 public vizzes

Lab 05

This example shows a bar chart of global video game sales by genre, using data from a CSV file. D3 version 6 loads the data with `d3.csv`, maps it with `scaleBand` and `scaleLinear`, and renders SVG rectangles with axes via `d3.axisLeft` and `d3.axisBottom`. Bars animate color changes on hover using `selection.on` and `transition.attr`, shifting from steelblue to orange and back.

May 25, 2021

Loading thumbnail…

Untitled

A circular bar chart, or polar chart, displays the heights of six products (A through F) as radiating bars of varying lengths. The bars are arranged in a full circle, with the product name and its corresponding height value printed as text labels beside each bar. The chart uses aD3.js version 4 to load the JSON data and render the visualization, while the underlying code appears to reference an R ggplot example and includes empty placeholder bars to create space for the labels.

May 12, 2021

Loading thumbnail…

Ejercicio 2 LAB04 Mario

This bar chart displays the population values of the top 10 most populous countries, based on 2018 UN estimates loaded from a CSV file. The visualization sorts the data by value and uses a band scale for the x-axis and a linear scale for the y-axis, with bars rendered as SVG rectangles. The code employs d3.v4’s `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and axis components, while styling is applied via CSS for tick marks and text.

May 12, 2021

Loading thumbnail…

Untitled

This example visualizes the relative heights of six products as a horizontal bar chart, with each bar’s length encoding the numeric value from `data.json`. The visualization uses D3’s `select` to manage the DOM, while `d3.json` loads the dataset asynchronously and logs it to the console. Black, thick lines with rounded joins and caps are styled via the `.lines` class, and hovering or selection can trigger a blue highlight effect, though the interactive behavior is not fully implemented in the shown code.

May 12, 2021

Loading thumbnail…

Ejercicio 1 LAB04 Mario

This example uses D3 v4 to draw a simple cartoon face from static SVG shapes. A yellow circle serves as the head, with two ellipses for eyes and a thin rectangle for the mouth, all positioned relative to the SVG’s 500x400 dimensions. The code directly appends elements using `select` and `attr`, setting coordinates and styling properties such as fill and stroke. The accompanying `data.json` file is present but is not loaded or referenced in the visualization, and no axes or scales are used.

May 11, 2021

Loading thumbnail…

Ejercicios de prueba

This example displays a static SVG containing circles, rectangles, lines, and a path, arranged to illustrate basic D3.js rendering. It loads product data from a JSON file using `d3.json`, logs the array to the console, and includes instructions for converting height values to numbers and creating bar rectangles via a data join. The SVG is pre-populated with fixed shapes, and a separate `bundle.js` contains the data-loading code. The visualization demonstrates simple SVG elements with custom styling from `styles.css`, highlighting D3’s ability to manage external data alongside hand-coded graphics.

May 6, 2021

Loading thumbnail…

Customizing Axes

This example demonstrates how to customize chart axes in D3 v5, transforming a horizontal bar chart of product heights into a clean, readable visualization. The code loads data from a CSV file, scales the height values, and uses `scaleLinear` and `scaleBand` for the x and y axes. It customizes the bottom axis with `axisBottom` and a custom tick formatter that abbreviates large numbers, while removing the left axis lines and labels. The chart renders as SVG with styled text and grid lines.

May 6, 2021