pablocenfo

@pablocenfo·7 public vizzes

Trabajo Final Covid19

This bar chart displays confirmed COVID-19 case counts for ten countries, with the United States leading at over one million cases. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map case numbers to horizontal bars and country names to vertical positions, rendering as SVG. Axes are generated with `axisBottom` and `axisLeft`, with tick formatting via `format('.3s')`. Data is loaded from a CSV file, and styling is applied through external CSS, including green-filled rectangles and custom title labels.

May 4, 2020

Loading thumbnail…

Ejercicio 2 Products2

This bar chart displays product heights for six products, with each bar’s length proportional to its height value. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for tick marks. Data is loaded from a CSV file, and the chart includes axis labels and a title, with tick lines and labels styled via CSS.

May 4, 2020

Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a population dataset for the ten most populous countries in 2018, sourced from the United Nations World Population Prospects. It shows the total row count, column count, and file size in kilobytes, followed by the first ten rows of the data formatted as JSON. The page uses d3.csv to load the external data.csv file, d3.csvFormat to compute the data size, and d3.select to append <pre> elements displaying the results on a black background with green terminal-style text.

May 4, 2020

Loading thumbnail…

Products

This example shows the raw contents of a JSON file containing product data by logging it to the browser’s developer console. The visualization relies on the D3.js library’s `d3.json` method to asynchronously fetch the file from a local Windows file path and pass the parsed result to a callback function. The page itself displays no visual elements; instead, the code outputs the data structure directly to the console using `console.log`. The HTML document contains a placeholder `div` element, while the actual import function is present but commented out in the script tag.

May 4, 2020

Loading thumbnail…

Products

This example visualizes a collection of products as a force-directed network of nodes. The visualization uses the D3.js library (v5) to create an interactive graph, though the JavaScript file currently contains only a placeholder expression, and the styling is defined in an external stylesheet. The output is rendered in an HTML page that loads the D3 library from a CDN. The data structure and force simulation parameters are not defined in the provided files.

May 4, 2020

Loading thumbnail…

Ejercicio 1.1 Formas y colores con SVG and CSS

This example shows a collection of simple geometric shapes—an ellipse, a rectangle, and a vertical line—positioned within an SVG canvas. The shapes are grouped and scaled using the `transform` attribute, with the line receiving a red stroke color via inline CSS. The rendering relies on raw SVG elements and CSS styling, with the `.lines` class defined in an external stylesheet, though the displayed elements primarily use inline presentation attributes. The code uses standard SVG APIs (`ellipse`, `rect`, `line`) and CSS for styling, with no external libraries.

May 4, 2020

Loading thumbnail…

Ejercicio 1.2 Let’s draw a face in with D3.js!

This example draws a simple cartoon face in an SVG canvas using D3.js v5. It shows a yellow circle for the head, two black ellipses for eyes, and a black rectangle for the mouth. The code uses D3 selections and the `.attr()` method to position these shapes, calculating coordinates from the SVG’s width and height attributes. The face is centered, with eye spacing and offsets hardcoded for a symmetric layout. No data is loaded; all elements are created programmatically. Styles are applied via CSS for stroke properties.

May 4, 2020