Skip to main content
SimilarExport ZIP
100%

Fork of React Starter

✓ Published0🌍 Public
Ffloresh
Last edited Apr 26, 2022
Created on Apr 26, 2022
Forked from React Starter

This example shows a time-series histogram of earthquake dates, with monthly bins displayed as bars whose heights represent the number of earthquakes per month. The visualization uses D3’s `d3.histogram`, `d3.scaleTime`, and `d3.axisBottom`/`d3.axisLeft` to aggregate and render the data, which is loaded from an external CSV file. The SVG output is appended directly to the body, while React is imported but not used for rendering, leaving the initial starter code commented out.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

This example is a React starter that sets up an empty SVG canvas sized to the browser window. On mount, the app uses D3’s `csv` function to load a local `data.csv` file, which contains monthly temperature readings from 1901 onward, but it only logs the parsed data to the console and does not render any visualization. The code combines React with D3 v5 and renders the SVG element declaratively, but it lacks any plotting, axes, or other visible output.

VVikil Lakkavatri
80% match
Loading thumbnail…

Fork of D3-Histogram

This example presents a histogram of earthquake impact magnitudes in Hawaii, using a bar chart to display the frequency distribution across magnitude bins. The chart includes labeled axes for impact magnitude and earthquake count, with a title indicating the dataset’s subject. Built with D3 v6 and React, the visualization loads CSV data via `d3.csv`, computes bins using `d3.histogram`, scales positions with `d3.scaleLinear`, and renders SVG rectangles styled with a teal fill. Axes are generated through `d3.axisBottom` and `d3.axisLeft`.

Aatifroome@gmail.com
79% match
Loading thumbnail…

Fork of React Starter

This example demonstrates a basic scatter plot with labeled X and Y axes, both scaled from 0 to 100. It uses D3 v3 to create an SVG container, apply linear scales, and render axes via `d3.axisBottom` and `d3.axisLeft`. The chart is embedded within a React application, though the code shown only initializes the SVG and axes without adding any data points.

LLokeyyyy
78% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu
78% match
Loading thumbnail…

Fork of React Starter

This example renders a radial area chart in an SVG using React and D3 v7. It visualizes temperature or similar data over time, with the area’s inner and outer radii scaled by two values (`minmin` and `maxmax`) per date. The chart uses `d3.areaRadial()`, `d3.lineRadial()`, `d3.scaleTime()`, and `d3.scaleLinear()` to map dates to angles and values to radii. It listens to window resize events, recalculating the chart’s dimensions and re-rendering it to remain responsive within its container.

NNarottam Medhora
77% match
Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM
77% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic D3.js chart construction, including SVG creation, linear and logarithmic scales, and band scales for categorical data. It renders rect elements as a bar chart with axis generation using `d3.axisLeft` and `d3.axisBottom`. The code also shows data binding with arrays and JSON objects, plus animated text transitions using `transition().duration()`. Styling includes CSS classes and inline SVG attributes with a yellow background.

KkazGuido
77% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3 starter template with hardcoded date data displayed as two animated SVG rectangles representing time intervals. The visualization uses D3 v7 scales and axes to map time values, with bars animating from zero width to full width over one second using transitions. It also includes time parsing utilities like `utcParse` and `timeParse` to handle date formats, while `axisBottom` and `axisLeft` generate the time-labeled axes. Though the code sets up scales and data, the actual visual output is limited to two green bars without a complete data-binding workflow.

DDaniel Russell-Brain
77% match