27:null 28:["$","title",null,{"children":"Custom tooltip to show weather | inanimatedObjects | Observable"}] 2d:T6eb,html``2e:Tb83,plot = new MultiView('container', { meta: { date: { sync: true }, minTemp: { min: 0, max: 30 }, maxTemp: { min: 0, max: 30 }, values: { min: 0, max: 30 }, }, tooltip: { showMarkers: false, enterable: true, domStyles: { 'g2-tooltip': { width: '200px', padding: 0, }, }, customContent: (title, items) => { const data = items[0]?.data || {}; const titleDom = ``; const tempDom = ``; const windDom = ``; let domClass; if (data.rain === true) { domClass = 'rain'; } else if (data.sunny === true) { domClass = 'sun'; } else { domClass = 'cloud'; } return `

${titleDom}${tempDom}${windDom}

`; }, }, views: [ { data: data.map((d) => { return { ...d, values: [d.minTemp, d.maxTemp] }; }), meta: { date: { sync: true }, minTemp: { min: 0, max: 30 }, maxTemp: { min: 0, max: 30 }, values: { min: 0, max: 30 }, }, axes: { date: {}, minTemp: false, maxTemp: false, values: { position: 'left', }, }, interactions: [{ type: 'active-region' }], geometries: [ { type: 'interval', xField: 'date', yField: 'values', mapping: { size: 4, style: { fill: '#EBEDF0' }, }, }, { type: 'point', xField: 'date', yField: 'minTemp', colorField: 'maxTemp', mapping: { style: { r: 5 }, shape: 'circle', color: ['#6ab7da', '#806bd9', '#da6bcc'], }, }, { type: 'point', xField: 'date', yField: 'maxTemp', colorField: 'maxTemp', mapping: { size: 5, shape: 'circle', color: ['#6ab7da', '#806bd9', '#da6bcc'], }, }, ], }, ], })2f:[{"id":"aa153001916d0db1938deddc521ccebe528a45bf6c3610732d6fb9265ff3293dbf723f2950a7a2fac3a11d0c53c86e6a0c2668aa493a4f9414dc14bb1debd353","href":"https://static.observableusercontent.com/files/aa153001916d0db1938deddc521ccebe528a45bf6c3610732d6fb9265ff3293dbf723f2950a7a2fac3a11d0c53c86e6a0c2668aa493a4f9414dc14bb1debd353","name":"range-data.json","type":"application/json","lastModified":1742410358525.224,"size":4646}] 2b:{"id":"f698f86b8a9360d4","slug":null,"title":"Custom tooltip to show weather","thumbnail":"cef58d494947fd279e7f072a8ee3a0811c2d304c29139e0f55d3f512e49c3066","access_level":"public","create_time":"$D2025-03-19T18:52:38.525Z","update_time":"$D2025-03-19T18:52:38.525Z","view_time":null,"first_public_time":"$D2025-03-19T19:10:42.678Z","has_unpublished_edits":null,"fork":{"id":"1eefbd5f13900c04","slug":"custom-tooltip-to-show-weather","title":"Custom tooltip to show weather","owner":{"id":"43eb0216033f303e","login":"visiky","name":"廖晓娟"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024"},"version":40,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null}],"members":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null,"role":"editor"},{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Custom tooltip to show weather","cells":[{"id":0,"value":"md`# Custom tooltip to show weather`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"MultiView = G2Plot.MultiView;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"data = FileAttachment(\"range-data.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"plot.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"G2Plot = require('@antv/g2plot')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"