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 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.

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
88% match
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
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
79% match
Loading thumbnail…

scatterplot

This example visualizes the total annual rainfall in India from 1960 to 2017 as an area chart. It aggregates rainfall data across all states for each year, then renders the trend using D3 v7’s `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs. A hover tooltip, powered by `d3.bisector` and `d3.pointer`, displays the exact year and total rainfall value as users move over the chart. The data is loaded via `d3.csv` from a remote GitHub gist, and the visualization is drawn as an SVG.

KKondreddy Saikiran reddy
77% 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
76% match
Loading thumbnail…

Project

This example displays a scatter plot of rainfall (mm) against crop yield (tons per hectare) for three data points, using D3 v7. It loads the D3 library via UNPKG and uses d3.select, d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to render axes and circles in SVG. The chart includes axis labels, margins, and a tooltip style, with hardcoded data rather than fetching from external files. It also demonstrates ES6 module imports, including a local message module, in a separate JavaScript file.

Rrahulnathmukkolla@gmail.com
74% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes average rainfall against average temperature, with each point colored by year (2010-2018) using a color mapping function. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, `scaleLinear` for x and y axes, and `axisLeft`/`axisBottom` to render the axes. Points are drawn as SVG circles with a fixed radius of 5, positioned via the `scaleLinear` ranges, and the chart includes labeled axes for both variables. The rendering is done through direct SVG manipulation in a React environment.

Nnavyasrimeka9@gmail.com
74% 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
73% match