Skip to main content
SimilarExport ZIP
100%

tsk8

✓ Published0🌍 Public
Jjyothirmaijyothi2017@gmail.com
Last edited Apr 14, 2024
Created on Apr 14, 2024
Forked from Hello VizHub

This visualization displays the reigns of British monarchs from 1066 to 2024 as a bubble chart, with each circle representing a monarch positioned along a timeline and colored according to their royal house (Windsor, Hanover, Stuart, etc.). The chart uses D3 v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and `selectAll` with `enter().append('circle')` to render the SVG bubbles from a hardcoded data array containing monarch names, reign dates, and house affiliations.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Family Tree

A family tree of British royals visualizes lineage from George through Elizabeth VI and Margaret to their descendants, with colored nodes indicating each person's generation. The D3 v3 tree layout arranges the hierarchy, while SVG rectangles render each family member and labeled links display relationships like "Son" or "Daughter." Built with D3 and jQuery, the visualization supports zooming and panning via `d3.behavior.zoom`, and uses `foreignObject` for text wrapping, with interactive hover tooltips and click-based node collapsing driven by the `update` function referencing the `data.json` source.

CCH SAMPATH
70% match
Loading thumbnail…

ICE8 - Family Tree

This example shows an interactive family tree for the British royal family, with nodes representing individuals like King Charles, William, and Harry, and colored rectangles indicating different generations or types. The visualization uses D3.js v3 with a tree layout and SVG rendering, featuring expandable/collapsible nodes, tooltips, and animated transitions. It loads hierarchical JSON data and renders custom-styled node boxes with colored fills, drop shadows, and arrow-marked links. The code also implements zoom and drag behavior with mouse wheel support, alongside collision detection and a breadth-first traversal to manage node positions and depth-based spacing.

Mmosesimmanuelvemana@my.unt.edu
66% match
Loading thumbnail…

Bubble Chart

This bubble chart displays three data points as red circles, with each bubble’s horizontal position, vertical position, and radius mapped from the `a`, `b`, and `c` fields of the data array via `d3.scaleLinear` ranges. The SVG rendering uses D3 v7’s selection API (`d3.select`, `.enter().append()`) to create the circles, while `d3.axisBottom` and `d3.axisLeft` add labeled x- and y-axes with explicit pixel translations. The static example demonstrates basic D3 scales, SVG circle generation, and axis construction without interaction or animation.

Ssaipaidipalli
64% match
Loading thumbnail…

Untitled

A bubble chart displays countries as circles positioned by GDP per capita (x-axis) and life expectancy (y-axis), with circle size encoding population. Each bubble is colored by continent, drawn as SVG circles using `d3.forceSimulation` with custom forces for positioning. The code loads data from a JSON array and uses `d3-scale-chromatic` for categorical color mapping. Hovering a bubble changes its stroke from white to black via CSS.

JJoker-tr
64% match
Loading thumbnail…

Bubble chart

Six unlabeled circles of varying radii float on a blank SVG canvas, with each bubble’s fill color mapped from its radius via a custom `colourPicker` function. The code uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append `circle` elements, positioning them with fixed `cx` and inverted `cy` values from a hardcoded dataset. The y-axis is flipped by subtracting each `cy` from the chart height. Rendering is pure SVG, with no axes, transitions, or interactivity.

Rremyapk
64% match
Loading thumbnail…

Bubble Chart

A bubble chart encodes hierarchical data as a packed circle layout, with each circle’s area proportional to a numeric value and color representing its top-level package. The visualization uses D3 v4’s `d3.pack` and `d3.hierarchy` to compute the layout, then renders SVG circles and clipped text labels. Data comes from the Flare class hierarchy stored in a CSV file. Hovering reveals the full class name and formatted value via SVG `<title>` elements.

Mmbostock
64% match
Loading thumbnail…

question 4 task 8

This example renders a bubble graph using D3.js (v7), displaying five data points as circles with x, y, and radius values. The visualization uses linear scales for the x-axis, y-axis, and bubble radius, with gridlines and axis labels. The SVG is generated with `d3.select('svg')`, `d3.scaleLinear()`, `d3.axisBottom()`, and `d3.axisLeft()`, and circles are appended via `g.selectAll('circle').data(data).enter().append('circle')`. The data is hardcoded inline, and the figure is styled with custom CSS for fonts and tick elements.

Sskykarthik97@gmail.com
63% match
Loading thumbnail…

Bubble Chart

This bubble chart maps countries’ birth rates to the x-axis and life expectancy to the y-axis, with bubble size scaled by population. The visualization uses D3 v6’s `scaleLinear` for positioning and `scaleSqrt` for radius, while an ordinal color scale distinguishes countries. Each circle is rendered as an SVG element with a dark blue text label, and the chart includes standard `axisBottom` and `axisLeft` axes. The sample dataset is embedded directly in the code, and the visualization is presented in a 700x450 pixel container.

VVenkat-Sumith-Thota
63% match