stevenbeales
12/29/2018 - 6:57 PM

Pharmacovigilance System Organ Classes

index.html
content_copyfile_download
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

// create svg element appended to the document body 
var svg = d3.select("body").append("svg")
  .attr("width",960)
  .attr("height",640);

// array of SOC names in alphabetical order
var soc = [
  "Blood", "Cardiac", "Congenital", "Ear", "Endo",
  "Eye", "Gastrointestinal", "General", "Hepatobiliary", "Immune",
  "Infections", "Injury", "Investigations", "Metabolism", "Musculoskeletal",
  "Neoplasms", "Nervous", "Pregnancy", "Psychiatric", "Renal",
  "Reproductive", "Respiratory", "Skin", "Social", "Surgical", "Vascular"
];

// create colorarray_1 based on the d3 category20c colorscale
var c_20c = d3.scale.category20c();
var colorarray_1 = d3.range(26).map(function (d) {return c_20c(d); });

// create colorarray_2 that has 5 x 5 hex color values based on range in category20c
// one extra (darker) color added per series by linear interpolation
// insert "black" at position 20 of colorarray_2, deleting zero elements
var colorarray_2 = d3.range(25).map(function (d) {
  var c = d3.scale.linear()
    .domain([1, 4])
    .range([c_20c(Math.floor(d / 5) * 4), c_20c(Math.floor(d / 5) * 4 + 3)]);
  return d % 5 === 0 ? c(0) : c_20c(Math.floor(d / 5) * 4 + d % 5 - 1);
});

colorarray_2.splice(20, 0, "black");

// use a function to create palette from color arrays
// in colorarray_2, set textcolor by array index 
function create_palette(array, series) {
  var palette = svg.selectAll(".rect_" + series)
    .data(array)
  .enter().append("g")
    .attr("class","rect_" + series)
    .attr("transform",function (d, i) {return "translate(" + (145 * series) + "," + (i * 20) + ")"; });

  palette.append("rect")
    .attr("width",130)
    .attr("height",19)
    .style("fill",function (d) {return d; });

  palette.append("text")
    .attr("dx",5)
    .attr("dy","1.1em")
    .style("font-family","arial")
    .style("font-size","12px")
    .style("fill", function (d, i) {return series === 0 ? "black" : i % 5 === 0 && i != 25 || i === 21 ? "white" : "black" })
    .text(function (d, i) {return soc[i]; });
}

// call the function for the two color arrays
create_palette(colorarray_1,0);
create_palette(colorarray_2,1);

</script>