saisreearibandi

@saisreearibandi·5 public vizzes

Reusable scatter plot with different symbols

This example presents the Iris dataset as a reusable scatter plot where each species is encoded with a distinct symbol shape. The visualization maps petal width to the x-axis and sepal length to the y-axis, with data points rendered as SVG paths. The code implements a reusable `scatterPlot` function using D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, and `symbol` to generate shapes, while `axisLeft` and `axisBottom` create the axes. The plot is sized to the full window, fetching data from a remote CSV file.

Mar 10, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

The visualization displays the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart. It uses React hooks (useState, useEffect) to fetch data via d3.csv and renders SVG marks as colored rectangles scaled with d3.scaleLinear and d3.scaleBand. Axes are manually drawn with gridlines and labels using SVG elements, with data loaded from a gist URL.

Mar 8, 2023

Loading thumbnail…

ICE5

This example presents metadata about a credit card customer dataset. It displays the dataset’s size in kilobytes, row count, and column count on a webpage overlaid with a credit card background image. The code loads a CSV file using D3 v7’s `d3.csv` method, then computes the size of the formatted data with `d3.csvFormat` and updates the text content of a `<pre>` element. The page is styled with CSS and uses a link to the raw dataset source.

Feb 23, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates how to build an interactive smiley face with D3.js, featuring eyebrows that shift position. The face is rendered as SVG elements, including a green circle for the head, yellow stroke, eyes, and a mouth created using the `d3.arc()` path generator. The code uses `d3.select` to manipulate the DOM, appending groups and shapes with attributes like `cx`, `cy`, and `r`, while positioning elements via transforms. The animation of the eyebrows is implied through the use of adjustable constants like `eyebrowYOffset`.

Feb 9, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js to construct a yellow smiley face from SVG primitives, including circles for the face and eyes, rectangles for eyebrows, and a path for the mouth. The chart demonstrates fundamental DOM manipulation by animating the eyebrow group’s vertical position with chained `transition` calls over four seconds, moving it up and then back to its original offset. Static attributes define the face’s geometry, while the `arc` generator creates the mouth’s curved shape.

Feb 9, 2023