adriana-ss

@adriana-ss·12 public vizzes

CSE 332 Lab 2

This interactive scatterplot visualizes demographic and health data for New York zip codes, plotting variables such as population, income, and COVID-19 hospitalization rates. Users can select different quantitative or categorical columns for the x and y axes via dropdown menus, with transitions animating circle positions over one second. The visualization is built with D3 v6, using `scaleLinear` and `scalePoint` for axes, `transition` for smooth updates, and SVG circles with opacity. Data is loaded from a local CSV file using `d3.csv`, with interactive menus implemented through a custom `menu` module.

Feb 16, 2023

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 United Nations estimates, with values scaled from thousands to millions. It highlights customized axes using D3 v5 APIs such as `scaleLinear` and `scaleBand`, while `axisBottom` and `axisLeft` generate tick marks. The chart removes default axis lines, applies tick formatting via `format('.3s')`, and renders SVG rectangles with steel-blue fills and styled text elements.

Jan 21, 2023

Loading thumbnail…

Fork of D3 Scatter Plot

This visualization uses D3 v6 to render a scatter plot of the Iris Dataset, showing the relationship between petal length and sepal length. It employs d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to display the scales. Data points are drawn as SVG circles, with margins and a full-window responsive sizing. The dataset is fetched from a GitHub Gist, and numeric fields are parsed from strings before plotting.

Jan 17, 2023

Loading thumbnail…

D3 Scatter Plot

This example shows a minimal HTML page that loads D3 v7 from a CDN and logs the library’s global object to the browser console. The page includes an empty style block and a script tag that calls `console.log(d3)`, demonstrating that the D3 API is available for use. It uses the unpkg-hosted `d3.min.js` file and serves as a bare-bones starting point for building more complex visualizations, with a link to a separate React starter template.

Jan 17, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt geometric art piece using a dynamic SVG composition of horizontal and vertical bands. It displays a grid of thin colored rectangles that form a distinct circular pattern through the use of two SVG masks, creating a visual interplay between the line orientation and the masked circle. The code builds the entire scene programmatically with the raw SVG API, generating 100 horizontal stripes and 100 vertical stripes in a loop. A circular mask reveals the horizontal lines against a fully visible background, while a second, inverse mask isolates the vertical lines within the same circle, producing the artwork’s layered effect.

Jan 12, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This reproduction of a Sol LeWitt art piece uses overlapping circles, a line, and two SVG paths to explore geometric composition. The SVG displays a red circle with a smaller green circle centered inside it, a navy diagonal line from the top-left corner, and a rectangular outline formed by a path. A second black path with no fill creates a right-angled line. The code relies on plain SVG elements such as `circle`, `line`, and `path`, with no external libraries, using fixed coordinates and stroke widths to define the artwork. A commented-out yellow rectangle indicates an iterative design process.

Jan 12, 2023

Loading thumbnail…

Pseudo horizontal bar chart

Four dark horizontal bars of varying widths sit on a white background, approximating a horizontal bar chart. The bars are ordered longest to shortest from top to bottom. Each bar is labeled with a black SVG text path, using custom geometric letterforms. The visualization is rendered as a single static SVG element with no axes, gridlines, or interactivity. It uses only basic SVG shapes and paths, with no JavaScript libraries or data-binding frameworks.

Jan 11, 2023

Loading thumbnail…

Pseudo bar chart

Four black rectangles of varying heights float on a white SVG canvas, approximating a bar chart without any axes, labels, or data encoding. The bars are positioned at irregular x-coordinates and y-coordinates, suggesting a deliberately skewed or abstract representation of categorical values. The visualization renders purely through static SVG `<rect>` elements defined directly in the HTML, with no JavaScript or external libraries driving the layout. Each rectangle uses a uniform fill color and fixed dimensions, creating a minimal, decontextualized take on standard bar chart aesthetics.

Jan 11, 2023

Loading thumbnail…

Pseudo scatter plot

A pseudo scatter plot displays seven black circles on a white background, simulating a basic scatter plot without any underlying dataset or axes. The visualization uses raw SVG elements, explicitly defining a white `<rect>` as the canvas and positioning each `<circle>` at fixed coordinates with a radius of 25. The HTML file includes inline CSS to remove page margins and hide overflow, ensuring the 960 by 500 pixel SVG renders edge-to-edge. The approach relies on hardcoded circle positions rather than a data-driven library like D3 or a layout algorithm.

Jan 11, 2023

Loading thumbnail…

Fork of SVG Playing Around and Studying

This example builds an animated SVG landscape with a bird, tree, and sun that follows a 24-hour day-night cycle. It constructs SVG elements dynamically using the DOM API’s `createElementNS` and `setAttribute` methods, and creates sky and sun gradients with animated `stop` colors. CSS keyframes (`suntrack`, `moontrack`) rotate the sun and a moon to simulate the sky’s changing illumination, while JavaScript’s `animate` elements update the sky’s hues over a 24-second loop. The scene draws on references to Sara Soueidan’s bird/tree structure and Dudley Storey’s sky design.

Jan 11, 2023

Loading thumbnail…

SVG Fundamentals - making something with shapes

This example demonstrates how a set of simple SVG line elements can be composed to create a geometric, grid-like structure. It uses the SVG API directly, with each line defined by its x and y coordinates and stroke properties to render the shape. The code shows variations of line placement and styling, though many shapes are commented out. The final output is a static, browser-rendered SVG graphic built purely from primitive line elements, with no additional libraries or external data sources involved.

Jan 11, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates a minimal HTML page that combines CSS for styling and JavaScript for interactivity to display the message "Hello HTML!" centered in the browser window. The page uses a plain `<div>` element with a CSS class that sets the font size and text alignment, while JavaScript is available for potential dynamic behavior. The visualization underscores the foundational building blocks of web-based graphics, using no external libraries and relying solely on native HTML and CSS rendering.

Jan 10, 2023