L

lupica.matthew@gmail.com

@Lupi7000·29 public vizzes

Loading thumbnail…

NYS V3

An interactive choropleth map of New York State displays its counties, which change color and reveal a tooltip with the county name on hover. Clicking a county hides all others and shows a full-width “Return” button, though the code’s data-entry section is empty, so no additional details appear. Built with D3 v7 and topojson, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.geoBounds` to project and render GeoJSON/TopoJSON data, with SVG paths styled via CSS.

Loading thumbnail…

NYS V2

This interactive map of New York State displays county boundaries, which change color on hover and can be clicked to zoom in and isolate a selected county while hiding the others. A tooltip shows the county name, and a return button restores the full map view. Built with D3 v7 and TopoJSON, it uses `d3.geoMercator`, `d3.geoPath`, and SVG elements, with county boundaries from a TopoJSON file and district data loaded from external CSV files.

Loading thumbnail…

Untitled

This example displays a map of New York counties using an Albers USA projection with D3 v3 and TopoJSON, showing county boundaries and state borders in white. Clicking a county triggers a smooth zoom animation that centers the view on that region, highlighting it in sky blue while scaling stroke widths inversely. The visualization uses `d3.geo.albersUsa`, `d3.geo.path`, and a 750-millisecond transition with the `scale` and `translate` transforms, with data loaded from a GitHub-hosted TopoJSON file.

Loading thumbnail…

Loading Data

This example demonstrates a simple unidirectional data-flow pattern where the state is managed centrally and passed to a visualization function. The visualization renders the loaded data as a formatted JSON string inside a `<pre>` element, initially displaying a "LOADING" placeholder. Using the `csvParse` method from D3 v7, it fetches a CSV file from a GitHub gist containing NY State Assembly data, parses it, and updates the state to trigger a re-render. The code uses `select` and `join` to bind the data to the DOM, showing a clean separation between state management and rendering.

Loading thumbnail…

ONE MAP TO RULE THEM ALL!

This example visualizes a static map of New York State’s counties, rendered as green filled paths on a light background. The code loads a TopoJSON file from a GitHub Gist and converts it into GeoJSON features using the `topojson` library. It then applies the `d3.geoAlbersUsa()` projection and draws each county with `d3.geoPath`. The visualization is framed within a 900-by-600 SVG container, with the map’s shape defined by the provided data and a simple border, but it includes no interactive or clickable elements despite the page’s title.

Loading thumbnail…

Untitled

This example displays a map of New York State, rendering its geographic boundaries as steel-blue shapes on an SVG canvas. It loads GeoJSON data from a remote GitHub gist using `d3.json` and projects the coordinates with `d3.geoAlbersUsa`. The code uses `d3.geo.path()` to convert the projected features into SVG path data, appending each region as a `<path>` element within grouped `<g>` elements. The visualization relies on D3 v5 and React, with the final output showing a simple, unadorned state outline.

Loading thumbnail…

NYS-2023

This example displays a choropleth map of New York State’s counties for 2023, rendered as SVG paths. Each county is filled with a light gray and strokes in white, while hovering highlights the county in orange. The visualization uses D3’s `geoPath` for map geometry and relies on CSS for styling, with JavaScript loading the GeoJSON data from a URL. It emphasizes clear, interactive county boundaries without additional statistical encoding.

Loading thumbnail…

Untitled Document

This example presents a sports news interface styled as a dark-themed mobile app layout, built with React and CSS Grid. It includes a header with user controls, a horizontally scrollable scores bar displaying team logos and match results, and a filter bar for content categories. The main content area renders articles with full-width images, gradient overlays, and overlaid text using absolute positioning, alongside an audio item grid. The interface relies on Google Fonts (League Gothic and Spartan) for typography and custom CSS classes to manage layout and interactive states.

Loading thumbnail…

playing around

This example displays an empty SVG canvas with a whitesmoke background, intended to visualize geographic data from a New York TopoJSON file. The code attempts to load the dataset via `d3.json` and process the features using the `topojson` library, but the rendering logic is incomplete. The visualization relies on D3 v7 with the multi-selection extension and sets up a 1200 by 900 pixel space, though no actual shapes or marks are drawn in the provided code.

Loading thumbnail…

interactions

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are rendered as colored circles that appear, disappear, and change type over time. Clicking a circle logs its ID to the console, though no visible selection change occurs. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, `selection.enter()` and `exit()` with `transition().duration()` for animated updates, and SVG circles that are re-bound to data via `data(fruits, d => d.id)`. The scene cycles through adding, removing, and replacing fruits on a timed sequence.

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for D3 selections, showing how to add, remove, and update SVG circles representing a bowl of fruit. The animation uses `transition().duration()` to move fruit from the left to the right as apples are eaten or replaced with lemons, with each fruit’s color and radius determined by `scaleOrdinal` color and radius scales. The code builds on the D3.js v7 library and the `d3-selection-multi` extension, while the scene progresses through timed `setTimeout` calls that trigger rendering states.

Loading thumbnail…

Map Tutorial

This visualization presents an interactive world map using a Mercator projection, rendered as SVG paths with animated zooming capabilities. Built with D3 v7 alongside the d3-geo and topojson libraries, the map displays countries from the world-atlas 110m JSON dataset as black-filled paths with whitesmoke borders. When users click a country, the map smoothly transitions and scales to center on that region, using d3.geoPath projections and transition animations with cubic easing. Clicking the same country again resets the view to the full world map.

Loading thumbnail…

TEST AGAIN

This example displays a blank whitesmoke SVG canvas with no visible content or data. The code initializes an SVG element on the page using D3.js v7, setting its width to 900 pixels and height to 500 pixels via the `.attrs()` method from the d3-selection-multi plugin. The script logs the D3 object to the console and appends the SVG to the body element, but does not render any marks, axes, or data. It serves as a minimal starting point for building a visualization.

Loading thumbnail…

Fork this for D3 Setup

This example demonstrates a minimal D3.js setup within an HTML page, where circles, groups, and rectangles respond to interactions and data binding. It shows how to use D3 v7 selections to manipulate SVG attributes, such as toggling circle fill colors on click and generating random radii. The code uses `d3.selectAll`, `attr`, `style`, and the data join pattern with `join('rect')` to render pink rectangles from a static array. Text labels are appended to group elements, and the page relies on the d3-selection-multi plugin for the `attrs` method.

Loading thumbnail…

OnMouse Events and ToolTips

This example demonstrates interactive SVG circles that respond to mouse events with tooltips. The visualization renders three orange circles of varying sizes on a whitesmoke background, each containing a distinct message. Using D3 v7 with the d3-selection-multi extension for chained attribute calls, the code binds data to circle elements and applies radius, position, and fill properties. The SVG canvas is 1000 by 800 pixels, with tooltip functionality triggered through the message property in the dataset.

Loading thumbnail…

Fork of D3 STARTER

This visualization displays New York State county population data as a horizontal bar chart, with county names as labels and bar lengths scaled proportionally to population. Built with D3 v7 and the d3-selection-multi plugin, it loads CSV data via `d3.csv`, sorts values in descending order, and renders SVG rectangles and text elements using `join()` operations. The bars feature hover states that change color and a tooltip area that appears on mouseover, though the tooltip text contains placeholder variables rather than actual data values.

Loading thumbnail…

NYS Population

This example displays population counts for New York State counties as a series of horizontal black bars, with each bar’s width proportional to the county’s population value. The visualization uses D3.js v7 to load CSV data from a GitHub repository, parse the population strings into integers, and bind that data to SVG rectangles. The code employs `d3.csv`, `d3.select`, `attrs`, and `enter().append('rect')` to render the chart, with a simple title added via `insert("h3", "svg")`.

Loading thumbnail…

D3 STARTER

This example presents a bare-bones setup for a D3.js visualization, displaying a single, large, stylized text message. The core of the code is an HTML page that loads the D3 v7 library and a supplementary `d3-selection-multi` module via external script tags. It demonstrates the essential project structure by separating the HTML structure, an inline CSS style for the message, and a minimal JavaScript file that simply logs the D3 object to the console. The visualization itself is purely a static text element, with no data or dynamic graphics.

Loading thumbnail…

SHOW HIDE BLOCK JS

This example demonstrates a simple toggle interaction that switches between showing a red and a blue square using a button labeled “Show Red Box” or “Show Blue Box.” The code uses vanilla JavaScript event handling via an `onclick` attribute and manipulates the CSS `display` property to control visibility. It relies on the DOM API methods `getElementById` and `style.display`, with D3.js loaded for potential visualization extensions, though the core behavior is purely HTML and JavaScript.

Loading thumbnail…

Untitled

This choropleth map displays New York state’s cities and towns as red, semi-transparent polygons with black borders, rendered on a whitesmoke background using SVG. It uses `d3.json` to load TopoJSON data from a gist, converts it to GeoJSON with `topojson.feature`, and draws the map with `d3.geoPath`. The map is static, with no interactions, scales, or projections specified, and only includes a minimal styling for the county class.

Loading thumbnail…

Untitled

This example shows an interactive map of New York cities and towns that zooms into a selected region on click, highlighting the active area in sky blue while fading other boundaries. Built with D3 v3, it uses `d3.geo.albersUsa` for projection, `d3.geo.path` for rendering TopoJSON features, and a `g.transition` with scaling and translation to animate the view. State and town borders are drawn as SVG paths, with click handling on both the background and individual regions to toggle zoom.

Loading thumbnail…

Fork of NYS Map TEST TEST TEST

This interactive map displays the counties of New York State, rendered as white regions with black outlines. It uses a custom Albers equal-area conic projection applied via `geoAlbersUsa()` and `geoPath` from D3 v5, with React managing the SVG output. The geographic data originates from a JSON file fetched with `d3.json` and processed using `topojson` functions `feature` and `mesh`. On mouse hover, the code logs an event to the console.

Loading thumbnail…

Untitled

This interactive map displays the towns of New York State, rendered as SVG paths using TopoJSON data. Users can click any town to zoom in on it with a smooth transition, and clicking again returns to the full state view. The visualization uses `d3.geo.albersUsa` for the projection and `d3.geo.path` for drawing, with click handling that triggers a 750-millisecond `g.transition` to scale and translate the view. The active town is highlighted in sky blue via CSS class toggling, while county borders remain white.

Loading thumbnail…

NYS Map

This visualization displays a map of New York State’s counties, rendered as an SVG using React and D3. The code employs `d3.geoAlbersUsa` for projection, `d3.geoPath` for drawing, and TopoJSON to parse the county boundaries from a remote gist. County outlines are shown in white with black strokes, while interstate borders are hidden with no stroke. The map is static and loads asynchronously via `d3.json`, displaying a loading message until the data is ready.

Loading thumbnail…

Untitled

This choropleth map displays U.S. county-level education data, with each county drawn as a filled path whose color would encode the associated metric. The visualization loads county boundaries from a TopoJSON file and joins them with a separate JSON dataset containing education statistics. Using d3.geoPath, the code renders the geographic features into an SVG canvas, while d3.json is used to fetch both data sources sequentially, ensuring the map draws only after all data arrives.

Loading thumbnail…

NHL Hit Counter

This example is an interactive tally board for tracking hits during an NHL hockey game. Users enter a player's name in a text input, click a large HIT button to increment that player's hit count, and press New Entry to log the next player or Next Period to advance through the three periods. The interface displays player names and their hit totals per period in a CSS grid, with a final total column. The implementation relies on vanilla JavaScript DOM manipulation via `getElementById` and `innerHTML`, with styling handled through custom CSS grid layouts and the Roboto Condensed font.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors using JavaScript’s fetch API and D3’s `d3.csvParse` function. The data is fetched from a GitHub Gist URL, and the parsed result is output to the browser console. The code also includes a redundant second fetch that logs the raw text response, illustrating the two-step process of obtaining and converting tabular data. The visualization is minimal, with no graphical output, focusing purely on data acquisition and parsing.

Loading thumbnail…

Mouse Follower

A circle tracks the mouse cursor across an SVG canvas, updating its position in real time as the user moves the pointer. The visualization demonstrates a simple interactive pattern where user input directly drives an element's location. Built with React, it uses `useState` to store the mouse coordinates and `useCallback` to attach a `mousemove` event handler to the SVG element. The circle's `cx` and `cy` attributes are bound to the state, causing the shape to follow the cursor.

Loading thumbnail…

Smiley Face Part I

A grid of six-by-three smiley faces renders as SVG via React, with each face randomly varying eye radius, mouth radius, and mouth width. The face is built from composable components: a yellow background circle, two eye circles, and a d3.arc-generated mouth path. The d3 range function creates the 18 faces, while the FaceContainer translates each face’s coordinate system to its center.