MattDionis

@MattDionis·10 public vizzes

Gist 7a1d4b8b5a6131f80d2efea29621dc45

This code snippet shows a GraphQL mutation handler for updating an application's bar color setting. It uses Apollo Client’s `useMutation` hook, sending `UPDATE_APP_BAR_COLOR_SETTING_MUTATION` with a `setting` variable. After the mutation, it reads the current `appBarColorSetting` from the cache using `APP_BAR_COLOR_SETTING_QUERY`, modifies the setting, and writes the updated data back via `cache.writeQuery`. The example demonstrates optimistic cache updates for UI preferences.

May 24, 2019

Loading thumbnail…

Gist 4e6751d83d024b58d7674490cb7f7a8f

This example shows a GraphQL mutation for updating an app bar color setting in a client-side Apollo cache. The code defines `UPDATE_APP_BAR_COLOR_SETTING_MUTATION` using the `gql` template literal from Apollo’s `graphql-tag` package, specifying a `updateAppBarColorSetting` mutation that takes a `setting` string argument. The mutation includes an `@client` directive on both the mutation field and the nested `setting` field, indicating the operation is handled entirely on the client without a remote server. The data flow is visible through the mutation’s selection set, which returns the updated `setting` value.

May 24, 2019

Loading thumbnail…

fresh block

A tree diagram displays the logical structure of an AND/OR expression, with nodes for operators like "AND" and "OR" and leaf terms such as "levenshtein," "soundex," and "metaphone." The visualization, built with d3.js v3, uses the `d3.layout.tree` layout and `d3.svg.diagonal` projections to draw curved links. Circles at each node are clickable, toggling the expansion of child nodes and animating the transition using d3 transitions over a 750-millisecond duration. The tree renders as an SVG, loading its hierarchical data from the `flare.json` file.

Aug 25, 2017

Loading thumbnail…

Matt Dionis PGP Public Key

This visualization maps the characters of Matt Dionis’s PGP public key block, sourced from a gist, onto a circular force-directed layout. Each line and character from the key is rendered as a node or link, with the structure of the ASCII-armored text made visible through spatial clustering. The sketch uses `d3.forceSimulation` to position nodes, while a Canvas 2D context draws the characters and connectors, revealing patterns in the key’s base64 content and its header/footer metadata. The layout emphasizes the block’s internal rhythm and length.

Jul 6, 2017

Loading thumbnail…

fresh block

This example displays a single SVG canvas with the text “Edit the code below to change me!” styled in a large monospace font. The visualization is a minimal starting point, not a finished graphic. It uses d3.select to target the body element, then appends an SVG with specified width and height. The code then adds a text element using d3’s `.text()` method to set its content, demonstrating basic SVG text placement and font styling with `.style()`.

Nov 29, 2016

Loading thumbnail…

Stacked Area Chart

This stacked area chart shows the daily market share of web browsers over a three-month period, with each browser represented by a colored area stacked to total 100%. The visualization uses D3 v4 to load TSV data from Clicky Web Analytics, parse dates with `d3.timeParse`, compute stacked y-positions with `d3.stack()`, and render areas using `d3.area()`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while colors come from `d3.schemeCategory10` via `d3.scaleOrdinal`. The final SVG output includes labels for each browser placed at the right edge of the chart.

Nov 18, 2016

Loading thumbnail…

d3.js Graph with many features

This example presents a line chart of stock closing prices over time, with a filled area beneath the curve to emphasize the trend. It uses d3.svg.axis, d3.svg.line, and d3.svg.area to render the axes, value line, and shaded region, while d3.csv loads the date and price data from a local CSV file. The chart includes custom grid lines, axis labels, and a white-shadowed y-axis label, all drawn as SVG within the D3 v3 framework.

Mar 3, 2016

Loading thumbnail…

Scatterplot with Voronoi

This scatterplot visualizes customer transactions by type, plotting transaction amount against date. Each circle is colored by transaction type (deposit, receive, spend, withdrawal) and the chart includes a legend for filtering. An invisible Voronoi grid, created with `d3.geom.voronoi`, overlays the plot to capture mouse events, triggering a tooltip on the nearest circle for an improved interactive experience.

Feb 2, 2016

Loading thumbnail…

Angular directive to hide grandparent of '404' image

This AngularJS directive automatically hides an image’s grandparent element when the image fails to load. It demonstrates handling the `error` event on an `<img>` tag by navigating two levels up the DOM tree—using `element.parent().parent()`—and setting that ancestor’s `display` to `none`. The code relies on Angular’s `directive` API with `restrict: 'A'` and applies the behavior via the `hide-image` attribute in a sample `ng-repeat` loop over photo objects. The data source is an array of photo objects bound through `ng-repeat` in the sample HTML.

May 3, 2015

Loading thumbnail…

Angular directive to replace '404' image with default image

This example shows an Angular directive that automatically replaces a broken image with a default fallback image. The `defaultImage` directive binds to the `error` event on an `<img>` element and swaps the `src` attribute to a specified fallback URL when the original image fails to load. The directive uses Angular’s `link` function to attach the event listener, and the sample HTML applies it via the `default-image` attribute alongside `ng-src`, referencing a fallback URL from Instagram’s anonymous user profile. The implementation relies solely on Angular’s directive API and native DOM events.

May 3, 2015