Skip to main content
SimilarExport ZIP
100%

C4gt demo 2

✓ Published0🌍 Public
Aarunkumarv1530@gmail.com
Last edited May 22, 2024
Created on May 22, 2024
Forked from C4gt demo

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

C4gt demo

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.

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
85% 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
80% 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
79% 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
78% match
Loading thumbnail…

[2]Plot launch year/month with menus

This interactive scatterplot visualizes space launch records, plotting each launch's month against its year. A dropdown menu filters the x-axis by time period, grouping years into ranges like 1957–1970 or 2009–2020. The y-axis remains fixed to months, with points rendered as small circles. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleBand` for axes, `csv` to load data from a GitHub gist, and React Dropdown for menu controls. Each circle’s tooltip displays the launch year.

TTaylor
77% 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
76% match
Loading thumbnail…

Untitled

A temporal scatterplot displays circles representing entries from a CSV file, each positioned along a time axis based on parsed dates. A draggable slider with a play button animates through the timeline, revealing circles that grow in size upon entry. The visualization uses D3 v4 with SVG rendering, leveraging d3.scaleTime, d3.drag, and d3.csv to handle date parsing, slider interaction, and data loading within a React framework.

NNathanGBIM
75% match