Daniel Haehn PRO
Hi, I am a biomedical imaging and visualization researcher who investigates how computational methods can accelerate biological and medical research.
Edward Gaibor
aka The Discord King
point-and-click
code-driven
"A Thousand Fibers Connect Us"
Chord Diagram
Jen Lowe, WikiViz Winner 2011
Homework
Create a minimal D3.js linechart!
<html>
<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg id='s' width="600" height="400"></svg>
<script>
// create data
var data = [{x: 0, y: 20},
{x: 150, y: 150},
{x: 300, y: 100},
{x: 450, y: 20},
{x: 600, y: 130}]
// grab svg
var svg = d3.select("svg");
// prepare a helper function
var lineFunc = d3.line()
.x( function(d) { return d.x } )
.y( function(d) { return d.y } )
// Add the path using this helper function
svg.append('path')
.attr('d', lineFunc(data))
.attr('stroke', 'black')
.attr('fill', 'none');
</script>
</body>
</html>
Homework
Create a new circle every second until 100 randomly positioned circles are on the screen.
Homework
Create a new circle every second until 100 randomly positioned circles are on the screen with D3!
CS617 Lecture 7
By Daniel Haehn
CS617 Lecture 7
Slides for CS617 VISUALIZING.BOSTON - See https://cs617.org!
