Data Visualization Course Tutorials for Learning How to Use Visualization Tools!

Leo Yu Ho, Lo

Learning Vis Tools Tutorial 6: Javascript basics and Observable

Learning Vis Tools Tutorial 7: Vega-Lite and data processing libraries

Learning Vis Tools Tutorial 8: Visualization with D3.js

Learning Vis Tools Tutorial 9: Visualization and Interaction with D3.js

learning-vis-tools

You might change the Object to : encoding: {
    x: { field: 'x' , type: "quantitative"},
    y: { field: 'y' , type: "quantitative"}, to match the above cell. Here the fields are treated as nominal by default, hence the different sorting and the axis labels