neffer77

@neffer77·6 public vizzes

ICE-6 Scatter Plot

This scatter plot visualizes total emissions per country from 2000 to 2001, using a global dataset loaded via `d3.csv`. Each circle represents a country, with positions set by `d3.scaleLinear` for both axes, and colors assigned by a country-specific marker function. The visualization is rendered as an SVG appended directly to the body, with axes created using `d3.axisLeft` and `d3.axisBottom`. The chart highlights trends in emissions for select nations, with most points clustered near the origin.

Mar 10, 2023

Loading thumbnail…

ICE6 - Bar Chart

This interactive bar chart compares direct N₂O emissions in 2020 across several countries, including China, India, the United States, and Germany. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` to map countries to horizontal bars. The visualization renders as SVG elements, with red grid lines and axis labels generated from the scales’ tick values.

Mar 10, 2023

Loading thumbnail…

ICE5

A React and D3 v6 visualization renders an SVG image of a map with a red overlay, sourced from an embedded PNG data URI. The `VizContainer` component abstracts SVG and group elements following the margin convention, displaying margins via a `showMargins` prop. The code sets up a fixed 960x500 canvas with 30-pixel margins, using `ReactDOM.render` to mount the App component.

Mar 10, 2023

Loading thumbnail…

ICE6 - Scatter Plot

This example demonstrates a blank scatter plot scaffold using React and D3 v6, with a VizContainer component that abstracts SVG and group elements following the margin convention. The code loads a CSV file of total emissions per country from a GitHub repository using d3.csv, then displays metadata about the dataset—size in kilobytes, row count, and column count—in a red <pre> element. The visualization itself remains empty, focusing on the boilerplate structure and data-loading feedback rather than rendering points.

Mar 10, 2023

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from basic SVG shapes. The face consists of a blue circle, two eyes, rectangular eyebrows, and a curved mouth created using the `d3.arc` function. Animated eyebrow movements are achieved through chained `transition().duration().attr()` calls on SVG groups, while the mouth rotates 180 degrees using a similar transition. The code uses the `d3.select` API to access the SVG canvas and relies on version 5.9.2 of the library.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A colorful, overlapping Buddha image rendered with hundreds of semi-transparent red circles, each filled with a repeating star-like polygon pattern, layered over a black background. The circles are positioned randomly using Math.random within a React component that generates a static SVG. The Buddha’s silhouette is drawn from a large inline SVG path, scaled and translated to overlay the scattered circles. The example uses React and ReactDOM to render the SVG elements directly in the browser.

Feb 24, 2023