Skip to main content
SimilarExport ZIP
100%

Gist 7a1d4b8b5a6131f80d2efea29621dc45

✓ Published0🌍 Public
MMattDionis
Last edited May 24, 2019
Created on May 24, 2019

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.

AI-generated description

Similar vizzes

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.

MMattDionis
93% match
Loading thumbnail…

Stacked Bar Update Pattern

This example demonstrates the D3 general update pattern for smoothly animating changes in a stacked bar chart as new random data arrives every second. Seven individuals are displayed along the x-axis, with colored segments representing six categorical values, while the y-axis scale adjusts to accommodate the new total sum for each person. The code uses `d3.stack` with `d3.stackOrderNone`, a ColorBrewer qualitative palette, and `d3.scaleBand` paired with `d3.scaleLinear`. Transitions are driven by D3’s `transition()` method, with data generated via the jeezy library and helper functions from `d3-marcon` for layout.

FFrissAnalytics
48% match
Loading thumbnail…

Rendering Data with React

This example renders a vertical stacked bar chart of CSS named colors, with each row displaying a color’s hex value as a background swatch. The code loads a CSV of color data from a GitHub gist using D3’s `csv` utility and manages the asynchronous data fetching with React hooks (`useState`, `useEffect`). Once loaded, the data is mapped to React `<div>` elements, each styled with an inline `backgroundColor` property and fixed dimensions. The visualization demonstrates a simple integration of D3 for data loading and React for declarative DOM rendering.

Ttrissentety
47% match
Loading thumbnail…

[04] Animated bar chart - Using React Hooks with D3

This example shows an interactive animated bar chart where users can increment, decrement, filter, or append values to a dataset, with bars flipping vertically and transitioning smoothly to new heights. Built with React Hooks and D3 v5, it uses `scaleBand` for the categorical x-axis, `scaleLinear` for y and color interpolation, and `selection.transition()` to animate bar heights and fill colors based on a clamped color scale. The SVG rendering uses `transform: scale(1, -1)` to flip bars, with axes positioned via `axisBottom` and `axisRight`.

Ggjonor
47% 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
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 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…

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
47% match