Elements of a reformed academic turned data scientist

Redesigning Life & Career

It's suprising when an idea pops up unexpectedly. This one came after an insightful Women in Data Science panel discussion as part of #WiDS2018, that also happened to coincide with the end of my Human Centered Design course.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
<meta charset="utf-8">
	
  
  
  	<title>Redesigning my life and career</title>
	  <meta name="author" content="Arna Karick">
	  <meta name="description" content="Data Science - Design - Visual representation">
	  <meta name="keywords" content="data, visualization, visualisation, data visualization">
  
    
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700|Raleway" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Cormorant:300,400" rel="stylesheet">

<link href="style.css" rel="stylesheet">
              
		
		<script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>

</head>

<body>
  
 <div id="main">
 	<h1> Redesigning Life &amp; Career </h1>
  <p>A visual representation of how the past two years have helped shape my future career</p>
  </div>

var width = 800,
    height = 500,
    radius = 230;

var color = d3.scale.category20c();

var partition = d3.layout.partition()
    .size([2 * Math.PI, radius])
    .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.json("readme.json", function(error, root) {
  if (error) throw error;

path = svg.data([root]).selectAll("path")
      .data(partition.nodes)
    .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .on("click", magnify)
      .each(stash);
});

// Distort the specified node to 80% of its parent.
function magnify(node) {
  if (parent = node.parent) {
    var parent,
        x = parent.x,
        k = .8;
    parent.children.forEach(function(sibling) {
      x += reposition(sibling, x, sibling === node
          ? parent.dx * k / node.value
          : parent.dx * (1 - k) / (parent.value - node.value));
    });
  } else {
    reposition(node, 0, node.dx / node.value);
  }

path.transition()
      .duration(750)
      .attrTween("d", arcTween);
}

// Recursively reposition the node at position x with scale k.
function reposition(node, x, k) {
  node.x = x;
  if (node.children && (n = node.children.length)) {
    var i = -1, n;
    while (++i < n) x += reposition(node.children[i], x, k);
  }
  return node.dx = node.value * k;
}

// Stash the old values for transition.
function stash(d) {
  d.x0 = d.x;
  d.dx0 = d.dx;
}

// Interpolate the arcs in data space.
function arcTween(a) {
  var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
  return function(t) {
    var b = i(t);
    a.x0 = b.x;
    a.dx0 = b.dx;
    return arc(b);
  };
}

</script>

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

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