Today!

4:30-5:15 M03-721 (WebLab)

https://www.eren-kizildag.com/

point-and-click

https://flourish.studio/

https://www.datawrapper.de/

https://www.rawgraphs.io/

https://www.tableau.com

https://powerbi.com/

code-driven

https://vega.github.io/

https://d3js.org/

https://www.highcharts.com/

https://plotly.com

https://matplotlib.org/

https://chartjs.org

3/5 via Zoom!

Martin Krzywinski

https://observablehq.com/@mbostock

https://www.washingtonpost.com/graphics/politics/2016-election/trump-charts/

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://pudding.cool/

https://www.hsph.harvard.edu/event/tackling-the-loneliness-epidemic-a-qa-with-sen-chris-murphy/?utm_source=newsletter&utm_medium=email&utm_campaign=&utm_content=haa_ade__2/25/2024

<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