lili463e

@lili463e·12 public vizzes

InfoVis - Assignment 2

This parallel coordinates chart visualizes the performance of FC Barcelona players across a vast array of match statistics, with each polyline representing a single player's season. The visualization includes a brush tool for filtering data on specific axes, and double-clicking an axis label re-colors all lines based on that metric. Built with D3.js v7, the SVG chart animates line paths and uses `d3.brushY`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.interpolateSpectral` to handle interactive brushing, axis scaling, and color encoding.

Aug 15, 2023

Loading thumbnail…

InfoVis - Assignment 4

This example shows a bar chart of energy source production in billion kWh for the year 2022, using data from a local CSV file. The visualization highlights the magnitude of each energy type, with data labels displayed above each bar. Built with Chart.js, the chart uses the canvas rendering API, with custom plugins handling the top labels. The page also includes responsive CSS media queries that adjust the chart’s dimensions and label rotation across different screen widths. The code fetches the CSV, parses it, and maps the seventh column to the chart’s dataset.

Jul 10, 2023

Loading thumbnail…

Sol LeWitt Reproduction D3

This visualization reproduces a Sol LeWitt-inspired parallel coordinates plot, displaying football player data across numerous attributes. Each line represents a player, colored by their first attribute value, and users can brush along any axis to filter the dataset. The implementation uses D3 v6 APIs including `d3.scalePoint`, `d3.scaleLinear`, `d3.brushY`, `d3.drag`, and `d3.line`, with data loaded from a local JSON file and rendered as SVG.

May 22, 2023

Loading thumbnail…

Responsive Matrix Cells

This interactive visualization employs an adjacency matrix to explore football player statistics from a soccer dataset, with matrix rows and columns that can be sorted by structure, attributes, similarity, or name. Users can click on matrix cells to open responsive overlays—bar charts, parallel coordinate plots, or node-link diagrams—that visualize selected node and edge attributes via React and Canvas. The viewport and matrix support smooth spring-based animations for layout transitions, while similarity calculations and color scale selection adjust visual encodings dynamically.

May 20, 2023

Loading thumbnail…

InfoVis - Assignment 2

This example shows a parallel coordinates plot of FC Barcelona player statistics from a football.json dataset, with each player represented as a polyline connecting their values across multiple performance attributes such as goals, assists, and pass accuracy. The visualization uses D3 v7 with a custom SVG implementation rather than the d3-parallel-coordinates library loaded in the HTML, manually constructing axis scales with d3.scaleLinear and d3.scalePoint, and rendering polylines via d3.line. Red strokes and small circles mark each player’s trajectory across the axes.

May 20, 2023

Loading thumbnail…

Fork of JavaScript Arrays

This example shows a full-screen HTML page that renders the text “Hello HTML!” in large, centered type. It uses plain CSS for the 13-em font size and text alignment, with no JavaScript logic or data processing. The page demonstrates a minimal setup for styling static content, leveraging inline `<style>` rules within an `index.html` file. It serves as a low-level foundation for exploring React integration, as referenced by a link to a VizHub starter template. The visualization is purely static, with no interactive or animated elements.

May 17, 2023

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt art piece using two sets of horizontal and vertical SVG rectangles layered with circular masks. The first mask confines a series of 100 horizontal strips to a central circle, while a second inverted mask exposes vertical strips only outside that same circle. The code builds the SVG dynamically with `document.createElementNS`, setting each rectangle’s dimensions and applying the masks via URL references. The result is a geometric composition of alternating line directions, with no external data source—pure algorithmic drawing in the browser.

May 15, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt minimalist composition using vertically oriented black rectangles arranged in a regular grid across the full browser window. The piece shows an algorithmic interpretation of the artist’s geometric style, with each rectangle consistently spaced and sized. The code uses raw JavaScript and the SVG DOM API, creating elements via `document.createElementNS` and appending them to an SVG canvas. It generates 100 rectangles, each positioned at increasing x-coordinates and spanning the full viewport height, with no external libraries or data sources involved.

May 15, 2023

Loading thumbnail…

Pseudo Horizontal Bar Chart

This visualization uses black rectangles of varying widths to create a pseudo horizontal bar chart for categories A through D. The SVG markup defines the bar dimensions and positions, while text elements label each bar with its corresponding letter. The chart employs a minimal design with white background and the Share Tech font, rendering all elements directly via inline SVG without additional JavaScript libraries or data loading mechanisms.

May 15, 2023

Loading thumbnail…

Pseudo Bar Chart

Four unlabeled rectangles of varying heights approximate a bar chart, with no axes, tick marks, or data labels. The SVG markup uses static `rect` elements with fixed `x`, `y`, `width`, and `height` attributes positioned across a 960 by 500 canvas. The rendering relies solely on raw SVG shapes without any JavaScript or visualization library, presenting a minimal, hand-coded stand-in for a conventional bar chart.

May 15, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

An SVG portrait of a person titled "Curran: The SVG Wizard!" is rendered as a blue vector path with a black outline. The path data was created by tracing a photograph in GIMP, manually fixing it, then exporting it as SVG. The image scales on hover using CSS transitions and transform properties, with a mouseover effect that enlarges it to four times its original size.

May 14, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes as a static composition, showing circles, a rectangle, a line, and a path with varied fill and stroke attributes. It uses raw SVG markup embedded directly in an HTML page, with a viewport of 960 by 500 pixels. The code intentionally includes commented-out sections and minor syntax errors, such as a broken `y1` attribute and an unterminated path, to illustrate common mistakes. The composition uses explicit coordinates and named colors, serving as a bare-bones primer on the SVG API without any JavaScript or external library.

May 14, 2023