einsko (@einsko), VizHub

Fork of Reusable D3 Scatter Plot

An animated scatter plot cycles through four Iris dataset measurements, re-mapping the x-axis every two seconds to compare petal width, sepal width, petal length, and sepal length against a fixed y-axis of sepal length. Using the reusable chart pattern, it leverages `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` within a custom `scatterPlot` function called via `d3.select`. Data loads from a remote CSV with `d3.csv`, and circles update positions through `selection.join`, with SVG rendering and a `setInterval` driving the animation.

Oct 24, 2023

Loading thumbnail…

Stylized Bar Chart Fork 1

This example displays the top 10 most populous countries as horizontal bars, using a stylized bar chart with teal rectangles and a clean, minimal design. Data is loaded from the UN World Population Prospects 2019 CSV via `d3.csv` and sliced to the first 10 entries. The visualization uses React with d3 v5, leveraging `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Native SVG `<title>` elements provide tooltips, while axes are rendered as SVG groups with formatted tick labels using `d3.format`.

Oct 24, 2023

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes GDP per capita (PPP) for countries in 2020, using a quantile color scale with a YlGnBu scheme to show economic disparities, while gray fills indicate missing data. Built with D3.js, it renders world geography via `geoNaturalEarth1` and `geoPath`, fetching TopoJSON from the visionscarto-world-atlas and parsing World Bank CSV data. The map uses `scaleQuantile` for color mapping, `Promise.all` to load datasets asynchronously, and dynamically resizes to the viewport.

Oct 24, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates how to build a smiley face using D3.js and animate its eyebrows. The code constructs SVG shapes including a yellow circle for the face, black circles for the eyes, and a mouth drawn with D3's `arc` function. It then uses D3's `.transition()` and `.duration()` methods to create a two-second animation that moves the eyebrows up and down. The example specifically showcases fundamental DOM manipulation and animation capabilities within D3.js version 5.

Oct 20, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This is a data-visualization example of a smiley face, rendered as a scalable vector graphic using React and SVG. The code generates the face dynamically, calculating the center of the window and positioning two eyes and a pink circular head with a black stroke. It uses React’s declarative `svg` elements, including `circle` and `g` with a `transform` attribute, to compose the face. The rendering approach is fully responsive, adapting the face’s size and position to the browser’s window dimensions.

Oct 20, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates how to build a smiley face using D3.js and animate its eyebrows. The code constructs SVG shapes including a yellow circle for the face, black circles for the eyes, and a mouth drawn with D3's `arc` function. It then uses D3's `.transition()` and `.duration()` methods to create a two-second animation that moves the eyebrows up and down. The example specifically showcases fundamental DOM manipulation and animation capabilities within D3.js version 5.

Oct 20, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline sits centered on a white canvas, accompanied by two smaller unfilled circles positioned symmetrically within it. This static SVG composition renders a basic face prototype, using fixed coordinates for each shape. The `index.html` file embeds a 960 by 500 pixel SVG element, with circle elements defining the head and eyes, demonstrating a simple, hardcoded approach to vector graphics without any interactive or animated behavior.

Oct 20, 2023