Tom Pearson tomgp

the BBC did a version of Ballard's The Enormous Space called 'Home', i thought it starred keith allen for some reason but it's on youtube and it seems not: https://www.youtube.com/watch?v=Kce94adFCMc

A	B	C	D	E	F
1233	1037	2433	15167	5	33
1430	1161	3134	15956	4	34
1338	1258	2342	15416	1	44
1304	1224	2646	15176	1	29
1524	1478	2426	14601	2	31
1350	1381	2732	15405	3	37
1354	1534	2673	16022	17	36
1375	1394	2144	12426	9	30
1563	1293	2903	14888	7	42

In response to this stack overflow question

This type of chart is also sometimes known as a sector diagram. The most famous example of a similar layout is probaly Florence Nightingale's "coxcomb" diagrams though in her version the sectors aren't stacked, they're all measured form the center and the areas are proportional to values not distances (I was too lazy to calculate those).

NOTE

This isn't a great visualisation as it stands: The data values are proportional to the thickness of the arcs rather than their area giving values appearing later in an array undue visual weight. In order to do a better job you'd need to work out the appropriate area for a given segment then work backwards to determine it's thickness given where it starts (radially speaking). This is left as an excercise for the reader.

	<script src="https://d3js.org/d3.v6.min.js"></script>
	<style>
	svg{border:1px solid black;}
	*{font-family: sans-serif;}
	</style>
	<body>
	<svg width="500" height="500">
	</svg>
	<p>Example of grouped bars where each group has a different number of members</p>
	<p>A response to this question on Stack Overflow: <a href="">d3js grouped bar chart, is this possible?</a></p>

	AtomicNumber,Element,Symbol,AtomicMass,NumberofNeutrons,NumberofProtons,NumberofElectrons,Period,Group,Phase,Radioactive,Natural,Metal,Nonmetal,Metalloid,Type,AtomicRadius,Electronegativity,FirstIonization,Density,MeltingPoint,BoilingPoint,NumberOfIsotopes,Discoverer,Year,SpecificHeat,NumberofShells,NumberofValence
	1,Hydrogen,H,1.007,0,1,1,1,1,gas,,yes,,yes,,Nonmetal,0.79,2.2,13.5984,8.99E-05,14.175,20.28,3,Cavendish,1766,14.304,1,1
	2,Helium,He,4.002,2,2,2,1,18,gas,,yes,,yes,,Noble Gas,0.49,,24.5874,1.79E-04,,4.22,5,Janssen,1868,5.193,1,
	3,Lithium,Li,6.941,4,3,3,2,1,solid,,yes,yes,,,Alkali Metal,2.1,0.98,5.3917,5.34E-01,453.85,1615,5,Arfvedson,1817,3.582,2,1
	4,Beryllium,Be,9.012,5,4,4,2,2,solid,,yes,yes,,,Alkaline Earth Metal,1.4,1.57,9.3227,1.85E+00,1560.15,2742,6,Vaulquelin,1798,1.825,2,2
	5,Boron,B,10.811,6,5,5,2,13,solid,,yes,,,yes,Metalloid,1.2,2.04,8.298,2.34E+00,2573.15,4200,6,Gay-Lussac,1808,1.026,2,3
	6,Carbon,C,12.011,6,6,6,2,14,solid,,yes,,yes,,Nonmetal,0.91,2.55,11.2603,2.27E+00,3948.15,4300,7,Prehi

	<html>
	<link rel="stylesheet" type="text/css" href="style.css">
	<body>
	<header></header>
	<section class="homepage-splash atf-grid">
	<div class="splash__intro">
	<h1>Title of the page</h1>
	<p>Your pier-glass will be minutely and
	multitudinously scratched in all directions</p>
	</div>

	<html>
	<head>
	<style>
	body{
	font-family: sans-serif;
	}

	svg{
	border: 1px solid black;
	cursor: move;

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Snap</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
	</head>
	<body>
	<h1>Redux Snap!</h1>