eliarech

@eliarech·6 public vizzes

Fork of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries for 2020, using horizontal bars colored in teal against a light gray axis. A small circle follows the mouse cursor across the SVG, highlighting the viewer’s position within the visualization. The chart is built with React for component structure and D3 v5 for scales, axes, and data loading, which parses the United Nations World Population Prospects 2019 dataset via `d3.csv`. The left axis lists country names, while the bottom axis formats population values in billions using `d3.format`.

Mar 26, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Circles represent individual flowers, with hover text revealing exact x-axis values. Built with React and D3 v5, it uses `d3.csv` to load data and `d3.scaleLinear` for axes, rendering SVG marks and gridlines via `scaleLinear` and custom `AxisBottom` and `AxisLeft` components.

Mar 26, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it renders SVG circles with tooltips and custom axes using `scaleLinear` and `format`. The code includes unused D3 band scales and appended SVG elements, though the active visualization relies on the React components for axis and mark rendering. Data loading uses the `csv` function from D3, with all numeric columns parsed in a row accessor.

Mar 26, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width, with each point colored by species. A D3 ordinal color scale maps the three species to distinct hues, while an interactive color legend highlights points of a selected species by fading the others. Built with React and D3 v5, the visualization uses SVG circles for marks, with hover events on the legend triggering opacity changes and filtering of data points.

Mar 22, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG, with eyes, a mouth, and a nose positioned relative to the center of the viewport. The face is drawn using React components that generate SVG elements, with circles for the head and eyes and a path for the mouth. The code uses React and ReactDOM to manage the SVG structure and the D3 `arc` generator from the `d3` library to compute the mouth and nose path coordinates. The face’s dimensions and positions are calculated from the window size, and the rendering approach relies on JavaScript-defined constants for offsets and radii.

Mar 21, 2021

Loading thumbnail…

Smiley Face Part II

This example renders a single, static yellow smiley face as a circle centered within an SVG canvas, using black stroke for the outline. Built with React and ReactDOM, it defines a fixed-width SVG element where hardcoded values set the circle's position, radius, and fill color. The visualization demonstrates basic SVG shape rendering within a React component tree, with no interactive or animated behavior present.

Mar 21, 2021