React Starter

100%

✓ Published0🌍 Public

Last edited Jul 15, 2020

Created on Jul 15, 2020

This React starter example showcases a variety of heatmap configurations using @nivo/heatmap within a Storybook environment. It demonstrates different cell shapes (rectangle, square, and circle), color schemes, variable cell sizing, and custom cell components with rotated triangular paths. The heatmaps render synthetic country data generated by `@nivo/generators` `generateCountriesData`, and include custom tooltips with formatted Russian ruble values. The example also imports React and uses `storiesOf` to organize multiple heatmap variations, with styling applied through inline SVG transforms and attributes.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

React Starter

A React Starter page demonstrates the mapping of a hardcoded numeric array to animated bar charts and red text values. The visualization uses D3 v5 to bind an eight-element dataset to DOM elements, creating teal bars whose heights transition over ten seconds via `transition().style()` calls. Text values appear as red paragraph elements, while the page title and axis label are plain HTML. The example integrates D3 selections with static React markup, showing basic data-driven styling and animation without external data loading or complex layout systems.

MMohammad Afaq Khan

71% match

Loading thumbnail…

React Starter

A React starter template renders a dataset as a static bar chart inside an HTML page. Using D3 v5, the visualization appends red paragraph elements for each value and creates teal div bars whose heights correspond to the numeric data, with an animation applied via a ten-second duration during the transition. The code employs `d3.select`, `.data()`, and `.transition().duration()` to build the graph, showing eight variables from an inline array.

MMohammad Afaq Khan

71% match

Loading thumbnail…

React Starter

This React Starter example renders a grid of overlapping SVG circles, clustered in the upper-left and spread with increasing scatter as the coordinate values grow. It uses React and ReactDOM to build the markup, with nested `map` operations over a numeric array to generate each circle. The fill color is derived from the square of the index, producing a grayscale gradient, while the `cx` and `cy` positions are multiplied by `Math.random()` to introduce random jitter.

NNita

70% match

Loading thumbnail…

React Starter

This example displays a series of teal bars and red text values derived from a hardcoded dataset. The visualization uses D3 v5 within a React environment, employing `d3.select` to locate elements and a bar chart transition to animate height changes over ten seconds. The rendering relies on SVG-less HTML divs and paragraphs, with the x-axis labeled “Vars.”

MMohammad Afaq Khan

70% match

Loading thumbnail…

React Starter

This example shows a circular bubble chart where hierarchical data is displayed as packed circles, with labels split across multiple lines and colored by group. The visualization uses d3.pack to compute the layout and D3’s selection API to join data to SVG circles, clip paths, and text elements. It incorporates React for the user interface and DOM.uid for unique identifiers, while datasets are loaded from a JSON file. Tooltips reveal each leaf’s title and formatted value.

SStefan Gerrits

70% match

Loading thumbnail…

Example of Heatmap using D3 with React

This heatmap displays a 10-by-10 grid of values using a white-to-teal linear color scale (`d3.scaleLinear`) mapped from a CSV dataset loaded via `d3.csv`. The graphic uses React to render SVG rectangles for each cell, with `d3.scaleBand` positioning the rows and columns. Axis labels for groups (A–J) and variables (v1–v10) are drawn as SVG text elements. The full window is filled with the visualization, and the chart includes a title above the plot area.

LLewis Ward

70% match

Loading thumbnail…

React Starter

This React Starter example renders the text "hi" as a 13-em tall message in the center of the page, with the words "React Starter" appearing in red at 5-em size above it. The visualization uses the React and ReactDOM libraries (version 16.10.0) to mount an `App` component into the root div, while the JavaScript code demonstrates functional programming with an array map and a square function, though it also runs a loop that logs values to the console. The example serves as a minimal template for building React-based data visualizations.

NNita

70% match

Loading thumbnail…

My React Starter

This example displays a 10 by 10 grid of circles, each with a radius of 20 pixels, positioned along diagonal lines where both the x and y coordinates increment by 100. The visualization is rendered as an SVG using React, with the circles generated by mapping over two arrays that define the coordinates. The code relies on React and ReactDOM to render the components, and the SVG is created directly within the JSX. The data is programmatically generated in loops, and the rendering approach uses native SVG elements within a React component.

NNita

70% match