Homework

https://youtu.be/Q9wcvFkWpsM?si=Wfep43Sno1A2PU4j&t=398

1. Favorite projects?

2. Inspiration for the Next Generation?

3. Favorite technologies?

Vidhya Sree Narayanappa

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

From Dual-Axis to Indexed Chart

pandas

['F16', 'Sp17', 'F17', 'Sp18', 'F18', 'Sp19', 'F19', 'Sp20', 'F20', 'Sp21', 'F21', 'Sp22', 'F22', 'Sp23', 'F23']

[1004.0, 953.0, 1085.0, 1005.0, 1145.0, 1042.0, 1171, 1089.0, 1192.0, 1114.0, 1237.0, 1194.0, 1490.0, 1359.0, 1686.0]

[27, 25, 22, 23, 23, 23, 24, 24, 24, 26, 25, 24, 23, 24, 25]

[(value / BASELINE - 1) * 100 for value in data]

https://f1000research.com/posters/1092719

https://www.tableau.com/community/iron-viz

Homework

Create a minimal D3.js linechart!

https://d3-graph-gallery.com/graph/line_basic.html

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