Skip to main content
SimilarExport ZIP
100%

badge

✓ Published0🌍 Public
ZZhengyan Yu
Last edited Oct 1, 2017
Created on Aug 31, 2017

Each row of the CSV file becomes a small circle, arranged in rows by job and animated with a sine wave to give the impression of flowing data. The circles are colored by emotion value using a d3.scaleOrdinal range, and hovering highlights a circle with a black stroke. A title is also rendered as text, and extra small grey circles appear when the weather column is 1. The visualization is built with D3 v4, rendering in SVG.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Unconf Badge

A black canvas displays an animated cluster of concentric, rotating square outlines that continuously enlarge and shift. The visualization updates every four seconds, generating a new set of 60 layered rectangles that scale and rotate around the center, creating a pulsing, geometric badge effect. Built with D3 v4, the code uses `d3.transition` for smooth 4-second animations, `d3.interval` to trigger periodic updates, and SVG `rect` elements with CSS transforms for rotation. Each frame recalculates rectangle positions via scaling and rotation math, producing an evolving spiral-like pattern on a stark black background.

KKevinGutowski
74% match
Loading thumbnail…

D3 Example

This scatterplot shows a small set of pink circles positioned within a 250×250 SVG canvas, with a large yellow title in the Jua font above it. The visualization reads data from a remote CSV file hosted on GitHub, parsing each row with `d3.csv` and passing the parsed objects to a custom function named `a_name`. That function uses the D3.js library (version 3.5.5) to bind data to circles, appending new circles, updating their `cx` and `cy` attributes based on the `x` and `y` values from the data, and removing any circles for removed records. The rendering is done via SVG, and the circle fill color and text styling are defined in the page’s CSS.

PPabloDA
71% match
Loading thumbnail…

D3 Example

This scatterplot shows a small set of pink circles positioned within a 250×250 SVG canvas, with a large yellow title in the Jua font above it. The visualization reads data from a remote CSV file hosted on GitHub, parsing each row with `d3.csv` and passing the parsed objects to a custom function named `a_name`. That function uses the D3.js library (version 3.5.5) to bind data to circles, appending new circles, updating their `cx` and `cy` attributes based on the `x` and `y` values from the data, and removing any circles for removed records. The rendering is done via SVG, and the circle fill color and text styling are defined in the page’s CSS.

PPabloDA
71% match
Loading thumbnail…

test

This radar chart visualization displays multiple data points across seven axes (A through G), with each colored polygon representing a distinct row from the CSV data. The code builds the chart using D3 v5’s `scaleLinear` for radial positioning and `d3.line` for connecting coordinate points, rendering both filled and stroked paths via SVG. The fixed dataset includes five records with numeric feature values, imported asynchronously through `csv()`. The visualization emphasizes comparative shapes within a circular coordinate system, using a consistent color palette for each data series.

Kkkwyoung
71% match
Loading thumbnail…

Data Visualization

A stylized SVG diagram of a branching organic structure is rendered with dark, blurred strokes and colored ellipses, overlaying a white background. The visualization uses D3.js v7 to load and summarize a CSV dataset, displaying the file size in kilobytes, row count, and column count in a text element. The SVG paths and shapes are static, while the data summary is generated dynamically via the `d3.csv` and `d3.csvFormat` APIs, showing how D3 can combine declarative SVG graphics with data-driven text output.

Hharika-1929
71% match
Loading thumbnail…

Data Visualizer

This example displays a static SVG image of a salary-themed graphic alongside a text summary of a remote CSV dataset. The page uses D3 v7 to fetch the data via `d3.csv`, then formats and inserts a message showing file size in kilobytes, row count, and column count into a `<pre>` element. The SVG employs an `<image>` element with `xlink:href` to embed the external image, styled with grayscale and border effects. The dataset is loaded from a GitHub Gist URL, and the code uses `d3.csvFormat` to calculate the file size.

GGogineni44
70% match
Loading thumbnail…

Exploración1

This example visualizes a dataset of yearly counts as a circular bubble chart, where each circle’s size encodes a numeric value and its color represents a category derived from the data’s ID. The visualization uses D3.js v5 to load a CSV file with `d3.csv`, then applies the `d3.pack` layout to compute circle positions and radii, with `d3.hierarchy` structuring the data. Each leaf node is drawn as an SVG `<circle>` with a fill color from `d3.scaleOrdinal(d3.schemeCategory20c)`, and text labels are added with clipping paths to keep them inside the circles. The chart also includes tooltips via `<title>` elements showing the exact value for each circle.

663anp3ca
70% match
Loading thumbnail…

Loading CSV Data with D3

This example displays a static SVG logo for HeroScore, a poker-related social influence rating, alongside a note that the top 100 players are available for exploration. The page loads a CSV file containing player statistics using D3’s `d3.csv` method, which parses the data into an array of JSON objects and logs them to the browser console for verification. The visualization itself relies on hardcoded SVG shapes—circles, a path, and text—rendered with D3 v3, and does not dynamically bind the CSV data to any visual elements.

CCatLeal
70% match