3/5 via Zoom!

Martin Krzywinski

Fritz Lekschas

https://peax.lekschas.de/

3/7 via Zoom!

https://event.sdu.dk/eurovis

https://pacificvis.github.io/pvis2024/

https://ieeevis.org

https://ieeexplore.ieee.org/xpl/RecentIssue.jsp?punumber=2945

To ensure the Integrity of a graphic, its Lie Factor should have a value between 0.95 and 1.05.

((172 - 138) / 138)
------------------
((4500000 - 2000000) / 2000000)

0.198

https://medium.com/@purohitpraveen/data-vizualization-why-3d-charts-are-a-terrible-idea-32657fbb928e

3D plots can lead to occlusion and confusion

and these are ugly colors!!

https://eagereyes.org/

today or next time??

The Vitruvian Man

Coxcomb chart or polar area diagram, very popular today

https://thoughtbot.com/blog/analyzing-minards-visualization-of-napoleons-1812-march

First example of chronophotography

https://www.linkedin.com/feed/update/urn:li:activity:7168851251013615618

https://cs617.org/assignments/03/

Due Monday 3/4 !

<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>

<!DOCTYPE html>
<html>
<head>
    
  <style>
    body {
      color: white;
      background-color: black;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <svg>

    <circle cx="530" cy="80" r="50" fill="cyan" stroke="cyan" stroke-width="3"></circle>

    <circle cx="100" cy="50" r="10" fill="#ff0000" stroke="#fff" stroke-width="2"></circle>

    <rect x="260" y="25" width="120" height="60" fill="hotpink"></rect>

    <g transform="translate(200, 300)">
      <rect x="0" y="0" width="60" height="60" fill="transparent"  stroke="yellow" />
      <text x="0" y="85" fill='white'>hello :)</text>
    </g>

    <path d="M 0,20 L 150,150 L 300,100 L 450,20 L 600,130" fill="none" stroke="lightgreen" stroke-width="3"></path>

  </svg>
</body>
</html>

https://gist.github.com/haehn/b947bd0198b7ea521cd392b9be1250c9

Homework

Create a new circle every second until 100 randomly positioned circles are on the screen with D3!

<!DOCTYPE html>
<html>
<head>
    
  <style>
    body {
      color: white;
      background-color: black;
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding: 0px;
      margin: 0px;
    }

    svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>

  window.onload = function() {


    
    s = d3.select('#s');

    setInterval(function() {

      s.append('circle')
        .attr('cx', 1000*Math.random())
        .attr('cy', 1000*Math.random())
        .attr('r', 100*Math.random())
        .attr('fill', 'hotpink');

    }, 100);


      // s = document.getElementById('s');

      // c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      // c.setAttribute('r', 100*Math.random());
      // c.setAttribute('cx', 1000*Math.random());
      // c.setAttribute('cy', 1000*Math.random());
      // c.setAttribute('fill', 'hotpink');

      // s.appendChild(c);

    }

  </script>

</head>
<body>
  <svg id='s'>
  </svg>
</body>
</html>

Homework