Skip to main content
SimilarExport ZIP
100%

ViewCircles

✓ Published0🌍 Public
KKondreddy Saikiran reddy
Last edited Apr 25, 2024
Created on Apr 24, 2024
Forked from Barchart2

This example visualizes groundnut production by state using a filtered bar chart of circles, with year-based checkbox filtering to adjust the displayed data. Built with D3 v7, it loads CSV data from a GitHub gist and uses D3’s `csv`, `scaleBand`, `scaleLinear`, `scaleOrdinal`, `rollup`, and `sum` APIs to aggregate and render the SVG output. A tooltip appears on mouseover, and the chart updates dynamically by removing and redrawing circles based on the selected years.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

ViewCircles

ViewCircles visualizes state-wise rice production in India as an interactive bar chart. The chart sums district-level data from a CSV file using `d3.rollup` and `d3.sum`, mapping states to bar heights with `d3.scaleBand` and `d3.scaleLinear`. Hovering over a bar triggers a tooltip showing the total production for that state. The SVG rendering uses `d3.axisBottom` and `d3.axisLeft`, with a `d3.schemeCategory10` color scale and mouse event handlers for interactivity.

KKondreddy Saikiran reddy
88% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example visualizes the relationship between state-level data from 2020 and 2024 using a reusable scatter plot built with D3 v6. It shows how individual data points map from the x-axis (2020 values) to the y-axis (2024 values) through a clean SVG rendering. The code employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 to compute scales and draw axes, while circles are joined to data via `selection.selectAll('circle').data().join()`. The underlying dataset is loaded as CSV from a remote URL, and the chart adapts to the viewport size.

Ppmbhupathibalu@gmail.com
74% match
Loading thumbnail…

Clickable Circles from CSV

This example displays a set of colored circles loaded from a CSV file, each positioned and sized by its own coordinates and radius. Hovering over a circle highlights it with a black stroke, using a React state to track the selected circle's ID. The visualization is rendered with D3 v7's `select` and `csv` APIs, alongside React's `useEffect` and `useState` hooks, with circle attributes and mouse events applied via `selection.join`.

223100098@lums.edu.pk
74% match
Loading thumbnail…

Clickable Circles from CSV

This example displays a scatterplot of colored circles loaded from a CSV file, where clicking a circle highlights it with a black outline. Built with React and D3 v7, it uses the `csv` function to parse data and the `select` API with a `join` operation to bind circle elements to each data row. The `selectedId` state triggers a re-render, applying the stroke style via a conditional attribute.

CCurran Kelleher
73% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates the D3 general update pattern for rendering circles whose positions, radii, and colors are defined by an explicit data array. Using `select`, `data()`, and `join`, it creates an SVG element sized to its container and binds circle attributes like `cx`, `cy`, `r`, and `fill` through method chaining. The visualization also includes an exploratory data analysis view that plots rice production trends from a CSV dataset using D3 scales, axes, and line generators.

CCowan Kanga Wekesa
73% match
Loading thumbnail…

Circles

This visualization demonstrates a simple D3.js approach to creating SVG circles. Using the d3.select and join API, it establishes an SVG canvas that fills its container and renders a single circle with a steelblue fill at a fixed position. The code includes commented-out data arrays containing coordinates, radii, and colors, showing an alternative path for drawing multiple circles from structured data. The example focuses on the fundamental pattern of selecting, appending, and styling SVG elements.

Nnitinramagiri1@gmail.com
72% match
Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo
72% match
Loading thumbnail…

Circles with D3 Cleaned Up

Fourteen colored circles, each with a unique position, radius, and color, are rendered on a 960×500 SVG canvas. The visualization demonstrates a clean, data-driven approach to drawing circles using D3 v7. The code binds an array of circle data to SVG circle elements using `selectAll`, `data`, and `join`, setting the `cx`, `cy`, `r`, and `fill` attributes directly from each data object. The data is defined in a separate module and the visualization logic is contained in a reusable `viz` function, making the example modular and easy to extend.

CCurran Kelleher
72% match