ant999

@ant999·6 public vizzes

Making a barchart

A horizontal bar chart displays disease mortality rates across four time periods, using data from a CSV file. The visualization renders rectangular bars in SVG, scaled by a linear x-axis and categorical y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code employs D3 v5 functions like `scaleLinear`, `scaleBand`, and `max` to map values, while parsing and cleaning numeric data before rendering.

Apr 3, 2020

Loading thumbnail…

Making a barchart

A bar chart displays population estimates for seven North African countries in 2019, using horizontal bars ordered alphabetically by country name. The visualization is built with D3 version 5, using `scaleLinear` for the population axis and `scaleBand` for categorical country placement. Data loaded from a CSV file via `d3.csv` populates the SVG rectangles, with axes rendered through `axisLeft` and `axisBottom`. Bar lengths correspond to each country’s population value, which is multiplied by 1000 during data processing.

Apr 2, 2020

Loading thumbnail…

D3 Lets make a face

A yellow circle with black outlines forms a face, featuring two eyes and rectangular eyebrows that animate in a bouncing motion. The left eye pulses by scaling its radius via chained D3 transitions, while the entire eyebrow group shifts vertically. A mouth initially appears as a narrow arc, then expands into a filled semicircle using D3’s `arc` generator and a `transition` that updates the path’s `d` attribute. The example uses `d3.select` to manipulate SVG elements within a React framework.

Apr 1, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS and inline attributes. It shows how presentational properties like `fill`, `stroke`, and `stroke-width` can be set directly on SVG elements or inherited from a parent `<g>` group. The code uses plain React-rendered SVG without additional libraries, featuring a static composition of colored and outlined shapes. CSS resets the page margin and hides overflow, while styles are applied via an external stylesheet. The visualization highlights fundamental SVG syntax, including coordinate attributes and the `<path>` `d` command.

Mar 31, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a list of used cars with prices, highlighting the first item in red. It uses plain HTML elements like headings and lists, styled with CSS classes and a monospace font. The page links an external stylesheet and demonstrates basic document structure without any JavaScript or data libraries.

Mar 31, 2020

Loading thumbnail…

Bar Chart Mine

A bar chart displays production batch outcomes over time, with each bar’s height representing the realized value and its color indicating error status via a `d3.scaleThreshold` domain. The chart uses `d3.scaleBand` for x-axis positioning and `d3.scaleTime` for time-based ticks, with rotated labels added as SVG text. Bars are colored according to error ranges (“erro”, “aceito”, “conforme”) and annotated with operation and batch identifiers. The visualization relies on D3 v5’s `json`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering all elements as SVG within an HTML page.

Mar 31, 2020