Tell us what works and what could be better. We read every submission.
@anosikeosifo·10 public vizzes
This example shows a React Native application shell that wires together a Redux store, a layout component, and an application navigator. The code defines a `LargeApp` class component that renders a `<Provider>` from React Redux, passing `myStore` to wrap a `<Layout>` containing an `<ApplicationNavigator>`. It demonstrates the standard composition pattern for initializing a Redux-connected navigation hierarchy in a React Native app, using the `Component` API from React and the `Provider` component from `react-redux`. No data visualization or charting logic is present; the focus is on application bootstrapping and state management architecture.
This example shows a Redux state-management structure that combines reducers for event data, explore data, and navigation data into a single root reducer. The code uses the `combineReducers` API from the Redux library to merge three feature-specific reducers—imported from `features/events/reducers`, `features/explore/reducers`, and `navigation/reducers`—into one exported object. It does not render any visualization directly; instead, it defines the data-flow backbone that organizes state for an application, likely feeding charts or maps that consume these event, exploration, and navigation datasets. The source is a gist authored by anosikeosifo.
This example shows a custom navigation reducer for a React Native application, managing the initial route state and handling navigation actions through the `ApplicationNavigator.router`. The code defines an `initialState` object with an index and a routes array containing a single screen, and exports a `navigationReducer` function that uses `getStateForAction` to compute the next state. It relies on React Navigation’s router API to process actions, falling back to the current state when no transition occurs. The visible data source is the hardcoded route configuration with a placeholder screen name.
This example demonstrates a mobile app navigation interface with two tabs, Explore and User Profile, both rendering the same Explore screen component. The code uses React Navigation’s `TabNavigator` to create a bottom tab bar with a white background and a coral active tint color (#ff5a5f). Swiping between tabs is disabled, and the tab bar is positioned at the bottom with extra vertical padding. The configuration relies on screen names defined in `screenNames` and a custom styling object for the tab bar options. No data visualization or charting library is involved; the example focuses purely on navigational structure and tab styling.
This example shows a React Native application that manages navigation between three main screens: a splash screen, an authentication flow, and a main interface. The code uses `StackNavigator` from the `react-navigation` library to define the app’s routing structure, mapping named screens to their respective components. It imports `AuthNavigator` and `MainNavigator` as nested navigators, along with a splash screen container, to organize the user flow. The implementation relies on React’s component-based architecture and the navigator’s configuration object to set up the initial navigation stack, without any data visualization or custom rendering logic.
This example shows a React Native application that connects a navigator component to a Redux store, enabling navigation state to be managed globally. The code uses `react-navigation`’s `addNavigationHelpers` to bind the navigation object to dispatch actions, while `mapStateToProps` and `mapDispatchToProps` link the Redux state and action dispatcher to the container. The `ApplicationNavigatorContainer` class renders the navigator with the merged navigation helpers, and the `connect` function from React Redux wraps the component to subscribe it to store updates. The data source is the Redux navigation slice, and the rendering approach relies on React Native’s component lifecycle.
This example uses React Navigation’s `NavigationActions` to programmatically trigger screen transitions, navigating to login or splash screens via named routes. It defines two exported functions, `navigateToLogin` and `navigateToSplash`, each returning a navigation action object that targets a specific `routeName` constant imported from a separate `screen_names` module. The visualization shows how navigation logic can be modularized and reused across a React app, with the actions serving as the core API for controlling screen flow. No rendering or data visualization occurs in this code snippet.
This example demonstrates a Redux-connected React component that renders an explore page. It shows how the component receives explore data from the application state and a category listing derived through a selector, while also exposing an action to fetch explore data. The code uses `react-redux`'s `connect` function to map state and dispatch actions, and `bindActionCreators` to wrap the `getExploreData` action. Navigation is handled via a `navigateToLogin` action imported from a navigation module, though the component itself does not display any visual data directly.
This histogram example visualizes six fixed data values as vertical bars, with each bar’s height proportional to its numeric value and colored teal with white strokes. The chart includes a y-axis with ten ticks, where tick labels are colored red or green depending on whether the value exceeds 200. Built with D3 v4, it uses `d3.scaleLinear` and `d3.axisLeft` to construct the axis, while `d3.select` and data joins append SVG rectangles for the bars. Hovering over a bar changes its fill to orange via CSS.
This example shows a bar chart of letter frequencies in English, parsed from an XML file. The chart displays the alphabet along the x-axis and frequency percentages on the y-axis, with teal bars that darken on hover. The code uses d3.xml to load data.xml, then traverses the XML document with the selectors API (querySelectorAll and getAttribute) to convert letter and frequency elements into JavaScript objects. It builds the visualization with d3.scale.ordinal, d3.scale.linear, and d3.svg.axis, rendering SVG rectangles for each bar.