shery1001

@shery1001·3 public vizzes

Fork of Aditya - React D3 Conditional Line Chart Practice

This chart visualizes risk values over time as a connected scatter plot, with each point colored green, amber, or red based on whether its value falls below 50, between 50 and 75, or above 75. Dashed reference lines mark these thresholds. The visualization uses React with D3 v6, including `scaleTime`, `scaleLinear`, `extent`, and `line` generators, rendering SVG elements with axes built from `timeFormat` tick labels. Data loads from a CSV file via `d3.csv`, and both the line path and circles display CSS drop-shadow filters.

Aug 13, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This fork of a Sol LeWitt reproduction creates an abstract composition of horizontal and vertical bands intersecting within two circular masks. The SVG rendering uses JavaScript to generate 100 horizontal rectangles and 100 vertical rectangles, with each set clipped by a separate mask. The first mask reveals the horizontal bands through a white circle on a black background, while the second mask inverts the effect, showing vertical bands through the opposite circular region. The code builds the SVG structure dynamically via `document.createElementNS`, producing a geometric interplay between the two masked line grids.

Jul 27, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a simple smiley face rendered as an SVG graphic, composed of a yellow circle with a black stroke, two black eye circles, and a curved mouth path. The visualization is built using React for component structure and D3’s `arc` generator to create the mouth’s arc shape, with fixed dimensions and coordinates. Both libraries are loaded from CDNs, and the face is drawn declaratively within a single `<svg>` element, centered on a 960×500 canvas.

May 31, 2022