SciutoAlex

@SciutoAlex·11 public vizzes

fresh block

This example demonstrates a minimal setup for using the d3-annotation library with D3 v4. The page loads the D3 library and the custom annotation module, then logs the `d3.annotation` object to the browser console. The code defines a full-viewport body and includes an empty script that calls `console.log(d3.annotation)`, verifying that the annotation API is available and ready for use in further visualization projects.

Mar 4, 2017

Loading thumbnail…

Gist b6c4be8ae9172f3c3eb4a599c8dc8756

This example demonstrates a proof-of-concept integration of D3.js and p5.js, allowing custom p5 drawing functions to render D3 data joins on a canvas. It shows three colored rectangles whose dimensions and attributes (such as radius and spikes) are controlled by an array of color and width data. The code registers a custom `p5renderedElement` via `d3.registerP5Element`, then uses `d3.selectAll` and `.data()` to bind the dataset, with `.attr()` calls updating properties. A `draw()` function invokes `.render()` to execute the p5-based `elementDefinition`, while `mousePressed()` modifies attributes without immediate rendering.

Dec 8, 2016

Loading thumbnail…

location-importance

This visualization displays the relative length and ranking of terms and conditions statements from Northern Tool & Equipment, with each row representing a document. The bars show the rank of each statement against the normalized position of its first word within the full text. Built with D3.js, the code uses `d3.nest()` to group statements by document, calculates word positions with custom JavaScript, and renders small multiple charts using SVG `rect` elements, scaled with `d3.scale.linear()`. Data comes from the CSV file `TnCStatements_rank_update2.csv`.

Jun 23, 2016

Loading thumbnail…

location-importance

This visualization shows the relative importance of each statement in a Terms and Conditions document by plotting them as vertical bars along a horizontal axis. Each bar’s height and vertical position encode the statement’s rank, while the horizontal position corresponds to the statement’s location within the text. The data is sourced from a CSV file containing ranked statements. Built with D3.js, the code uses `d3.nest()` to group data by company, `d3.scale.linear()` for axes, and `d3.svg.line()` for the line generator, rendering the output as an SVG.

Jun 23, 2016

Loading thumbnail…

Archive Gmail Regularly

This example shows a Gmail workflow for automatically archiving inbox messages based on age and category. Two Google Apps Script functions manage the process: `archiveInbox()` searches for threads older than two days that are not starred, while `batchArchiveCategories()` iterates through "social," "promotions," and "updates" tabs, moving threads older than one day in batches of 100. The script uses GmailApp’s `search()` and `moveThreadsToArchive()` methods, and a `runAll()` trigger schedules both routines regularly.

Oct 27, 2014

Loading thumbnail…

Dynamically adding geographic elements to a map

This example demonstrates how users can dynamically add geographic elements to a map by creating and projecting GeoJSON objects at runtime. The visualization displays a world map built from TopoJSON country and continent data, rendered as SVG paths using D3 v3’s `d3.geo.path` with a Ginzburg6 projection. As the mouse moves, a line is redrawn from a fixed starting point to the cursor’s current geographic coordinates, and clicking permanently appends new line segments to the map, allowing users to build a custom path interactively.

Aug 23, 2014

Loading thumbnail…

Gist a3b2b71ef1d5540adc57

This example presents an interactive visualization built with the D3.js library. It uses the `d3.forceSimulation` API to compute physics-based layouts for nodes, while `d3.geoPath` renders geographic map projections. The code loads external JavaScript libraries and stylesheets via the `index.html` file, and the data is processed through custom scripts. The visualization integrates force-directed graphs with map projections to display relational data across a spatial context.

Jun 14, 2014

Loading thumbnail…

Data-driven journalism web scraping

This example shows a web-scraping pipeline that extracts a list of FIFA-registered soccer agents from the FIFA website and saves the data to a CSV file. It displays the process of collecting agent details such as name, company, address, email, and phone numbers for each country. The code uses the `requests` library to fetch HTML pages and `lxml` with XPath queries to parse the table structure. The scraped data is written via the standard `csv` module, producing a structured dataset for further analysis or visualization.

Jun 1, 2014

Loading thumbnail…

Add this page to any folder, and it'll pull the latest modified image and add it as a CSS background image. Great for quickly previewing web designs. Also great for sharing designs that clients can see right in the browser. Automatically centers the image, but you could tweak the CSS for align-left or align-right webpages.

This example displays the most recently modified image file in a folder, centered as a full-width CSS background image in a browser. It automatically scales the viewport based on the image’s dimensions and overlays a red header bar. Built with PHP, it scans the directory using the `dir()` function, checks each file with `getimagesize()` and `filectime()`, and embeds the selected image URL directly into the inline CSS, pulling the HTML structure from the surrounding page.

Oct 8, 2013

Loading thumbnail…

Data Visualization experiment showing profits and employment over time. US Data.

This data visualization experiment compares profits (earnings) and employment changes over time across several US industries, including Domestic, Manufacturing, Financial/Insurance, and Retail Trade. It uses animated bar charts rendered with SVG, where each bar’s height represents earnings and its color reflects the relative change in employment (green for growth, red for decline). The code leverages the D3.js v3 library, including `d3.time.scale` for the x-axis, `d3.scale.linear` for scaling values, and `d3.svg.axis` for rendering axes, with data loaded from an external JSON file.

Sep 10, 2013

Loading thumbnail…

Gist 6481531

This piece uses the Processing-based `linepoints`, `midpoint`, `findIntersection`, `findEquidistance`, and `point` functions to construct a geometric line drawing. It calculates a series of nested midpoints and intersection points between diagonals and side midpoints, then draws the resulting connecting lines on a canvas with dimensions `width` and `height`. The work is a generative study derived from Sol LeWitt's conceptual instructions, focusing on precise relationships between points and lines to create a minimal, grid-like composition.

Sep 8, 2013