sheepsbleat

@sheepsbleat·5 public vizzes

HTML Starter

This example presents a nearly blank HTML page with a centered body and a 13em font size, demonstrating the minimal setup for a web-based visualization. It shows an empty white canvas where no data or graphics are rendered. The code relies solely on vanilla HTML and inline CSS, with no JavaScript, external libraries, or data sources. The styling uses a CSS `text-align` property to center content, serving as a barebones starting point for building interactive visualizations.

May 5, 2020

Loading thumbnail…

Bar chart!

This bar chart displays population estimates for ten countries, using horizontal bars ordered by country name on the y-axis and population count on the x-axis. The visualization reads data from a CSV file and scales the population values by 1,000. It relies on D3 v5 APIs such as `scaleLinear`, `scaleBand`, `csv`, and `select` to render SVG rectangles, with bar widths proportional to each country’s population.

May 5, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct an animated smiley face using D3.js, with eyebrows that rotate and skew over time. It builds the face from basic SVG shapes—circles for the head and eyes, rectangles for the eyebrows, and a path for the mouth—centered via SVG transforms. The animation is driven by chained `transition()` calls on the eyebrow group, altering its transform attribute in two sequential steps. The code imports `select` and `arc` directly from the D3 library, and relies on D3 v5.

May 5, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page displaying the text "Hello HTML" centered on a white background. The page uses plain HTML and CSS, with the body element’s text-align property set to center and font-size to 13em. It relies solely on the Document Object Model and styles defined in a `<style>` tag, with no external libraries or JavaScript. This serves as a bare-bones starting point for any visualization or web project, illustrating basic structure without additional frameworks or data.

May 5, 2020

Loading thumbnail…

Bar Chart

This bar chart displays the populations of ten countries, ordered by country name, with bar length encoding population size. The visualization uses D3 v5’s `scaleLinear` to map population values to pixel widths and `scaleBand` to position bars along the y-axis. Rendered as SVG rectangles within a margin-based layout, it includes left and bottom axes generated via `axisLeft` and `axisBottom`. The code loads data from a CSV file using D3’s `csv` module and applies a steel blue fill to all bars.

May 5, 2020