Published
Edited
Apr 9, 2020
{
embed.vega.timeFormatLocale(locale); // show dates in German
embed.vega.formatLocale(locale); // show numbers with German groupings/ separators
return vl.markCircle()
.config({padding: {"left": 5, "top": 5, "right": 50, "bottom": 50}}) // now tooltip will not be clipped
.data(
vl.csv().values('a,b,c\n20394.4,234878,334983\n43387.2,3425,689373.2')
)
.encode(
vl.x().fieldQ('a'),//.axis({tickMinStep: 1}),
vl.y().fieldQ('b').axis({tickMinStep: 1}),
vl.size().fieldQ('c').legend({titleAnchor: 'middle'}),
vl.tooltip(['a', 'b'])
)
.render()
}
{
embed.vega.timeFormatLocale(locale); // show dates in German
embed.vega.formatLocale(locale); // show numbers with German groupings/ separators
return vl.markCircle()
.config({padding: {"left": 5, "top": 5, "right": 50, "bottom": 50}}) // now tooltip will not be clipped
.data(
vl.csv().values('a,b,c\n20394.4,234878,334983\n43387.2,3425,689373.2')
)
.encode(
vl.x().fieldQ('a'),//.axis({tickMinStep: 1}),
vl.y().fieldQ('b').axis({tickMinStep: 1}),
vl.size().fieldQ('c').legend({titleAnchor: 'middle'}),
// old: vl.tooltip(['a', 'b'])
vl.tooltip([
{
"field": "a",
"type": "quantitative",
"format": ",.2f"
},
{
"field": "b",
"type": "quantitative",
"format": ",.2f"
},
])
)
.render()
}
import {vl} from "@vega/vega-lite-api"
embed = require("vega-embed@4")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
