F

floresh

@floresh·51 public vizzes

Loading thumbnail…

Fork of React Starter

This example shows a time-series histogram of earthquake dates, with monthly bins displayed as bars whose heights represent the number of earthquakes per month. The visualization uses D3’s `d3.histogram`, `d3.scaleTime`, and `d3.axisBottom`/`d3.axisLeft` to aggregate and render the data, which is loaded from an external CSV file. The SVG output is appended directly to the body, while React is imported but not used for rendering, leaving the initial starter code commented out.

Loading thumbnail…

Calendar Visualization

This calendar visualization displays two-dimensional data as a color-coded heatmap over daily dates from March to July 2020, with each day’s count encoded by cell fill intensity. The SVG rendering uses D3 v5 to bind the JSON data array, while moment.js parses the date strings for positioning. Rect elements receive a class for hover styling, and tooltips are implemented via a custom div that appears on mouseover, relying on D3’s event handling to show the specific count for each day.

Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on the page at an extremely large font size, with a JavaScript console message. It uses plain HTML with embedded CSS for styling the body’s text alignment and font size, and a script tag that calls `console.log` to output “Hello JavaScript!” to the browser’s developer tools. The page is a minimal starter template demonstrating basic web technologies without external libraries.

Loading thumbnail…

2-Dimensional Data Display of GUIText

This visualization displays parsed GUIText data as a two-dimensional grid of squares, where each row represents a separate parsed GUI event sequence and each column represents a step within that sequence. The code uses D3 v5 methods including `select`, `data`, `enter`, and `append` to bind the hierarchical data and render SVG rectangles. The `ParseGui` class in JavaScript parses the text attributes into tree structures. The display uses a fixed square size with spacing between rows and columns to create a matrix layout.

Loading thumbnail…

2-Dimensional Data Display of GUIText

This visualization displays parsed GUIText data as a 2D matrix of rectangles, where each row represents a parsed GUI hierarchy sequence sorted by frequency count. The rows are transformed using `d3.hierarchy` and `.descendants()` to flatten tree structures, with rectangle positions calculated via simple coordinate spacing. The code uses `d3.select` for SVG manipulation, `d3.json` for loading data, and `d3.hierarchy` for tree processing, rendering each GUI event as a steelblue rectangle. Data is aggregated by identical GUIText strings to show duplicate occurrences, with row order reflecting descending count values.

Loading thumbnail…

TreeMap Layout

This example demonstrates a treemap layout using D3 v5, displaying hierarchical data as nested rectangles sized proportionally to their values. The visualization shows four labeled nodes—three leaf nodes (C1, C2, C3) with varying values beneath a parent node (B1), alongside a sibling node (B2)—all enclosed within root A1, with padding and gaps between groups. It uses `d3.hierarchy` to structure the data and `d3.treemap` to compute the layout, rendering rectangles and text as SVG elements. The treemap applies an outer padding of 16 pixels and scales to a 400×200 pixel area, with a static dataset defined in the code.

Loading thumbnail…

Aggregated Event Sequences with Flow Histograms

This example visualizes aggregated event sequences from network connection logs, displaying each sequence as a row of colored blocks in a middle panel alongside attribute histograms on the left and detailed sequence information on the right. Users can filter sequences and events using regular expressions, with matching elements highlighted in green. Clicking events in the detail view builds rules that update the filter. The visualization uses d3.v5 with SVG rendering, employing d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft for histograms, and d3.event handlers for interactivity.

Loading thumbnail…

2-Dimensional Data Display

A 2-dimensional grid of numeric values is displayed as a matrix of colored squares, with each cell’s value overlaid as white text. The visualization uses D3.js v5 with SVG rendering, employing `selectAll`, `data`, and `enter` to bind nested array data from a hardcoded dataset to rows and columns. Each square is a `rect` with fixed dimensions, and text labels are positioned within cells, demonstrating a basic data binding and layout pattern.

Loading thumbnail…

Aggregated Event Sequences with GUI Histograms

This example visualizes aggregated GUI event sequences and their attribute distributions. It shows compact event chains alongside histograms for window names, class names, and content types, with interactive brushing and regex-based filtering that highlights matching events in real time. The visualization uses d3.hierarchy to structure data, d3.scaleBand and d3.scaleLinear for the histograms, and d3.event handlers for tooltips. Event sequences are rendered as SVG rectangles, with animation updating counts and matched percentages as users type rules into a text input.

Loading thumbnail…

Tree Layout

This example demonstrates a hierarchical tree layout using a cluster-based arrangement in D3 v5. It reads nested JSON data with parent-child relationships and renders the nodes as small circles connected by straight lines. The visualization uses d3.cluster to compute the layout coordinates, d3.hierarchy to structure the data, and SVG circle and line elements for drawing. The tree is positioned within the SVG canvas using a translated group element.

Loading thumbnail…

Chord Layout

A chord diagram displays three groups of flows, with each group’s values (`10, 20, 30`, etc.) represented as ribbons connecting around a circle. The diagram uses d3’s `d3.chord` layout to compute chord paths and `d3.ribbon` with a fixed radius of 200 to generate the curved ribbon shapes. Static example data is loaded directly from a JavaScript array, and the SVG output is styled via CSS with light fills and strokes. The visualization renders paths inside a `<g>` element translated to center the layout.

Loading thumbnail…

Partition Layout

This visualization shows a hierarchical dataset as a radial partition layout, or sunburst diagram, where each arc segment represents a node’s proportional value. Using D3 v5, the code constructs the layout with `d3.hierarchy`, `d3.partition`, and `d3.arc`, rendering SVG paths. The data is embedded directly in `index.js` rather than read from `data.csv`, with arcs styled via the `styles.css` file.

Loading thumbnail…

Pack Layout

This example demonstrates a circular pack layout for hierarchical data using d3.pack, showing nested circles that represent parent and child nodes with sizes proportional to their values. A small dataset with three levels of hierarchy is rendered as SVG circles with semi-transparent indianred fills, white strokes, and text labels only on leaf nodes. The code uses d3.hierarchy and the pack layout to compute positions and radii, then appends transformed groups for each descendant.

Loading thumbnail…

Aggregated Event Sequences with Text Search

This visualization aggregates event sequences from JSON logs, with each row representing a distinct sequence and its count, rendered as a compact striped band. A text input applies a regular expression filter to highlight matching events in green, while clicking a row expands it into a detailed sequence of labeled rectangles. The code uses D3 v5’s `hierarchy` for data nesting and custom SVG rendering, with string-based keys for data joins and a dynamic regex state that triggers re-renders.

Loading thumbnail…

Let's make a face with D3.js!

Five apples and a lemon transition in and out of a fruit bowl, rendered as animated SVG circles with labels using D3.js v5. The example demonstrates data joins and enter, update, and exit transitions, with `scaleOrdinal` mapping fruit types to colors and radii. A `setTimeout` sequence removes, mutates, and filters fruit objects, triggering smooth 1-second transitions that resize, recolor, and reposition each group.

Loading thumbnail…

Average Packet Length Scatter Plot

This scatter plot displays the average packet length in bytes for various network protocols, with protocols ordered along the y-axis and average lengths plotted along the x-axis. Each data point is rendered as a purple circle, and hovering reveals a tooltip with the exact byte count. The visualization uses d3.select, d3.scaleLinear, and d3.scalePoint to position marks, while d3.axisLeft and d3.axisBottom generate labeled gridlines. Data originates from Stratosphere Labs’ 2016 network traffic captures, aggregated by protocol from the CSV file.

Loading thumbnail…

Aggregated Event Sequences with GUI Histograms

This visualization aggregates event sequences from network flow data, showing compact event sequence strips in the center alongside histograms of destination IP, port, and source IP attributes on the left. Users can filter events by typing a regular expression, which highlights matching sequence elements and updates a percentage counter. Selecting a sequence displays its event details, including name, content name, and content type, on the right. The implementation uses d3.hierarchy, d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and SVG rendering with tooltips.

Loading thumbnail…

Scatter Plot with Menus and Categorical Color Coding

This interactive scatter plot displays the auto-mpg dataset, letting users compare numeric attributes via dropdown menus and color points by categorical columns. A color legend appears for categories with fewer than 12 unique values, where clicking a legend item filters the visible circles; for larger ordinal categories, a sampled viridis scale is shown without filtering. Built with d3.v5, the visualization uses `scaleOrdinal`, `interpolateViridis`, and `schemeSpectral` for coloring, while transitions animate circle positions and opacity in the SVG when axes or color selections change.

Loading thumbnail…

Aggregated Event Sequences with Attribute Histograms

This example visualizes aggregated event sequences as horizontal rows of colored rectangles, with adjacent histograms showing the distribution of network attributes like destination IP, port, and source IP. Users can type a regular expression into a text input to highlight matching events in green and display the percentage of matched events. The visualization uses D3 v5 with `hierarchy` for data structuring, and renders SVG elements via `eventSequences`, `compactEventSequences`, and `attributeHistogram` components, which employ `scaleBand`, `scaleLinear`, and `axisLeft` for the histograms. Tooltips appear on hover, and the data comes from a JSON file containing GUI event sequences.

Loading thumbnail…

Cars Scatter Plot with Interactive Filtering

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point colored by the number of cylinders. Users click the interactive color legend to filter which cylinder groups remain visible. The visualization uses D3 v5 with SVG rendering, employing `scaleOrdinal` and `schemeSpectral` for color encoding, alongside `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. A black background and opacity adjustments highlight the spectral color range across cylinder categories.

Loading thumbnail…

Event Sequences with Overview

This visualization shows event sequences as a grid of rows, where each row represents a GUI widget hierarchy from root to inner-most child. Clicking a node highlights its sequence and displays a breadcrumb description below the grid. The color legend and dropdown menu allow filtering by cardinality and path. The code uses d3.hierarchy to structure the data, scaleSequential with interpolateRdBu for coloring, and d3.histogram with scaleTime for the vertical time-series overview.

Loading thumbnail…

Chloropleth Map

This example displays a choropleth map using 160 countries colored by income group, with a legend and tooltips. It loads world geometry from TopoJSON and joins it with TSV metadata, projecting paths with `d3.geoPath` and a natural Earth projection. The ordinal color scale uses `scaleOrdinal` with `schemeSpectral`, and the legend is built as a custom D3 component. Pan and zoom are enabled via `d3.zoom`, and hovering highlights the selected country in red.

Loading thumbnail…

Event Sequences with Filtering and Interations

This visualization displays GUI widget event sequences as rows of colored rectangles, where each sequence traces a path from a root application to its child widgets. Users can filter by application path and click individual sequences to highlight them and reveal a breadcrumb-style description of the widget IDs. The color of each rectangle encodes the frequency distribution of widget class names across all sequences, computed via d3.hierarchy and rendered with d3.scaleSequential. Interactive elements include a dropdown menu and a color legend, both built with custom D3 modules.

Loading thumbnail…

Event Sequences with Map and Histogram Overview

This visualization combines a vertical histogram and two event-sequence views to explore event timelines over time. The histogram, built with `d3.histogram`, `d3.brushY`, and time scales, displays the distribution of event counts per hour, and allows brushing to filter sequences. The compact view and the larger sequence view, both rendered as SVG rectangles using `d3.hierarchy`, show hierarchical event details from CSV data, with the brushed date range controlling which sequences are displayed.

Loading thumbnail…

Cars Scatter Plot with Interactive Filtering

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point colored by the number of cylinders. Users click the interactive color legend to filter which cylinder groups remain visible. The visualization uses D3 v5 with SVG rendering, employing `scaleOrdinal` and `schemeSpectral` for color encoding, alongside `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. A black background and opacity adjustments highlight the spectral color range across cylinder categories.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five circles fade in to form a bowl of fruit. Clicking a fruit selects it with a black outline; clicking again deselects it. The example uses an exportable `fruitBowl` function with D3 v5 scales, SVG circles, and `transition().duration()` to animate entering, exiting, and updating shapes as apples are eaten and a fruit changes into a lemon.

Loading thumbnail…

Event Sequences

This visualization displays event sequences as linear streams of small squares, where each sequence represents a path of GUI widget interactions from a root window to a nested element. Clicking a square highlights its entire sequence with a yellow overlay and lists the widget IDs as breadcrumb text below. The tool filters sequences by executable path via a dropdown menu. It uses D3 v5 to load JSON data, build a hierarchical tree from each sequence, and render SVG rectangles for each widget, with click handlers triggering the selection and highlighting logic.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Loading thumbnail…

Area Chart with Brushing

This area chart displays monthly S&P 500 price data from January 2000 through March 2010, rendered as a brushed time series. The visualization shows price fluctuations over time in steel blue, with an interactive brushX selection tool below the main chart that allows users to zoom into specific date ranges. The example uses d3.v5 with SVG rendering, employing scaleTime, scaleLinear, axisBottom, axisLeft, brushX, and area functions to construct the focus and context views, with data loaded from a CSV file.

Loading thumbnail…

Area Chart with Brushing

This area chart displays monthly S&P 500 price data from a CSV file, with a focus chart and a smaller context chart below it. Users can brush along the context chart’s x-axis to zoom into a specific time range, updating the main chart’s domain. The visualization uses D3 v5’s `brushX`, `scaleTime`, `scaleLinear`, and `area` generators, with SVG rendering. The main area path is clipped to prevent overflow during brushing, and the context chart mirrors the full dataset for navigation.

Loading thumbnail…

TreeMap

This tree map visualizes a hierarchical log of user interface events from a browsing session, shown as nested rectangles whose sizes correspond to a time metric. The layout is computed with `d3.treemap()` on the loaded JSON data, with elements rendered as SVG `<rect>` and `<text>` nodes. The d3 hierarchy is processed through `d3.hierarchy()` and laid out with `d3.treemap()`.

Loading thumbnail…

Horizontal Tree

A horizontal tree visualization displays hierarchical data as a branching layout flowing left to right. Each root node represents a separate dataset, with nested child nodes indicating control-state relationships and timing information. The visualization uses D3 v5’s tree layout, `linkHorizontal` path generator, and SVG rendering to draw the structure. Hovering over any node displays a breadcrumb trail at the bottom, showing the full path from root to that node, built from the data’s CT property.

Loading thumbnail…

Overview - Compact Event Sequences

This visualization presents a compact overview of event sequences from Windows application activity, where each row represents a single process event chain and each column indicates a UI element change over time. The event data, sourced from `data.json`, includes timestamps, application names like Word and PowerPoint, and window or pane class names. Built with D3 v5, the SVG rendering uses a color scale based on the distribution of pane class names across the dataset to encode recurring patterns. Rows are displayed as sequences of colored rectangles, and hovering over a row highlights that specific event sequence. The code utilizes D3’s `hierarchy` function to structure each event’s nested children and `scaleSequential` with an `interpolateRdBu` color gradient for visual encoding.

Loading thumbnail…

Dataset #3: Netflow with GUI Info

This example displays summary statistics and raw JSON previews of a netflow dataset enriched with GUI interaction data. The page shows the row count, column count, and data size in kilobytes, followed by the first ten records in pretty-printed format. The code uses D3 v5’s `json()` function to fetch data.json, and `csvFormat()` from D3 to calculate the data’s size in kilobytes. The visualization presents the data source, which includes correlated keyboard, mouse, and GUI activity fields, in a straightforward textual format against a black terminal-style background.

Loading thumbnail…

Circles on a Map

This example visualizes global population estimates for 2018 using circles overlaid on a natural Earth projection map. Countries with missing data appear pink, while populated areas are gray with semi-transparent cyan circles sized by population via d3.scaleSqrt. The visualization includes an interactive size legend with formatted tick values and a color legend. It uses d3.geoPath, d3.geoCentroid, d3.zoom, and d3.scaleOrdinal, rendering with SVG. Population data comes from a UN CSV file joined to TopoJSON world geometry, with tooltips showing country names and population counts.

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot lets users explore the relationships between different attributes of cars from the auto-mpg dataset. Dropdown menus dynamically select which numeric columns are plotted on the x and y axes. The visualization uses D3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct axes with gridlines, and `transition().duration(1000).delay()` animates circles to new positions when axes change. Data is loaded via `csv()`.

Loading thumbnail…

Color and Size Lengends

This example demonstrates how to create separate legends for categorical color encoding and quantitative size encoding. The color legend uses an ordinal scale to map fruit names to distinct colors, while the size legend uses a square-root scale to map numeric values to circle radii. The reusable legend components (colorLegend and sizeLegend) are implemented as D3.js functions that append SVG groups, circles, and text elements, with tick marks generated from the scale's domain and ticks API.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how circles representing fruit change over time as data is modified. The visualization renders five apples as red circles using `d3.scaleOrdinal` for both color and radius, then removes one fruit after a second and changes another from apple to lemon after two seconds. The code uses D3's data join with `selection.enter`, `selection.merge`, and `selection.exit` to handle updating, entering, and exiting SVG circle elements.

Loading thumbnail…

Scatter, Line, and Area Example

This line chart shows the daily count of network flows over a three and a half month period, with each point representing a day’s total. The data, sourced from a professor at WPI and cleared for public use, includes timestamps and flow counts. The visualization uses D3 v5’s `scaleTime` for the x-axis and `scaleLinear` with `nice()` for the y-axis, rendering the trend with a smooth, curved line via `lineGenerator` and `curveBasis`. The chart is drawn in an SVG element, with axis ticks, labels, and a title styled through CSS.

Loading thumbnail…

Curved Lines

Four line charts show how D3’s curve bundle interpolator changes with beta values of 0, 0.25, 0.5, and 1, producing progressively smoother, more rounded paths from the same six fixed points. Each chart uses the same coordinates, with only the curve function varying, and is drawn as an SVG path with a black stroke. The example reproduces a figure from Munzner’s *Visualization Analysis and Design* using D3 v5’s `d3.line()` and `d3.curveBundle.beta()`.

Loading thumbnail…

Dataset #1 Packet Headers

A CSV file containing packet headers from mixed normal and malicious network traffic is loaded and analyzed. The visualization displays a summary of the dataset, reporting the number of rows, columns, and total file size in kilobytes, along with a formatted preview of the first ten rows. The code uses d3.csv to parse the data and d3.csvFormat to calculate its byte size. The dataset is sourced from Stratosphere labs' 2016 network traffic capture, truncated from its original 151,643 lines.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The D3.js v5 code loads CSV data, maps horsepower to the x-axis and weight to the y-axis using linear scales, and renders semi-transparent red circles for each car. Axis labels and a title are added using SVG text elements, with gridlines drawn via tick marks extended across the plot area.

Loading thumbnail…

Customizing Axes

This bar chart displays the ten most populous countries in the world, with each bar’s length representing a country’s population. It uses d3.csv to load the data and d3.scaleBand and d3.scaleLinear to map countries and populations to screen positions. Customized d3.axisBottom and d3.axisLeft render gridlines and formatted tick labels, while axis titles and tick styling are applied via CSS. The SVG output is built using D3 selections, with population values converted from thousands to raw numbers.

Loading thumbnail…

Most Popular Programming Languages

A horizontal bar chart ranks the ten most popular programming languages on GitHub by active repository count, with JavaScript leading and C# trailing. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisLeft` and `axisBottom` for tick labels. Data is loaded from a local CSV via `csv` and rendered as SVG rectangles. Population counts are multiplied by 1,000 to reflect actual repository numbers, with bars styled in steel blue via CSS.

Loading thumbnail…

Angry Circles

Two colorful cartoon faces, one circular and one rectangular, animate through angry expressions on an SVG canvas. The circular blue face turns red while its eyes shrink, eyebrows rotate, and mouth expands; the yellow face becomes green with rotating eyebrows and flipping mouth. Built with D3 v5, the visualization uses chained transitions with varying durations to animate shapes, positions, and rotations. The code imports custom modules and relies on D3's selection and transition methods to coordinate the parallel animations across both faces.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle head with black-outlined eyes, animated eyebrows, and a curved mouth is drawn in an SVG canvas using D3.js. The face is centered and constructed from primitive shapes, with eyebrows transitioning vertically over two seconds using `transition().duration(2000).attr('transform')`. The mouth is created via `arc()` with specified radii and angles. D3's `select` and `append` APIs build the SVG hierarchy.

Loading thumbnail…

Count of Flow Logs Grouped by Day

This example shows a line chart of network flow counts per day over a three-and-a-half-month period, highlighting daily fluctuations in connection activity. The visualization uses D3 v5’s SVG rendering with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing to create the path. Data is loaded from a CSV file containing timestamps and counts, and the chart includes labeled axes and a title. The source is a private netflow dataset provided by a WPI professor, cleared for public use.

Loading thumbnail…

idk

This example displays a scatterplot of car horsepower versus weight from the auto-mpg dataset, rendered as red circles on an SVG canvas. A dropdown menu at the top offers options A, B, and C, though no filtering logic is implemented. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv to load data, with axis labels and a title styled via CSS.

Loading thumbnail…

Data Table Summary

This example displays a plain-text summary of a CSV data table about population estimates for the most populous countries in 2018. It shows the number of rows, columns, and file size in kilobytes, followed by the first 10 rows of the data formatted as JSON. The visualization uses d3.csv to load the data and d3.csvFormat to calculate the size, then writes results into <pre> elements via d3.select. The styling adopts a green-on-black terminal aesthetic from the provided CSS.

Loading thumbnail…

Dataset #2 Network Flows

This example parses a truncated network traffic dataset from Stratosphere Labs, displaying a summary of its dimensions and contents. The page shows the total row count, column count, and file size in kilobytes, then prints the first ten rows as formatted JSON. The code uses D3 v5’s `csvFormat` to calculate data size and `tsv` to load the tab-separated data file. A black terminal-style interface with green monospace text echoes the dataset’s raw structure.