Skip to content

Instantly share code, notes, and snippets.

@tomgp
tomgp / index.html
Created April 30, 2021 07:49
grouped bars
<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>
We can make this file beautiful and searchable if this error is corrected: It looks like row 7 should actually have 28 columns, instead of 24. in line 6.
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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@tomgp
tomgp / africa-110m-sovereignty.json
Created August 7, 2019 09:43
a map of African nations
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@tomgp
tomgp / index.html
Last active June 13, 2019 13:01
grid layouts
<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>
@tomgp
tomgp / index.html
Last active October 7, 2022 01:37
2d Slider
<html>
<head>
<style>
body{
font-family: sans-serif;
}
svg{
border: 1px solid black;
cursor: move;
@tomgp
tomgp / data.csv
Created October 18, 2018 13:12
Stacked and stepped area chart
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
@tomgp
tomgp / README.md
Last active July 6, 2018 14:49
Radial stack layout

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.

@tomgp
tomgp / step1.html
Last active May 14, 2018 15:52
redux tutorial steps
<!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>