Gist 4e6751d83d024b58d7674490cb7f7a8f

100%

Gist 4e6751d83d024b58d7674490cb7f7a8f

✓ Published0🌍 Public

Last edited May 24, 2019

Created on May 24, 2019

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

MMattDionis

93% match

Loading thumbnail…

General Update Pattern

This example demonstrates how to construct a reusable color legend using D3 v4’s General Update Pattern for nested elements. The code defines a `colorLegend` function that binds a color scale to a group, then appends and merges tick marks for each categorical domain value (setosa, versicolor, virginica). Using selections, enter, and merge, it updates circle radii and fill colors, while text labels are positioned with padding. The legend is rendered as SVG, driven by an ordinal scale with custom hex colors, explicitly showing how to handle enter, update, and exit phases for nested data.

CCurran Kelleher

47% match

Loading thumbnail…

General Update Pattern

This example demonstrates the general update pattern in D3 v5, rendering a bar chart of building heights from a JSON file. It begins by adding a static circle, then uses `selectAll("rect").data(data)` to bind the building data and render purple bars via the enter selection. The visualization shows how the enter selection appends new elements, while the code includes imports from a separate fruitBowl module within a React framework, though the visible functionality focuses on data joining and SVG shape creation.

DdeafMother

47% match

Loading thumbnail…

General update pattern

This example demonstrates the general update pattern for animated transitions in D3.js visualizations. A fruit bowl graphic shows a row of apples and lemons as colored circles, with changes occurring over time as fruits are removed, replaced, and filtered from the dataset. The implementation uses D3 v5’s selection merging and exit/enter methods within a React framework, rendered as SVG elements. The `fruitBowl` function applies ordinal color and radius scales to map fruit types to visual properties, while the main script manipulates the fruit array with setTimeout calls to trigger the update pattern.

Eevapavlinek

46% match

Loading thumbnail…

Gist 9d6f5a0980393c12aca5243aae8947e0

This example demonstrates how to modify font attributes for a selected range of text within a Sketch document using the Sketch JavaScript API. It applies small-caps styling by accessing the text layer’s editing delegate and text storage, then constructs an `NSFontFeatureSettingsAttribute` dictionary to adjust the font descriptor. The code specifically uses `NSFontFeatureTypeIdentifierKey` and `NSFontFeatureSelectorIdentifierKey` for the `kLowerCaseType` and `kLowerCaseSmallCapsSelector` settings, then creates a new `NSFont` with `NSFontDescriptor` and applies it to the selected range via `addAttributes:range:`.

KKevinGutowski

46% match

Loading thumbnail…

D3 General Update Pattern

This example demonstrates the D3 general update pattern for animating data-driven visualizations with SVG circles. It initializes an array of fruit objects and uses D3 v7’s selection methods—including enter, exit, update, and merge—to handle dynamic data changes in a bar-chart-like layout. The code specifically creates five apples via `range` and maps them, then binds this data to circle elements using the `d3.select` API, with transitions and object constancy shown through styled SVG elements. The visualization relies on inline SVG attributes and CSS classes for appearance, without external datasets.

Ccaedcagt76@gmail.com

46% match

Loading thumbnail…

Rendering Data with React

This example displays a full-width stacked bar of CSS named colors, with each row’s height fixed at 4 pixels and its background set to the corresponding hex value from the dataset. It loads color data from a GitHub Gist CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously. Once loaded, the `data.map()` function renders a `div` for each color, demonstrating a simple React-driven rendering pipeline alongside D3 for data loading.

BBen Seebeck

46% match

Loading thumbnail…

Rendering Data with React and D3 1

This example displays a vertical stacked bar chart of CSS named colors, with each color rendered as a thin horizontal strip. The visualization loads a CSV dataset of named CSS colors from a remote URL using D3’s `csv` utility, then stores the parsed data in React state via the `useState` and `useEffect` hooks. Once loaded, the app maps each color record to a React `<div>` element, setting its background color from the `RGB hex value` column and fixing its dimensions to create the stacked effect. The code combines React 16.9 for component rendering and state management with D3 v5 for data fetching and parsing.

JJoseIGuzman

45% match