JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<svg height="500" width="500"></svg>

CSS

.warrior: { fill: #E46C0A }; 
.rogue: { fill: #000 };
.cleric: { fill: #fff };
.wizard: { fill: #7030A0 };

svg {
    background: white;
}

.node path {
    stroke: black;
}

JavaScript

/* Construct a new pie to represent a dice roll */
var Pie = function(data, target) {
	
	var radius = 30;

    // Create the definition for an arc - each one should always
    // retain equal size to all other segments
	var arc = d3.svg.arc().outerRadius(radius).innerRadius(0);
	var pie = d3.layout.pie().sort(null).value(function(d) { return 1; });

    // Create the pie container
	var g = target.selectAll(".arc")
      			  .data(pie(data.classes || [{}]))
    			  .enter().append("g")
      			  .attr("class", "arc");

    // Add the pies to the visualization
  	g.append("path")
     .attr("d", arc)
     .style("fill", function(d) { 
     	switch(d.data) {
     		case "cleric" : return "#fff";
     		case "rogue": return "#000";
     		case "warrior": return "#E46C0A";
     		case "wizard": return "#7030A0";
     	}

     	switch(data.type) {
     		case "victory": return "yellow";
     		case "fail": return "red";
     	}
	 });

     // Add the labels on top of the nodes
	 target.append("text")
	 	.attr("dx", "-20px")
	 	.attr("dy", "4px")
        .attr("class", "roll-value")
	 	.text(function(d) { return data.values; })
}

let card = {
	title: "Avoid a debt",
    level: 1,
    description: "",
    image: "",
    rolls: [
    	{
        	id: 1,
            type: "roll",
            classes: ["warrior", "rogue", "cleric", "wizard"],
			description: "<b>All</b> roll <=36 to avoid being seen out on the road",
			values: ["<=36"]
        },
        {
        	id: 2,
            type: "roll",
            classes: ["warrior"],
            description: "<b>Warrior</b> roll >=8 to fight off the bailiff",
			values: [">=8"]
        },
        {
			id : 3,
			description: "Success, flee the area without having to pay",
			type: "victory"		
		},
		{
			id : 4,
			description: "Pay 1 GP for every 2 followers you have",
			type: "fail"		
		}
    ],
    links: [
		{ source: 1, target: 3, pass: true },
		{ source: 1, target: 2, pass: false },
		{ source: 2, target: 3, pass:...