K

Kyle?

@KyleWynnM·23 public vizzes

Loading thumbnail…

Movie Stats Scatter Plot Final Iteration

This interactive visualization lets users explore IMDB movie data through a customizable scatter plot. Users select which genres or actors to display and independently choose the X and Y axes from yearly release, runtime, rating, votes, and revenue. The plot encodes genre with color and includes hover effects that reveal movie titles. Built with D3 v7, the visualization uses the `scaleLinear` and `extent` functions for scales, `axisLeft` and `axisBottom` for labeled axes, and SVG circles for data points. The project also features a separate actor network graph, though it remains incomplete. Movie data is loaded from a local CSV file.

Loading thumbnail…

Movie Stats Scatter Plot Iteration 7

This interactive visualization lets users explore IMDB data for roughly 1,000 movies through a customizable scatter plot. Users select which genres or a specific actor to display, and choose which metrics (year, runtime, rating, metascore, votes, or revenue) appear on each axis. Hovering over a dot reveals the movie title. Built with D3 v7, it uses `d3.scaleLinear` and `d3.axisLeft`/`axisBottom` to render an SVG chart, with data loaded from a CSV file.

Loading thumbnail…

Actor Graph Attempt 2

A force-directed actor graph visualizes connections between performers who co-star in films from a movie dataset. White nodes and red labels represent actors, while white lines link co-stars. The visualization uses D3 v7’s `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the graph dynamically. An SVG canvas of 10000x10000 pixels renders the network, with node and link positions updated on each simulation tick.

Loading thumbnail…

Actor Graph

The Actor Graph is a force-directed network visualization built with D3.js, showing a small set of connected actors as labeled nodes and edges. It uses the `d3.forceSimulation` API with `forceManyBody` and `forceLink` forces to position the nodes, while `forceCenter` keeps the layout centered in the viewport. The graph is rendered as SVG elements, including circles, lines, and text labels, and is intended to be populated with data from the included `data.csv` file, which lists movies and their casts.

Loading thumbnail…

Actor Graph

This interactive visualization displays a force-directed graph of actors and the movies they appear in, where each actor is represented as a node and connections between actors who share a film are shown as links. The graph is built using D3.js v7, with the `d3.forceSimulation` API handling node positioning and link physics. Data comes from a CSV file listing movies and their cast, parsed using `d3.csvParse`, and rendered as SVG elements (circles, text labels, and lines). The visualization explores collaborative networks among actors across the included film dataset.

Loading thumbnail…

Fork of Force Directed Graph Starter

This example demonstrates a simple force-directed graph visualization using D3.js. It shows three circular nodes connected by two links, representing a small network of relationships. The layout uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position the nodes dynamically. Data is loaded from a CSV file containing movie information, though the current implementation focuses on the basic graph structure. The visualization renders using SVG elements, with circles for nodes and lines for links, updating their positions on each simulation tick.

Loading thumbnail…

Actor Graph

This interactive network visualizes the connections between software applications and IT systems, from a dataset of application names and the interfaces linking them. The force-directed graph uses circle nodes for each application and grey lines for their relationships. The visualization is constructed with d3.forceSimulation, d3.forceManyBody, d3.forceLink, d3.forceCenter, d3.forceCollide, and implements a drag interaction.

Loading thumbnail…

Movie Stats Scatter Plot Iteration 5

This interactive scatter plot visualizes movie statistics from a CSV dataset, allowing users to compare variables such as IMDB rating, revenue, runtime, and year. Users can filter points by genre through colored checkboxes, search for specific actors, and switch the x- and y-axis among six quantitative fields. Clicking a circle displays the movie’s title. The visualization uses D3 v7 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles, with SVG elements updated dynamically via `selectAll` and `join`.

Loading thumbnail…

Graph Playground

A force-directed graph shows connections between software applications, with nodes representing applications and links representing interfaces between them. The visualization uses a d3.forceSimulation with forceManyBody, forceLink, forceCenter, and forceCollide to position nodes, while SVG circles and lines render the network. Data comes from two CSV files: applications.csv defines node properties (including a colorID) and interf.csv provides source-target pairs with descriptive names. Users can drag nodes to reposition them, and the simulation updates link positions dynamically. Node labels display application IDs, though the colorID column remains unused.

Loading thumbnail…

Tree Playground

This tree diagram displays the relationships between blood types and their Rh-positive and Rh-negative subgroups. The visualization uses D3.js v6 with `d3.stratify()` to convert the flat dataset into a hierarchy and `d3.tree()` to compute node positions. Circles represent each blood group, with a color-coded generation scheme using `d3.selectAll().transition()` to animate the connections and node appearance. The SVG elements, including `path` links and `circle` nodes, are rendered with D3 data joins, and text labels identify each group.

Loading thumbnail…

Movie Stats Scatter Plot Iteration 4

This interactive scatter plot displays movie statistics from the data.csv file, allowing users to toggle genre filters via checkboxes and select which attributes (e.g., IMDB rating, Revenue, Runtime) map to the x- and y-axes through radio buttons. D3 v7 powers the scales, axes, and circle rendering, with genres color-coded and hover events showing the movie title. The implementation uses d3.scaleLinear, d3.axisBottom/axisLeft, and d3.csvParse to load data and update the visualization through a state-driven design.

Loading thumbnail…

Map Playground

This example visualizes World Bank GDP per capita data for 2020 as a choropleth map, using a natural Earth projection and a quantile color scale with the YlGnBu scheme. Missing data appears gray. The map renders country boundaries from TopoJSON fetched via `topojson.feature`, while CSV data is parsed with `csvParse` and joined to country codes using a `Map`. The visualization uses `d3.geoPath`, `geoNaturalEarth1`, and `d3.scaleQuantile` to encode values as fill colors.

Loading thumbnail…

Movie Stats Scatter Plot Iteration 3

This interactive scatter plot visualizes movie statistics, letting users explore relationships between attributes like IMDB rating, runtime, and revenue. Users can toggle checkboxes to filter movies by genre, with each genre assigned a distinct color, and can switch the x- and y-axis variables via radio buttons, which update the plot accordingly. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and data points, loading tabular data from a CSV file.

Loading thumbnail…

Movie Stats Scatter Plot Iteration 2

This scatter plot displays movie data with IMDB ratings on the x-axis and revenue on the y-axis. Users can filter the visible data points by selecting genre checkboxes, which constructs a bit string that controls each dot’s opacity via the `dotAppears` function. The visualization uses D3 v7’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csvParse` APIs to load the CSV, map coordinates, and render axes. Checkbox state is read from the DOM to determine which genres remain visible.

Loading thumbnail…

Movie Stats Scatter Plot Iteration 2

This scatter plot displays movie ratings against revenue, with each circle representing a film from a dataset of popular movies. Interactive genre checkboxes filter which points appear by toggling visibility based on a bit string that encodes selected genres. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while the `scatterPlot` module dynamically adjusts circle radius to zero for unselected genres. Data loads from a CSV file, and genres like Action and Comedy control which movies remain visible.

Loading thumbnail…

Movie Stats Scatter Plot

This interactive scatter plot maps movie runtime against rating, with each point representing a film. Genre filter checkboxes let users toggle visibility of specific categories, dynamically updating the visualization. Built with React and D3 v7, the visualization uses D3 scales and axes to position points, while a bitstring tracks the active genre filters. The plot renders from an embedded CSV dataset containing movie metadata such as year, revenue, and metascore, with the React component orchestrating state changes as users interact with the checkboxes.

Loading thumbnail…

Movie Stats Scatter Plot

This visualization plots movie ratings against box office revenue using a D3 v7 scatter plot, with data from a CSV file of film statistics. The plot displays each movie as a circle, and the interface includes checkboxes for filtering by genre, which dynamically update the visible data points using a bitstring representation. The code uses `d3.csvParse`, `d3.scaleLinear`, and `d3.extent` to handle data parsing and scaling, while the interactive filtering logic is implemented in the `dotAppears` function within `scatterPlot.js`.

Loading thumbnail…

1000 Movies on IMDB

This interactive visualization displays the first 1000 movies from IMDB, rendering the loaded CSV data as formatted JSON text in a browser. The application implements a unidirectional data flow architecture, where a central state object manages the movie data lifecycle. Initially, the visualization asynchronously fetches and parses the CSV file using the `fetch()` API and D3's `csvParse` function, converting string values to numbers. Through D3's selection and join operations, the current state is rendered to the screen, updating whenever new data arrives.

Loading thumbnail…

Patriots Marks and Channels

This example shows how different visual encodings—position, length, size, shape, and hue—can represent data, demonstrated through a series of simple marks. The main view renders a bar chart of player statistics using `d3.selectAll` and `join` to bind data arrays. It uses `schemeCategory10` for categorical colors and scales the bar width and height from paired values in the `playerStats` array. The visualization is built with D3 v7, using modular imports for each encoding type and an SVG container sized at 800 by 400 pixels.

Loading thumbnail…

Survivor Player Performance

This example demonstrates how binned aggregation can be used to analyze the relationship between a contestant's age, finish placement, and gender across multiple seasons of the show. The visualization presents a table of raw summary data, listing each player's age, finish position, and gender, plotted as a collection of preformatted text elements. The code uses D3 v7 functions like `csvParse` to load the dataset, and `select`, `join`, and `text` to render the results. It fetches the CSV file asynchronously and initially shows a loading state before displaying the aggregated summary.

Loading thumbnail…

Patriots All Time Rushers

This example displays the New England Patriots’ all-time leading rushers, listing players ranked by total rushing yards. The visualization initially renders the raw data from `data.csv` as a JSON string within a `pre` element, demonstrating a unidirectional data flow where state changes trigger a re-render via the `viz` function. It uses D3 v7’s `select` and `csvParse` to load and parse the dataset, converting numeric fields to numbers. The code shows only the loading and display stages, with no chart or graphical encoding implemented yet; the data table itself is the current output.

Loading thumbnail…

All Survivor Contestants

This example displays all Survivor contestants as a JSON preview, showing raw data loaded from a CSV file. It uses D3 v7’s `csvParse` to parse the data and update the visualization via unidirectional data flow, with `setState` triggering a re-render. The state initially loads asynchronously, displaying “LOADING” until the fetch completes, then rendering the parsed objects. The code demonstrates a simple data-loading pattern with D3’s selection and data joins, though the visual output is minimal—just a textual representation of the dataset.

Loading thumbnail…

Kyle's Mouse Follower

A circle tracks the mouse across a full-screen SVG, with its color and radius changing continuously based on the cursor's x and y coordinates. The example demonstrates a unidirectional data flow pattern: mouse events trigger a `setState` callback, which updates a centralized state object that drives the rendering. Using D3 v7's `select`, `join`, and event handling, the circle's `cx`, `cy`, `r`, and `fill` attributes are recomputed from the current state on each render. The color is derived from the coordinates in an RGB string, creating a gradient-like effect as the mouse moves.