Ichi Rarámuri

@guergana·9 public vizzes

D3 Vanilla Js - Bar Chart

This example shows a horizontal bar chart of country populations using a vanilla D3 v5 setup with SVG rendering. It maps population values to bar widths via `scaleLinear`, country names to vertical positions via `scaleBand`, and renders axes with `axisLeft` and `axisBottom`. Data is loaded from a CSV file and parsed in `index.js`, with bars drawn as SVG `<rect>` elements. The code imports specific D3 modules (`select`, `csv`, `scaleLinear`, `max`, `scaleBand`, `axisLeft`, `axisBottom`) and applies a margin-based layout.

Mar 15, 2020

Loading thumbnail…

Abortion stats in Mexico 2016 - 2019 per state

This bar chart shows the number of legal abortions performed in each Mexican state from 2016 to 2019, with states sorted vertically by count and bar lengths proportional to values. The visualization uses D3 v5’s `csv` loader to parse the data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft`/`axisBottom` to render the axes. Data originates from Datos abiertos de la Ciudad de México, with quantities formatted as numbers after stripping commas. The SVG rendering uses appended `rect` elements with heights based on the band scale’s bandwidth.

Mar 13, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” in large, centered type. The page is styled entirely through inline CSS within the `<style>` tag, setting the body’s text alignment and a 13em font size. It uses no external libraries or JavaScript APIs, relying solely on basic HTML markup and CSS for rendering. The example serves as a bare-bones starting point for static content, with no data sources or interactive elements.

Mar 13, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a simple composition. The visualization shows circles and rectangles positioned at different coordinates, with some shapes colored via inline `fill` attributes and others inheriting styles from a parent `<g>` element’s `fill` and `stroke` properties. The `.lines` CSS class defines stroke properties for a line and path, while a more specific rule targets the path to override its stroke color and line joins. The rendering relies on raw SVG elements, CSS rules in a linked `styles.css`, and a scale transform applied to the root group.

Mar 13, 2020

Loading thumbnail…

Smiley Face V - React Components in Different Files

A React visualization renders a yellow smiley face as an SVG, with the background circle, eyes, and mouth split into separate component files. The `BackgroundCircle` component draws a yellow circle with a black stroke, while `Eyes` uses two circle elements positioned with offset coordinates. The `Mouth` component employs a D3 `d3.arc()` generator to create a curved path. The main `App` component imports these modules, centers a `<g>` group via transform, and passes numeric props for dimensions like radius, stroke width, and eye spacing, using ReactDOM to mount the result.

Feb 24, 2020

Loading thumbnail…

Smiley Face IV - React Components

This example shows a yellow smiley face drawn with React components and SVG, using D3’s `arc` generator to create the mouth path. The face is composed of a background circle, two eye circles, and a mouth, all positioned within a centered `<g>` transform. The code imports `React` and `ReactDOM` directly, and initializes the arc with `d3.arc()` to define the mouth’s inner and outer radii and angular range. Rendering happens through `ReactDOM.render`, while D3 v5 handles the geometric calculations for the arc shape.

Jan 25, 2020

Loading thumbnail…

Tweak Face III

A yellow smiley face is drawn as a large circle with black stroke, two black eyes, and an arc-shaped mouth, with two white rectangular teeth added below the mouth’s center. Built with React and D3, the visualization uses D3’s `arc` to define the mouth’s path and SVG elements for the face, eyes, and teeth. The code constructs the composition declaratively, positioning shapes relative to the canvas center and using fixed offsets for features.

Jan 24, 2020

Loading thumbnail…

Smiley Face III

A smiley face rendered as an SVG graphic, composed of a yellow circle, two dark eye circles, and a curved mouth arc. The face is centered on a 960-by-500 canvas using React components, with D3’s `arc` generator creating the mouth path. Rendering relies on React 16.12 and d3 v5, with all shapes drawn in SVG and positioned via a `translate` transform. Styling includes a black stroke on the head and fixed offsets for the eyes.

Jan 23, 2020

Loading thumbnail…

Exercise 1

A simple SVG drawing shows a yellow circle with a black outline, accompanied by two smaller black circles positioned as eyes. The graphic represents the start of a smiley face, though a mouth is not yet included. The code uses plain SVG elements—`<circle>`—within an HTML page, rendered directly in the browser. The canvas is 960 by 500 pixels, with the main circle centered and the eyes placed symmetrically. This exercise demonstrates basic SVG shape creation and styling through inline attributes like `fill`, `stroke`, and `stroke-width`.

Jan 16, 2020