Gist e4feca46f5a47e079e65b8fc7f1905a2

100%

Gist e4feca46f5a47e079e65b8fc7f1905a2

✓ Published0🌍 Public

Last edited Feb 4, 2018

Created on Feb 4, 2018

This example shows a React app that routes between a home page with a date picker and a results page, while also fetching historical Bitcoin price data. The code uses `react-datepicker` and `moment` for date selection, and `axios` to request data from the Cryptocompare API endpoint for BTC prices in USD and EUR. A simple switch statement in `routingSystem` controls which component renders, and clicking a "Data" button triggers the API call to populate the app state. The visualization itself is not implemented in the provided code, as it only handles data fetching and basic navigation.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e8f49452a4f5db4f4eae12542e0cad5f

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.

Aanosikeosifo

67% match

Loading thumbnail…

Gist 03a1a4db64f2950e5b77e675ae4b0e99

This example shows an interactive gap chart built with React, where a small multiple grid displays the development of the selected indicator across different countries. The visualization combines data points with a line chart, using a React component to render the chart and a geographic map to highlight the current country. The code relies on the `d3` library for data binding and SVG rendering, with the map using `d3.geoPath` and the line chart updating through a `transition` on the chart’s parameters. The source data appears to be a JSON file containing country-specific statistics.

DDanielAguirre

66% match

Loading thumbnail…

Gist cd3cd287bdc26f3a310b12096be56102

This interactive timeline charts a developer’s evolving tech stack from 2014 to 2017, with planned tools for the future. It uses a force-directed graph via `d3.forceSimulation` to position nodes representing languages, frameworks, and APIs, while edges connect each technology to the year it was adopted. The data comes from a Markdown file listing monthly entries, rendered as a React component that parses the file into nodes and links. Hovering reveals tool names, and the graph’s layout adapts dynamically to the growing list of skills.

Aamazingandyyy

65% match

Loading thumbnail…

Gist 6cd6fea1125bc0e25597996d418bc20d

This example shows a React application that displays a Google Map centered on a specific location, with markers loaded from an external JSON file and rendered using the `react-google-maps` library. It also includes a separate "Places" component that fetches employee data from another JSON file via `axios` and lists their first names. The map uses the `GoogleMapLoader` and `GoogleMap` components, with custom marker icons, while the places list demonstrates asynchronous data fetching and state management. The visualization combines geographic positioning with a simple text-based list, illustrating how to integrate map and non-map data in a single React interface.

CCKschneid

65% match

Loading thumbnail…

Gist 7f9c8a8f711748856e574b550d7f3751

A small React application renders a force-directed graph of interconnected nodes and edges. The visualization uses `d3.forceSimulation` to compute node positions and link forces, while the `ReactDOM.render` call mounts the component onto a DOM element. The graph displays circles for data points and lines for connections, with the simulation running continuously to update positions dynamically. The code relies on React’s component-based structure to manage the SVG elements and update them on each simulation tick.

TTheComfyChair

64% match

Loading thumbnail…

React Starter

A React-based dashboard renders COVID-19 summary data from the covid19api.com REST endpoint. It displays global and per-country metrics as animated SVG bar charts, with the D3 v5 library handling chart construction—using `scaleBand` for categorical axes, `scaleLinear` for quantitative values, and `transition` for bar width animations. The interface uses Materialize CSS components, featuring a navigation bar for switching between views and country select dropdowns. Data updates occur through button clicks that refetch and re-render the visualizations.

0007ebey

64% match

Loading thumbnail…

ThirdPartyAPI

This example visualizes historical Bitcoin price data, fetched live from the CoinDesk API. The visualization presents a line chart that users can interact with, powered by the open-source D3.js library and its `d3-selection-multi` extension for enhanced multi-point selection. Data is loaded asynchronously via `d3.json`, then processed and rendered within a React-based project structure. The chart displays the price trends over time, with the underlying HTML page and JavaScript files managing the data preparation and chart rendering.

Ddankvader1

63% match

Loading thumbnail…

Gist 7dc4898b7ffc460291957e8784871131

This example demonstrates a React application that integrates Redux for state management with asynchronous actions via Redux Thunk. It sets up a centralized store using `createStore`, applies the `thunk` middleware, and connects the app through a `Provider` component. The root component is rendered into the DOM with `react-dom`’s `render` method, using `window.__REDUX_DEVTOOLS_EXTENSION__` for debugging. The code shows how to wire together React, Redux, and Redux Thunk, though it does not display any visual data or charting logic, focusing solely on the application’s foundational architecture.

Aamortka

63% match