Skip to main content
SimilarExport ZIP
100%

random_generator_EC

✓ Published0🌍 Public
BBenHeubl
Last edited Jun 21, 2016
Created on Jun 20, 2016

This interactive visualization presents annotated news headlines about European Union myths and facts, sourced from a TSV dataset. Users click through randomized articles, each displayed with its narrative, age, and newspaper attribution. The animation showcases a cycling selection of stories with smooth transitions. Built with D3.js, it loads and parses tab-separated data, then uses weighted random selection to choose which article to display next, with click-triggered updates for navigation.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

random generator

Ten randomly positioned orange circles on a grey scatter plot animate to new coordinates whenever a “change data” button is clicked. The circles pulse by expanding and contracting their radius, and their fill color briefly shifts to red during the transition. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.randomUniform` for generation, and chained `transition` calls with an `easeSin` easing function. All rendering is SVG with animated updates.

Bbart
63% match
Loading thumbnail…

Untitled

This visualization explores the relationships and spatial distribution of European countries through an interactive force-directed network. Nodes representing individual countries are positioned using d3.forceSimulation, while a static map overlay rendered with d3.geoPath provides geographic context. The code uses U.S. Census Bureau data for country boundaries and highlights connections between states, with color intensity reflecting the strength of ties. Hovering over a node triggers a transition.attrTween that smoothly scales its size and displays the country name, offering a clear bridge between abstract network topology and real-world geography.

Llfting96
60% match
Loading thumbnail…

Document

The visualization generates a random sequence of twenty charts, cycling through line charts, pie charts, and bar charts. Each line chart displays four smoothed monotone curves with colored dots, while the pie chart and bar chart render categorical and time-based data. Built with D3 v4, the code uses `d3.line`, `d3.arc`, and `d3.axisBottom`/`d3.axisLeft` to produce SVG output. Data is procedurally generated using `d3.randomUniform` and `d3.range`, with each chart styled via inline attributes and CSS classes.

DDabbar
60% match
Loading thumbnail…

wheels on wheels on wheels

This interactive visualization animates layered rotating wheels, tracing complex rosette patterns onto a black canvas. Each wheel’s radius, rotation direction, and phasing can be adjusted via the dat.GUI controller, while a random mode continuously generates new designs. The SVG paths, stroked in white with the third wheel’s position marked in red, update in real time. Built with D3.js for rendering and dat.GUI for controls, it explores cyclic motion and symmetry, allowing users to stop randomization and fine-tune parameters to see the pattern evolve dynamically.

KKcnarf
60% match
Loading thumbnail…

Gist 89566fbfb20d81fd7fe9

This interactive line chart tracks the exchange rates of various global currencies against the euro, with a dropdown menu to switch between different currency selections. The visualization displays a time series of daily rates, augmented by a red exponential moving average line that reveals underlying trends, while a crosshair with a trackball follows the mouse to show precise values for any date and rate pair. The chart is rendered as an SVG using the D3.js library, with grid lines, axis labels, and a legend. The code also incorporates the d3fc framework for chart components and a custom area chart beneath the line to emphasize the rate’s magnitude over time.

BBenHeubl
60% match
Loading thumbnail…

EuroVis 2019 Twitter interaction network

This interactive node-link diagram maps the Twitter interaction network around the EuroVis 2019 conference, where each node is a user and links represent retweets, replies, or quotes between them. Node color intensity reflects tweet activity, with darker nodes indicating users who tweeted more using the #EuroVis hashtag. The visualization combines two force-directed layout algorithms: it first applies Random Vertex Sampling from d3.forceManyBodySampled() for a fast initial layout, then refines it with 10 iterations of the Barnes-Hut simulation from d3.forceManyBody(). Rendered with D3 v5 as an SVG, this example highlights a hybrid approach to scalable network layout. Data is sourced from a gist by FrissAnalytics and is available under a BSD-3-Clause license.

FFrissAnalytics
60% match
Loading thumbnail…

Reusable scatter plot with axis labels and tooltip - TN

A reusable scatter plot displays EU countries by urban population percentage and fertility rate, with axis labels and hover tooltips showing country names. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and a custom `scatterPlot` function with getter-setter methods for configurability. SVG circles render the data from a CSV of 2022 EU population statistics, while tooltips appear via D3 selection events.

TToly
59% match
Loading thumbnail…

gcd-viz

The visualization animates the Euclidean algorithm as it computes the greatest common divisor of two random integers, revealing the recursive subtraction steps as nested square blocks. It shows how each division step’s quotient and remainder tile a rectangle, with the final GCD emerging from the arranged squares. The code uses D3.js with SVG and transitions to fade in colored square groups sequentially, while text spans display the intermediate division equations. Random inputs are regenerated after the animation completes, looping the process. The `d3.range` and `transition.delay` orchestrate the cascading reveal, and the colors cycle through a palette per step.

11wheel
59% match