Question 1 - Scales

The specs for the two plots above have just one property that is different between them. Complete the spec below for both plots.

Plot 1

                    
                    scales: [
                                {
                                    name: "xScale",
                                    domain: [2014, 2018],
                                    range: "width"
                

                                },
                                {
                                    name: "yScale",
                                    domain: { data: "aggregated", field: "m" },
                                    range: "height"


                                }
                            ]
                    

Plot 2

                    
                    scales: [
                                {
                                    name: "xScale",
                                    domain: [2014, 2018],
                                    range: "width"
                

                                },
                                {
                                    name: "yScale",
                                    domain: { data: "aggregated", field: "m" },
                                    range: "height"


                                }
                            ]
                    

What are the pros and cons of each scale? Which scale reflects the data more accurately in your opinion?

Question 2 - Bar Plots

Question 2a - ordering unordered categorical variables

The specs for the two plots above have just one property that is different between them. Complete the spec below for plot 2 to sort the bars.

Plot 2

                    
                        ...
                        data: [
                                {
                                name: "lego_themes",
                                url: "https://raw.githubusercontent.com/picoral/csc-444-data/main/lego_themes.json",
                                
                                




                            }
                        ],
                        scales: [
                            {
                                name: "xScale",
                                type: "band",
                                domain: { data: "lego_themes", field: "theme"},
                                range: "width",
                                padding: 0.6
                            },
                            {
                                name: "yScale",
                                type: "linear",
                                domain: { data: "lego_themes", field: "n" },
                                range: "height"
                            }
                        ],
                        ...
                    

Why is sorting bars by the numeric variable recommended in this case?

Question 2b - Labeling bars

The specs for the two plots above have just one property that is different between them. Complete the spec below for plot 2 to add values to the bars.

Plot 2

                    
                        ...
                        marks: [
                            {
                                type: "rect",
                                from: { data: "lego_themes" },
                                encode: {
                                    enter: {
                                        x: { field: "theme", scale: "xScale"},
                                        y2: { value: 0, scale: "yScale"},
                                        y: { field: "n", scale: "yScale"},
                                        width: { value: 30}
                                    }
                                }
                            },
                            
                            














                        ],
                        ...
                    

List one advantage and one disadvantage of adding values to bars in a bar plot.

Question 3 - Stacked Bar Plots

Question 3a - labeling and ordering unordered categorical variables

The specs for the two plots above have just two properties that are different between them. Complete the spec below for plot 2 to sort the bars, and add a legend. You can look at the data and the variables you have available.

Plot 2

                        
        // create spec
        var spec = { 
            $schema: "https://vega.github.io/schema/vega/v5.json",
            description: "A bar plot of Artists in the USA",
            width: 800,
            height: 500,
            padding: 50,
            autosize: "fit",
            data: [
                {
                name: "artists",
                url: "https://raw.githubusercontent.com/picoral/csc-444-data/main/artists.json",
                transform: [
                    {
                    type: "stack",
                    groupby: ["type"],
                    field: "percent",
                    as: ["x0", "x1"],
                    sort: { field: "race" }
                    }
                    




                ]
                }
            ],
            scales: [
            {
                name: "xScale",
                type: "linear",
                domain: [0, 1],
                range: "width"
            },
            {
                name: "yScale",
                type: "band",
                domain: { data: "artists", field: "type"},
                range: "height",
                padding: .5
            },
            {
                name: "colorScale",
                type: "ordinal",
                domain: { data: "artists", field: "race" },
                range: {"scheme": "category20"}
            }
            ],
            axes: [
            {
                scale: "xScale",
                orient: "bottom"
            },
            {
                scale: "yScale",
                orient: "left"
            }
            ],
            marks: [
            {
                type: "rect",
                from: { data: "artists" },
                encode: {
                enter: {
                    x: { field: "x0", scale: "xScale"},
                    x2: { field: "x1", scale: "xScale"},
                    y: { field: "type", scale: "yScale" },
                    height: { value: 20 },
                    fill: { field: "race", scale: "colorScale"}
                }
                }
            }
            ]
            






        };
                        

Explain why the sorted version is better.

Question 3b - Representing percentages

Why is plot 1 preferable over plot 2?

Question 4 - Scatterplots

Question 4a - Filtering Data

Identify the differences between the two plots above. What are they? What would the differences in the spec be? (you can use prose to answer this) You can look at the data and the variables you have available.

Question 4b - Color in Scatterplots

Identify the differences between the two plots above. What are they? What would the differences in the spec be? (you can use prose to answer this) You can look at the data and the variables you have available.

Question 5 - Aggregating Data

Complete the spec below for plot 2 to aggregate the data for sum for every week in every year each show was on Broadway. You can look at the data and the variables you have available.

Plot 2

                        
                        transform: [
                            {
                                type: "aggregate",
                                groupby: [________, ________],
                                fields: [________],
                                ops: [________],
                                as: ["total_gross"]
                            }
                        ]
                    

Identify the differences between the two plots above. What are they? What would the differences in the spec be? (you can use prose to answer this) You can look at the data and the variables you have available.

Key