Skip to main content
SimilarExport ZIP
100%

Digital Firm - Wiki

✓ Published0🌍 Public
Lloicvdk
Last edited Dec 11, 2020
Created on Dec 11, 2020

This visualization displays a scatter plot of 100 random data points, mapping x and y values to axes labeled "Time (year)" and "Donker Drunk." It animates circles from a central point to their final positions using D3 transitions. The chart includes styled axes, tick marks, and labels, and the code leverages D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` APIs within a React framework, rendering to SVG.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Digital Firm - Wiki

This example shows a horizontal bar chart ranking the six most populous countries by population, with animated bars that expand in width over one second. The visualization uses React and D3 v5, employing `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes. Bars are rendered as SVG rectangles with a flip transform, while transitions animate their growth. Population values are formatted using D3’s `format` with a custom tick formatter that replaces gigabyte suffixes with billions. The chart also includes axis labels, gridlines, and a title, with styling applied via CSS.

Lloicvdk
78% match
Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar
73% match
Loading thumbnail…

Animated Bars

This example animates a scatter plot where each point transitions from a shared origin to its final position, revealing the distribution of a generated dataset. The data is computed in the browser, creating a sequence of 851 points using a greatest common denominator algorithm. Built with React and D3 v5, the visualization uses SVG circles rendered through a custom `Mark` component. Transitions are handled by D3's imperative API via `d3.select` and the `.transition()` method, animating the `cx` and `cy` attributes with a per-point delay to create a cascading effect.

WWill Carter
73% 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
Loading thumbnail…

D3: Transitioning points to randomized values

A scatterplot displays 50 randomly generated points, each shifting to new random coordinates when the user clicks on the text. The visualization updates the positions of existing circles without adding or removing elements, using a smooth 1000-millisecond transition. The code builds the chart with d3.scaleLinear for the x and y axes, d3.axisBottom and d3.axisLeft for the ticks, and binds the data to SVG circle elements. The click handler regenerates the dataset, rescales the domains, and calls transition().attr() on the selected circles to animate the movement.

深深度碎片
72% match
Loading thumbnail…

timeline

This example displays a scatterplot of 50 randomly generated data points, with circles positioned on an SVG canvas using x and y scales. The visualization includes formatted percentage axes on both the bottom and left sides, while circle radius encodes the y-value through a separate linear scale. The code uses d3.scale.linear for coordinate mapping, d3.svg.axis for axis generation with tick formatting via d3.format, and d3.select to append SVG elements, demonstrating a simple D3 v7 workflow with a dynamically created dataset.

MManjunath
72% match
Loading thumbnail…

HTML Starter

This visualization generates 50 random data points and renders them as circles in a scatterplot using SVG. It demonstrates a minimal HTML setup with D3 v6 and React, showing how to create axes, scales, and dynamic circle sizing based on data values. The code uses d3-scaleLinear, d3-scaleSqrt, d3.axisBottom, and d3.axisLeft to map random coordinates and apply a square-root scale for circle radii. Styling is applied through a separate CSS file, and the example serves as a starting template for more complex visualizations.

SST-commits
72% match
Loading thumbnail…

Untitled

This interactive scatter plot displays the relationship between annualized standard deviation (x-axis) and annualized return (y-axis) for a dataset loaded via `d3.csv`. Each circle represents a data point, colored with `d3.scale.category20`, and features an SVG `<title>` tooltip showing the variable name and both metrics as percentages. Hovering triggers a smooth `d3.transition` that enlarges the circle and thickens its stroke. The visualization uses `d3.svg.axis` for both axes, with formatted tick labels and clear axis titles.

Kkirangithub23
71% match