I am new to Observable and I am currently using Vegalite api to create visualization. However, I am having some trouble parsing data from slider to vegalite’s lookupData function.
As you can see, I am trying to parse the yearSlider value. However, an error saying that viewof choropleth = SyntaxError: Unexpected token ‘]’ occurs.
May I know how can i do that?
Below is my code:
viewof choropleth = vl.markGeoshape()
.data(vl.topojson(“https://unpkg.com/world-atlas@2/countries-110m.json").feature("countries”))
.transform( // Transform is advanced
vl.lookup(“properties.name”).from( // Lookup is even more advanced
vl.lookupData(Array.from(seatsByWomen)).key(‘Country Name’).fields(yearSlider)
).as(“Percentage of seats by women”)
)
.project(vl.projection(“equalEarth”))
.encode(
vl.color().fieldQ(“Percentage of seats by women”).legend({ orient: “top” }),
vl.tooltip([“properties.name”, “Percentage of seats by women”])
)
.width(width)
.height(width / 2.5)
.autosize({ type: “fit-x”, contains: “padding” })
.render()
It’s much easier to offer assistance if you include a pointer to your notebook - as opposed to code pasted into your post here. Just be sure to link share your notebook first using the “Enable link sharing” option in the three dot menu in the upper right of your notebook:
If you do want to include code in your post (which is certainly reasonable for small snippets) be sure to use proper Markdown syntax to distinguish it from text.
I hope that helps you get an answer to your question and welcome to the forum!
I don’t see the syntax error that you describe - at least, not in the version of the notebook you link to. Rather the problem seems to be that the map is simply not responsive to the slider. I’d say that the problem arises in this line of your code:
Where you specify fields('2019'), I believe that you want fields(yearSlider.toString()), since fields appears to want a string rather than an integer.
Here’s a fork that makes that change, in addition to a few others:
Note that I included the sphere layer to prevent the map from jumping around under the action of the slider. If you don’t want the sphere layer, you can simply set its fill to 'white'.
