poyomon

@poyomon·7 public vizzes

Untitled

This example shows a force-directed network graph driven by D3’s `d3.forceSimulation` API. Nodes and links are rendered as SVG paths inside a `<g>` element, scaled to 55% and centered on a 960×500 canvas. The layout emerges from simulated physical forces, with nodes repelling and links attracting. The code uses `d3.select` to append the SVG and relies on `bundle.js` for the main logic, all rendered in D3 v5.

Sep 29, 2018

Loading thumbnail…

Principales causas de muerte - Perú 2011

This bar chart displays the leading causes of death in Peru for 2011, ranking respiratory infections, heart diseases, and cancers by absolute number of cases. The visualization uses D3 v5 (d3.csv, scaleLinear, scaleBand, axisLeft, axisBottom) to map causes to horizontal bars, with a left margin accommodating lengthy category labels. Data comes from the Ministry of Health’s statistical table (CUADRO 04.09), encoded as a CSV file. Rendered as SVG, each rectangle’s width proportional to the death count, with axes labeled for clarity.

Sep 25, 2018

Loading thumbnail…

Making a bar Chart

This bar chart displays the population of the top 10 most populous countries, with the United Nations population data loaded from a CSV file. The chart uses D3 v5's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering rectangles in an SVG. Axes are added with `axisLeft` and `axisBottom`, while the population values are multiplied by 1,000 upon data parsing. The visualization employs a fixed margin layout and steelblue bars.

Sep 24, 2018

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple animated face built entirely with D3.js primitives. It shows a yellow circle head with two eyes, eyebrows, and an arc-shaped mouth, all composed of SVG shapes including circles, rectangles, and a path. A continuous two-second transition repeatedly moves the eyebrows up and down, creating a subtle animation. The code uses D3's `select` to target the SVG root, `append` to build the geometric elements, and the `arc()` generator to construct the mouth’s path, with all rendering in SVG.

Sep 19, 2018

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS and inline attributes. The visualization shows multiple shape configurations, including a group with blue fill and black stroke, and a separate group emphasizing line styling with red paths and round joins. The code relies on raw SVG elements within an HTML document, using the `<svg>`, `<g>`, `<circle>`, `<rect>`, `<line>`, and `<path>` tags, alongside a linked stylesheet for global styling and transforms. No external libraries are used; rendering is purely based on SVG markup.

Sep 19, 2018

Loading thumbnail…

HTML Cars Report

The HTML Cars Report presents a simple inventory list of three vehicles with their model years and prices. It shows the data as a plain bulleted list where one item is visually emphasized in red. The example uses raw HTML for structure and a linked external CSS stylesheet for styling, setting a large monospace font for the entire body and applying a red color class to highlight one listing. The rendering is static, with no JavaScript or data-processing libraries involved.

Sep 19, 2018

Loading thumbnail…

Untitled

This example demonstrates an asynchronous data-loading pattern where a loading message is displayed until car data arrives from a simulated API call. It uses `getCars()`, which returns a Promise that resolves after a 2-second delay with a hardcoded JSON array of car objects. The `generateReport` function filters cars by price and formats each into a readable string, then displays the result in an HTML element. The visualization relies on native JavaScript Promises, `JSON.parse`, and DOM manipulation via `document.getElementById`, with no D3 or other visualization libraries used.

Sep 19, 2018