C4gt demo

100%

✓ Published3🌍 Public

Last edited May 22, 2024

Created on May 22, 2024

Forked from C4gt

This interactive scatter plot displays state-level agricultural data by month and year, allowing users to select any two attributes from the dataset for the x- and y-axes via dropdown menus. The visualization uses React with hooks for state management, D3.js scales (scaleLinear) and extent functions for data mapping, and SVG rendering with React components for axes and marks. Data is loaded asynchronously from a CSV URL using d3.csv, with numeric conversions applied to all value columns before plotting 7-pixel radius circles.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

C4gt demo 2

This interactive scatter plot visualizes the relationship between a selected year and a chosen month's measurements. Two dropdown menus allow the user to switch which numeric attributes are plotted on the x- and y-axes, using data loaded from a CSV file via `d3.csv`. The plot is rendered with React and SVG, utilizing `d3.scaleLinear` for axes and custom components `AxisBottom`, `AxisLeft`, and `Marks` to draw ticks and circular points.

Aarunkumarv1530@gmail.com

91% match

Loading thumbnail…

C4gt demo 2

This interactive scatter plot displays district-level data across Indian states, allowing users to compare monthly rainfall values against yearly averages. Built with React and D3 v5, the visualization renders SVG circles through reusable AxisBottom, AxisLeft, and Marks components, with x and y scales created using scaleLinear. Users select attributes via react-dropdown menus, while D3’s csv loader fetches data from a GitHub gist, converting string values to numbers. Hovering reveals formatted values through SVG title elements, with a Polypoins-styled interface and compact number formatting for axis labels.

Aarunkumarv1530@gmail.com

88% match

Loading thumbnail…

Fork of C4gt demo

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting both the X and Y attributes from dropdown menus. Built with React, D3 v5, and the react-dropdown library, the visualization renders as an SVG with reusable AxisBottom, AxisLeft, and Marks components. D3’s scaleLinear and extent functions compute the scales, and the marks include native SVG `<title>` tooltips. Users switch attributes via React state updates, triggering a re-render of the axes and circles.

Aarunkumarv1530@gmail.com

82% match

Loading thumbnail…

C4gt

A polished scatter plot of the Iris Dataset, built with React and D3, allows interactive exploration of relationships between four numeric flower measurements. Users select the x- and y-axis attributes from dropdown menus, updating the visualization dynamically. SVG circles render the data points, with axis labels and tick formatting handled by custom React components using D3 scales and the `format` function. The visualization uses `d3.csv` to load the data and `scaleLinear` with `extent` for scaling.

Aarunkumarv1530@gmail.com

81% match

Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini

75% match

Loading thumbnail…

3D Scatter plot using D3.js

This example presents an interactive 3D scatter plot built with Plotly.js and D3.js, visualizing agricultural crop data. It renders two marker traces from a CSV file: one mapping crop type, production, and district, the other correlating crop year, season, and area. The code uses `d3.csv` to load the dataset and `Plotly.newPlot` to draw the scatter3d traces within a DIV element. The visualization employs 3D markers with custom opacity and line styling to distinguish the two datasets, with the layout margins set to zero.

Ggayathrikavya

75% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, mapping the chosen columns to positions of SVG circles. Axis components render ticks and labels, while the `Marks` component adds tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

SShuyu Zheng

74% match

Loading thumbnail…

310712009

This interactive scatter plot of the Iris Dataset lets users explore relationships between measurements by selecting axes from dropdown menus. Built with React and D3 v5, it renders SVG circles with opacity, using `d3.scalePoint` for positioning and `d3.axisBottom`/`d3.axisLeft` for labeled ticks. The data is loaded via `d3.csv` from a remote gist, with axis labels dynamically updated based on menu selections.

JJoshuoYang

74% match