MRI and Alzheimers Vis

This is a dataset listing anonymized patients who received an MRI from the Kaggle dataset MRI and Alzheimers, which was original gathered from the Open Access Series of Imaging Studies (OASIS) project. This set actually includes two data files, a cross sectional set, including patients of diverse ages, and a longitudinal set of older patients which have been classified with as demented or non-demented. This block incluedes both datasets, however the summary statistics display are shown for only the longitudinal data set.

forked from curran's block: Data Table Summary

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MRI and Alzheimers</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      body {
        margin: 0px;
      }
      body svg {
        background-color: #000000;
      }
      .tick text {
        fill: white;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .tick line {
        stroke: #3d3d3d;
      }
      .axis-label {
        fill: white;
        font-size: 16pt;
        font-family: sans-serif;
      }
      .legend-label {
        fill: white;
        font-size: 12pt;
        font-family: sans-serif;        
      }
      .legend-text {
        fill: white;
        font-size: 8pt;
        font-family: sans-serif;        
      }
      .marker {
        opacity: 0.75;
      }

</style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
     	
			const xValue = d => d.Age;
      const xLabel = 'Age';
      const yValue = d => d.nWBV;
      const yLabel = 'Brain Volume (normalized)';
      const margin = { left: 60, right: 120, top: 90, bottom: 30 };

const xTicks = 8;
      const yTicks = 5;
      
      const colorValue = d => d["CDR"];
      const colorLabel = "Dementia";
      
      const sizeValue = d => d["Educ"];
      const sizeLabel = "Education";
      
      const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

const legendG = g.append('g')
          .attr('transform', `translate(20, ${innerHeight - 100})`);
      
      function drawLegend() {
      
        legendG.append('rect')
          .attr('x', -50)
          .attr('y', -50)
          .attr('width', 350)
          .attr('height', 300)
          .attr('fill', 'black');
        
        legendG.append('line')
          .attr('x1', -20)
          .attr('y1', -12)
          .attr('x2', 260)
          .attr('y2', -12)
          .attr('stroke', 'white');
        
        const colorLegendG = legendG.append('g')
            .attr('transform', `translate(160, 0)`);

const sizeLegendG = legendG.append('g')
            .attr('transform', `translate(0, 0)`);
        
        colorLegendG.append('text')
            .attr('class', 'legend-label')
            .attr('x', -2)
            .attr('y', -18)
            .text(colorLabel);

sizeLegendG.append('text')
            .attr('class', 'legend-label')
            .attr('x', -2)
            .attr('y', -18)
            .text(sizeLabel);
        
        for(i in colorScale.range()) {
          const label = colorScale.domain()[i];
          const color = colorScale.range()[i];          
          const area = 150;
          var item = circleMark(colorLegendG, 10, i*18, area, color);
          if(i == 0) { ghostMark(item, color); }
          colorLegendG.append('text')
            .attr('x', 25)
            .attr('y', i*18 + 3)
            .attr('class', 'legend-text')
            .text(label);        
        }

for(i in sizeScale.range()) {
          const label = sizeScale.domain()[i];
          const area = sizeScale.range()[i];
          const color = '#01665e';
          var item1 = squareMark(sizeLegendG, 10, i*18, area, color);
          var item2 = circleMark(sizeLegendG, 30, i*18, area, color);
          if(i == 0) {
            ghostMark(item1, color);
            ghostMark(item2, color);
          }
          sizeLegendG.append('text')
            .attr('x', 50)
            .attr('y', i*18 + 3)
            .attr('class', 'legend-text')
            .text(label);
        }
        sizeLegendG
          .append('text')
            .attr('x', 5)
            .attr('y', i*18 + 21)
            .attr('class', 'legend-text')
            .text('M');
        sizeLegendG
          .append('text')
            .attr('x', 27)
            .attr('y', i*18 + 21)
            .attr('class', 'legend-text')
            .text('F');
      }
        
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', -(innerHeight + 50))
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerHeight / 2)
          .attr('y', -innerWidth - 70)
          .attr('transform', `rotate(90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      
      const colorScale = d3.scaleOrdinal()
          .domain(["Unassessed", "None", "Very Mild", "Mild", "Moderate"])
          .range(["#01665e", "#5ab4ac", "#f6e8c3", "#d8b365", "#8c510a"]);

const sizeScale = d3.scaleOrdinal()
          .domain(["Unknown", "< High School", "High School Grad", "Some College", "College Grad", "Beyond College"])
          .range([50, 25, 50, 100, 150, 200]);     
                  
      // customize appearance of axis
      function customAxis(g, axis) {
        g.call(axis);
        g.select(".domain").remove();
      }
           
      const xAxis = d3.axisTop()
        .scale(xScale)
        .ticks(xTicks)
        .tickPadding(15)
        .tickSize(innerHeight);

const yAxis = d3.axisRight()
        .scale(yScale)
        .ticks(yTicks)
        .tickPadding(15)
        .tickSize(innerWidth);

function circleMark(g, cx, cy, area, color) {
        const r = Math.sqrt(area / Math.PI);
        return g.append("circle")
          .attr('cx', cx)
          .attr('cy', cy)
          .attr('r', r)
          .attr('fill', color)
          .attr('class', 'marker');
      }

function squareMark(g, cx, cy, area, color) {
        const r = Math.sqrt(area / 4);
        return g.append("rect")
          .attr('x', cx - r)
          .attr('y', cy - r)
          .attr('width', 2*r)
          .attr('height', 2*r)
          .attr('fill', color)
          .attr('class', 'marker');
      }
      
      function ghostMark(item, color) {
         return item
             .attr('fill', 'None')
             .attr('stroke', color)
             .attr('stroke-width', 1.5);
      }
      
      d3.csv('oasis_cross-sectional.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice(xTicks);

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice(yTicks);

g.selectAll('circle').data(data)
          .enter().each(function(d) {
            var elem = d3.select(this);
          	var cx = xScale(xValue(d));
            var cy = yScale(yValue(d));
            var area = sizeScale(sizeValue(d));
            var color = colorScale(colorValue(d));
          
            var item;
          
            if(d["M/F"] == "M") {
              item = squareMark(elem, cx, cy, area, color);
            } else {
              item = circleMark(elem, cx, cy, area, color);
            }
          
            if(sizeValue(d) == "Unknown") {
              ghostMark(item, color);
            }
          
        })        
        
        xAxisG.call(g => customAxis(g, xAxis));
        yAxisG.call(g => customAxis(g, yAxis));

});
      
      drawLegend();

</script>

</body>
</html>

https://d3js.org/d3.v4.min.js