Skip to content

Instantly share code, notes, and snippets.

@benbovy
Created November 13, 2017 17:52
Show Gist options
  • Save benbovy/a30f286f7fdf9528c4d0c7980be9b6a7 to your computer and use it in GitHub Desktop.
Save benbovy/a30f286f7fdf9528c4d0c7980be9b6a7 to your computer and use it in GitHub Desktop.
Test vdom with xarray.Dataset
Display the source blob
Display the rendered blob
Raw
{
"cells": [
{
"cell_type": "code",
"execution_count": 332,
"metadata": {},
"outputs": [],
"source": [
"import uuid\n",
"\n",
"import numpy as np\n",
"import xarray as xr\n",
"from xarray.core.formatting import format_array_flat\n",
"\n",
"from IPython.display import display\n",
"from vdom.helpers import (style, div, ul, li, span, pre,\n",
" summary, details, input_, label)"
]
},
{
"cell_type": "code",
"execution_count": 378,
"metadata": {},
"outputs": [],
"source": [
"XR_REPR_STYLE = \"\"\"\n",
".xr-warp {\n",
" width: 540px;\n",
" font-size: 13px;\n",
" line-height: 1.5;\n",
" background-color: #fff;\n",
"}\n",
"\n",
".xr-header {\n",
" padding: 6px 0 6px 3px;\n",
" border-bottom-width: 1px;\n",
" border-bottom-style: solid;\n",
" border-bottom-color: #777;\n",
" color: #555;;\n",
"}\n",
"\n",
".xr-sections {\n",
" list-style: none;\n",
" padding: 3px;\n",
" margin: 0;\n",
"}\n",
"\n",
".xr-sections summary > div {\n",
" display: inline-block;\n",
" cursor: pointer;\n",
" width: 140px;\n",
" color: #555;\n",
" font-weight: 500;\n",
" padding: 4px 0 2px 0;\n",
"}\n",
"\n",
".xr-sections > li > details > summary > div > span {\n",
" display: none;\n",
" margin-left: 4px;\n",
"}\n",
"\n",
".xr-sections > li > details:not([open]) > summary > div > span {\n",
" display: inline-block;\n",
"}\n",
"\n",
".xr-dim-list {\n",
" display: inline-block !important;\n",
" list-style: none;\n",
" padding: 0;\n",
"}\n",
"\n",
".xr-dim-list li {\n",
" display: inline-block;\n",
" font-size: 13px !important;\n",
" padding: 0;\n",
" margin: 0;\n",
"}\n",
"\n",
".xr-dim-list:before {\n",
" content: '(';\n",
"}\n",
"\n",
".xr-dim-list:after {\n",
" content: ')';\n",
"}\n",
"\n",
".xr-dim-list li:not(:last-child):after {\n",
" content: ',';\n",
" padding-right: 5px;\n",
"}\n",
"\n",
".xr-has-index {\n",
" text-decoration: underline;\n",
"}\n",
"\n",
".xr-var-list {\n",
" list-style: none;\n",
" padding: 0;\n",
" margin: 0;\n",
"}\n",
"\n",
".xr-var-list > li {\n",
" background-color: #fcfcfc;\n",
" overflow: hidden;\n",
"}\n",
"\n",
".xr-var-list > li:nth-child(odd) {\n",
" background-color: #efefef;\n",
"}\n",
"\n",
".xr-var-list li:hover {\n",
" background-color: rgba(3, 169, 244, .2);\n",
"}\n",
"\n",
".xr-var-list li > span {\n",
" display: inline-block;\n",
"}\n",
"\n",
".xr-var-list li input {\n",
" display: none;\n",
"}\n",
"\n",
".xr-var-list li input:enabled + label {\n",
" cursor: pointer;\n",
"}\n",
"\n",
"input.xr-varname-in + label {\n",
" display: inline-block;\n",
" width: 140px;\n",
" padding-left: 0;\n",
"}\n",
"\n",
"input.xr-varname-in + label:before {\n",
" content: ' ';\n",
" display: inline-block;\n",
" font-size: 11px;\n",
" width: 15px;\n",
" padding-left: 20px;\n",
" padding-right: 5px;\n",
" text-align: center;\n",
" color: #aaa;\n",
" text-decoration: none !important;\n",
"}\n",
"\n",
"input.xr-varname-in ~ ul {\n",
" display: none;\n",
"}\n",
"\n",
"input.xr-varname-in:checked ~ ul {\n",
" display: block;\n",
"}\n",
"\n",
"input.xr-varname-in:enabled + label:before {\n",
" content: 'a';\n",
"}\n",
"\n",
"input.xr-varname-in:enabled + label:hover:before {\n",
" color: #000;\n",
"}\n",
"\n",
"input.xr-varname-in:checked + label:before {\n",
" color: #ccc;\n",
"}\n",
"\n",
".xr-dims {\n",
" width: 80px;\n",
"}\n",
"\n",
".xr-dtype {\n",
" width: 96px;\n",
" padding-right: 4px;\n",
" text-align: right;\n",
" color: #555;\n",
"}\n",
"\n",
".xr-values {\n",
" width: 200px;\n",
" text-align: left;\n",
" color: #888;\n",
" white-space: nowrap;\n",
" font-size: 12px;\n",
"}\n",
"\n",
".xr-values > span:nth-child(odd) {\n",
" color: rgba(0, 0, 0, .65);\n",
"}\n",
"\n",
"input.xr-values-in + label:hover > span {\n",
" color: #000;\n",
"}\n",
"\n",
"input.xr-values-in:checked + label > span {\n",
" color: #ccc;\n",
"}\n",
"\n",
"input.xr-values-in ~ pre {\n",
" display: none;\n",
"}\n",
"\n",
"input.xr-values-in:checked ~ pre {\n",
" display: block;\n",
"}\n",
"\n",
"input.xr-values-in:checked + label > span {\n",
" color: #ccc;\n",
"}\n",
"\n",
".xr-full-values {\n",
" font-size: 11px;\n",
" background-color: #fff;\n",
" padding: 4px 0 6px 40px !important;\n",
" margin: 0 !important;\n",
"}\n",
"\n",
".xr-attr-list {\n",
" list-style: none;\n",
" background-color: #fff;\n",
" padding-bottom: 6px;\n",
" color: #555;\n",
"}\n",
"\n",
".xr-attr-list li,\n",
".xr-attr-list li:hover {\n",
" background-color: #fff;\n",
"}\n",
"\"\"\"\n",
"\n",
"# doesn't work here:\n",
"# details summary::-webkit-details-marker {\n",
"# color: green; \n",
"# font-size: 20px;\n",
"#}\n",
"#\n",
"# shorthand properties like border or padding don't seem to work?\n",
"# span or other nested HTML elements in summary don't show up.\n",
"# some HTML elements have attributes that conflict with python syntax (e.g., for, type, id)\n",
"# why camelCase for className?\n",
"# seems like I need to create unique ids for input/labels to avoid conflicts (i.e., repr the same object in two cells, clicking on a label in the 2nd cell output shows data in the first cell output)"
]
},
{
"cell_type": "code",
"execution_count": 401,
"metadata": {},
"outputs": [],
"source": [
"def attr_list(attrs):\n",
" return ul(\n",
" [li('{} : {}'.format(k, v)) for k, v in attrs.items()],\n",
" className='xr-attr-list'\n",
" )\n",
"\n",
"\n",
"def dim_list(dims):\n",
" \n",
" return ul(\n",
" [li(span(k, className=idx_cls), ': {}'.format(v))\n",
" for k, (v, idx_cls) in dims.items()],\n",
" className='xr-dim-list'\n",
" )\n",
"\n",
"\n",
"def var_values(var):\n",
" pprint_str = format_array_flat(var, 35)\n",
" return [span(s + ' ') for s in pprint_str.split()]\n",
" \n",
"\n",
"def var_row(varname, var):\n",
" dims_str = '(' + ', '.join(d for d in var.dims) + ')'\n",
" \n",
" varname_cls = 'xr-varname'\n",
" if varname in var.dims:\n",
" varname_cls += ' xr-has-index'\n",
" \n",
" # create unique ids for input/label\n",
" attr_id = str(uuid.uuid4())\n",
" values_id = str(uuid.uuid4())\n",
" \n",
" if len(var.attrs):\n",
" disable_attr_section = False\n",
" attr_section = attr_list(var.attrs)\n",
" else:\n",
" disable_attr_section = True\n",
" attr_section = ''\n",
" \n",
" return li(\n",
" input_(className='xr-varname-in', type='checkbox',\n",
" disabled=disable_attr_section, id=attr_id),\n",
" label(varname, className=varname_cls,\n",
" **{'for': attr_id}),\n",
" span(dims_str, className='xr-dims'),\n",
" span(str(var.dtype), className='xr-dtype'),\n",
" input_(className='xr-values-in', type='checkbox',\n",
" id=values_id),\n",
" label(var_values(var), className='xr-values',\n",
" **{'for': values_id}),\n",
" attr_section,\n",
" pre(repr(var.data), className='xr-full-values')\n",
" )\n",
"\n",
"\n",
"def var_list(variables):\n",
" return ul(\n",
" [var_row(k, v) for k, v in variables.items()],\n",
" className='xr-var-list'\n",
" )\n",
"\n",
"\n",
"def dim_section(dims):\n",
" return details(\n",
" summary(\n",
" div('Dimensions:', style={'width': '125px'}), dim_list(dims)\n",
" )\n",
" )\n",
"\n",
"\n",
"def var_section(variables, section_name, expand_max_items=10):\n",
" if len(variables) > expand_max_items:\n",
" expand = False\n",
" else:\n",
" expand = True\n",
"\n",
" return li(\n",
" details(\n",
" summary(div(section_name + ':', span(len(variables)))),\n",
" var_list(variables),\n",
" open=expand\n",
" )\n",
" )\n",
"\n",
"\n",
"def attr_section(attrs, expand_max_items=5):\n",
" if len(attrs) > expand_max_items:\n",
" expand = False\n",
" else:\n",
" expand = True\n",
" \n",
" return li(\n",
" details(\n",
" summary(div('Attributes:', span(len(attrs)))),\n",
" attr_list(attrs),\n",
" open=expand\n",
" )\n",
" )\n",
"\n",
"\n",
"def dataset_header():\n",
" return div('xarray.Dataset', className='xr-header')\n",
"\n",
"\n",
"def repr_dataset(ds):\n",
" dims = {k: (v, 'xr-has-index' if k in ds.coords else '')\n",
" for k, v in ds.dims.items()}\n",
" \n",
" return div(\n",
" style(XR_REPR_STYLE),\n",
" div(\n",
" dataset_header(),\n",
" ul(\n",
" dim_section(dims),\n",
" var_section(ds.coords, 'Coordinates'),\n",
" var_section(ds.data_vars, 'Data variables'),\n",
" attr_section(ds.attrs),\n",
" className='xr-sections'\n",
" ),\n",
" className='xr-warp')\n",
" )"
]
},
{
"cell_type": "code",
"execution_count": 402,
"metadata": {},
"outputs": [],
"source": [
"lon = np.array([[-99.83, -99.32], [-99.79, -99.23]])\n",
"lat = np.array([[ 42.25, 42.21], [ 42.63, 42.59]])\n",
"\n",
"ds = xr.Dataset(data_vars={'foo': (('x', 'y'), np.random.rand(2, 2))},\n",
" coords={\n",
" 'x': [0, 1], 'y': [0, 1],\n",
" 'lon': (('x', 'y'), lon, {'standard_name': 'longitude'}),\n",
" 'lat': (('x', 'y'), lat, {'standard_name': 'latitude'})\n",
" },\n",
" attrs={'title': 'example dataset'})"
]
},
{
"cell_type": "code",
"execution_count": 403,
"metadata": {},
"outputs": [
{
"data": {
"application/vdom.v1+json": {
"attributes": {},
"children": [
{
"attributes": {},
"children": "\n.xr-warp {\n width: 540px;\n font-size: 13px;\n line-height: 1.5;\n background-color: #fff;\n}\n\n.xr-header {\n padding: 6px 0 6px 3px;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #777;\n color: #555;;\n}\n\n.xr-sections {\n list-style: none;\n padding: 3px;\n margin: 0;\n}\n\n.xr-sections summary > div {\n display: inline-block;\n cursor: pointer;\n width: 140px;\n color: #555;\n font-weight: 500;\n padding: 4px 0 2px 0;\n}\n\n.xr-sections > li > details > summary > div > span {\n display: none;\n margin-left: 4px;\n}\n\n.xr-sections > li > details:not([open]) > summary > div > span {\n display: inline-block;\n}\n\n.xr-dim-list {\n display: inline-block !important;\n list-style: none;\n padding: 0;\n}\n\n.xr-dim-list li {\n display: inline-block;\n font-size: 13px !important;\n padding: 0;\n margin: 0;\n}\n\n.xr-dim-list:before {\n content: '(';\n}\n\n.xr-dim-list:after {\n content: ')';\n}\n\n.xr-dim-list li:not(:last-child):after {\n content: ',';\n padding-right: 5px;\n}\n\n.xr-has-index {\n text-decoration: underline;\n}\n\n.xr-var-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.xr-var-list > li {\n background-color: #fcfcfc;\n overflow: hidden;\n}\n\n.xr-var-list > li:nth-child(odd) {\n background-color: #efefef;\n}\n\n.xr-var-list li:hover {\n background-color: rgba(3, 169, 244, .2);\n}\n\n.xr-var-list li > span {\n display: inline-block;\n}\n\n.xr-var-list li input {\n display: none;\n}\n\n.xr-var-list li input:enabled + label {\n cursor: pointer;\n}\n\ninput.xr-varname-in + label {\n display: inline-block;\n width: 140px;\n padding-left: 0;\n}\n\ninput.xr-varname-in + label:before {\n content: ' ';\n display: inline-block;\n font-size: 11px;\n width: 15px;\n padding-left: 20px;\n padding-right: 5px;\n text-align: center;\n color: #aaa;\n text-decoration: none !important;\n}\n\ninput.xr-varname-in ~ ul {\n display: none;\n}\n\ninput.xr-varname-in:checked ~ ul {\n display: block;\n}\n\ninput.xr-varname-in:enabled + label:before {\n content: 'a';\n}\n\ninput.xr-varname-in:enabled + label:hover:before {\n color: #000;\n}\n\ninput.xr-varname-in:checked + label:before {\n color: #ccc;\n}\n\n.xr-dims {\n width: 80px;\n}\n\n.xr-dtype {\n width: 96px;\n padding-right: 4px;\n text-align: right;\n color: #555;\n}\n\n.xr-values {\n width: 200px;\n text-align: left;\n color: #888;\n white-space: nowrap;\n font-size: 12px;\n}\n\n.xr-values > span:nth-child(odd) {\n color: rgba(0, 0, 0, .65);\n}\n\ninput.xr-values-in + label:hover > span {\n color: #000;\n}\n\ninput.xr-values-in:checked + label > span {\n color: #ccc;\n}\n\ninput.xr-values-in ~ pre {\n display: none;\n}\n\ninput.xr-values-in:checked ~ pre {\n display: block;\n}\n\ninput.xr-values-in:checked + label > span {\n color: #ccc;\n}\n\n.xr-full-values {\n font-size: 11px;\n background-color: #fff;\n padding: 4px 0 6px 40px !important;\n margin: 0 !important;\n}\n\n.xr-attr-list {\n list-style: none;\n background-color: #fff;\n padding-bottom: 6px;\n color: #555;\n}\n\n.xr-attr-list li,\n.xr-attr-list li:hover {\n background-color: #fff;\n}\n",
"tagName": "style"
},
{
"attributes": {
"className": "xr-warp"
},
"children": [
{
"attributes": {
"className": "xr-header"
},
"children": "xarray.Dataset",
"tagName": "div"
},
{
"attributes": {
"className": "xr-sections"
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
{
"attributes": {
"style": {
"width": "125px"
}
},
"children": "Dimensions:",
"tagName": "div"
},
{
"attributes": {
"className": "xr-dim-list"
},
"children": [
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-has-index"
},
"children": "x",
"tagName": "span"
},
": 2"
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-has-index"
},
"children": "y",
"tagName": "span"
},
": 2"
],
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "summary"
},
"tagName": "details"
},
{
"attributes": {},
"children": {
"attributes": {
"open": true
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
"Coordinates:",
{
"attributes": {},
"children": 4,
"tagName": "span"
}
],
"tagName": "div"
},
"tagName": "summary"
},
{
"attributes": {
"className": "xr-var-list"
},
"children": [
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": true,
"id": "7ab8a2da-8e58-4e3b-9dd2-5bad02a595af",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname xr-has-index",
"for": "7ab8a2da-8e58-4e3b-9dd2-5bad02a595af"
},
"children": "x",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "int64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "e25d721d-8624-48e7-8ac6-5f4f876817bd",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "e25d721d-8624-48e7-8ac6-5f4f876817bd"
},
"children": [
{
"attributes": {},
"children": "0 ",
"tagName": "span"
},
{
"attributes": {},
"children": "1 ",
"tagName": "span"
}
],
"tagName": "label"
},
"",
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([0, 1])",
"tagName": "pre"
}
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": true,
"id": "8de1863f-885d-40d7-a3c8-6d871655ee73",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname xr-has-index",
"for": "8de1863f-885d-40d7-a3c8-6d871655ee73"
},
"children": "y",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "int64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "5b7d49ac-6910-4800-bd45-3e88b52acbd3",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "5b7d49ac-6910-4800-bd45-3e88b52acbd3"
},
"children": [
{
"attributes": {},
"children": "0 ",
"tagName": "span"
},
{
"attributes": {},
"children": "1 ",
"tagName": "span"
}
],
"tagName": "label"
},
"",
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([0, 1])",
"tagName": "pre"
}
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": false,
"id": "c00234fc-a9c0-4500-902c-68583d4fafe1",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname",
"for": "c00234fc-a9c0-4500-902c-68583d4fafe1"
},
"children": "lon",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x, y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "float64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "2a3db6f8-23b0-4bd3-b601-e2c391c05b50",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "2a3db6f8-23b0-4bd3-b601-e2c391c05b50"
},
"children": [
{
"attributes": {},
"children": "-99.83 ",
"tagName": "span"
},
{
"attributes": {},
"children": "-99.32 ",
"tagName": "span"
},
{
"attributes": {},
"children": "-99.79 ",
"tagName": "span"
},
{
"attributes": {},
"children": "-99.23 ",
"tagName": "span"
}
],
"tagName": "label"
},
{
"attributes": {
"className": "xr-attr-list"
},
"children": [
{
"attributes": {},
"children": "standard_name : longitude",
"tagName": "li"
}
],
"tagName": "ul"
},
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([[-99.83, -99.32],\n [-99.79, -99.23]])",
"tagName": "pre"
}
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": false,
"id": "2345a5d7-2d17-4feb-bb0b-b846d2681552",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname",
"for": "2345a5d7-2d17-4feb-bb0b-b846d2681552"
},
"children": "lat",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x, y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "float64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "b068b9c0-8bcd-4ab3-bc54-880cc9de74fe",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "b068b9c0-8bcd-4ab3-bc54-880cc9de74fe"
},
"children": [
{
"attributes": {},
"children": "42.25 ",
"tagName": "span"
},
{
"attributes": {},
"children": "42.21 ",
"tagName": "span"
},
{
"attributes": {},
"children": "42.63 ",
"tagName": "span"
},
{
"attributes": {},
"children": "42.59 ",
"tagName": "span"
}
],
"tagName": "label"
},
{
"attributes": {
"className": "xr-attr-list"
},
"children": [
{
"attributes": {},
"children": "standard_name : latitude",
"tagName": "li"
}
],
"tagName": "ul"
},
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([[ 42.25, 42.21],\n [ 42.63, 42.59]])",
"tagName": "pre"
}
],
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "details"
},
"tagName": "li"
},
{
"attributes": {},
"children": {
"attributes": {
"open": true
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
"Data variables:",
{
"attributes": {},
"children": 1,
"tagName": "span"
}
],
"tagName": "div"
},
"tagName": "summary"
},
{
"attributes": {
"className": "xr-var-list"
},
"children": [
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": true,
"id": "face55d2-7593-498a-ac39-4deaaa569f4a",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname",
"for": "face55d2-7593-498a-ac39-4deaaa569f4a"
},
"children": "foo",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x, y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "float64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "4e5c0e5a-01c6-4cf0-ae0e-4235ac5f6c23",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "4e5c0e5a-01c6-4cf0-ae0e-4235ac5f6c23"
},
"children": [
{
"attributes": {},
"children": "0.04993 ",
"tagName": "span"
},
{
"attributes": {},
"children": "0.4014 ",
"tagName": "span"
},
{
"attributes": {},
"children": "0.3656 ",
"tagName": "span"
},
{
"attributes": {},
"children": "0.992 ",
"tagName": "span"
}
],
"tagName": "label"
},
"",
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([[ 0.0499336 , 0.40139403],\n [ 0.3655935 , 0.99198063]])",
"tagName": "pre"
}
],
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "details"
},
"tagName": "li"
},
{
"attributes": {},
"children": {
"attributes": {
"open": true
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
"Attributes:",
{
"attributes": {},
"children": 1,
"tagName": "span"
}
],
"tagName": "div"
},
"tagName": "summary"
},
{
"attributes": {
"className": "xr-attr-list"
},
"children": [
{
"attributes": {},
"children": "title : example dataset",
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "details"
},
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "div"
}
],
"tagName": "div"
},
"text/plain": [
"<div />"
]
},
"execution_count": 403,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"repr_dataset(ds)"
]
},
{
"cell_type": "code",
"execution_count": 404,
"metadata": {},
"outputs": [
{
"data": {
"application/vdom.v1+json": {
"attributes": {},
"children": [
{
"attributes": {},
"children": "\n.xr-warp {\n width: 540px;\n font-size: 13px;\n line-height: 1.5;\n background-color: #fff;\n}\n\n.xr-header {\n padding: 6px 0 6px 3px;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #777;\n color: #555;;\n}\n\n.xr-sections {\n list-style: none;\n padding: 3px;\n margin: 0;\n}\n\n.xr-sections summary > div {\n display: inline-block;\n cursor: pointer;\n width: 140px;\n color: #555;\n font-weight: 500;\n padding: 4px 0 2px 0;\n}\n\n.xr-sections > li > details > summary > div > span {\n display: none;\n margin-left: 4px;\n}\n\n.xr-sections > li > details:not([open]) > summary > div > span {\n display: inline-block;\n}\n\n.xr-dim-list {\n display: inline-block !important;\n list-style: none;\n padding: 0;\n}\n\n.xr-dim-list li {\n display: inline-block;\n font-size: 13px !important;\n padding: 0;\n margin: 0;\n}\n\n.xr-dim-list:before {\n content: '(';\n}\n\n.xr-dim-list:after {\n content: ')';\n}\n\n.xr-dim-list li:not(:last-child):after {\n content: ',';\n padding-right: 5px;\n}\n\n.xr-has-index {\n text-decoration: underline;\n}\n\n.xr-var-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.xr-var-list > li {\n background-color: #fcfcfc;\n overflow: hidden;\n}\n\n.xr-var-list > li:nth-child(odd) {\n background-color: #efefef;\n}\n\n.xr-var-list li:hover {\n background-color: rgba(3, 169, 244, .2);\n}\n\n.xr-var-list li > span {\n display: inline-block;\n}\n\n.xr-var-list li input {\n display: none;\n}\n\n.xr-var-list li input:enabled + label {\n cursor: pointer;\n}\n\ninput.xr-varname-in + label {\n display: inline-block;\n width: 140px;\n padding-left: 0;\n}\n\ninput.xr-varname-in + label:before {\n content: ' ';\n display: inline-block;\n font-size: 11px;\n width: 15px;\n padding-left: 20px;\n padding-right: 5px;\n text-align: center;\n color: #aaa;\n text-decoration: none !important;\n}\n\ninput.xr-varname-in ~ ul {\n display: none;\n}\n\ninput.xr-varname-in:checked ~ ul {\n display: block;\n}\n\ninput.xr-varname-in:enabled + label:before {\n content: 'a';\n}\n\ninput.xr-varname-in:enabled + label:hover:before {\n color: #000;\n}\n\ninput.xr-varname-in:checked + label:before {\n color: #ccc;\n}\n\n.xr-dims {\n width: 80px;\n}\n\n.xr-dtype {\n width: 96px;\n padding-right: 4px;\n text-align: right;\n color: #555;\n}\n\n.xr-values {\n width: 200px;\n text-align: left;\n color: #888;\n white-space: nowrap;\n font-size: 12px;\n}\n\n.xr-values > span:nth-child(odd) {\n color: rgba(0, 0, 0, .65);\n}\n\ninput.xr-values-in + label:hover > span {\n color: #000;\n}\n\ninput.xr-values-in:checked + label > span {\n color: #ccc;\n}\n\ninput.xr-values-in ~ pre {\n display: none;\n}\n\ninput.xr-values-in:checked ~ pre {\n display: block;\n}\n\ninput.xr-values-in:checked + label > span {\n color: #ccc;\n}\n\n.xr-full-values {\n font-size: 11px;\n background-color: #fff;\n padding: 4px 0 6px 40px !important;\n margin: 0 !important;\n}\n\n.xr-attr-list {\n list-style: none;\n background-color: #fff;\n padding-bottom: 6px;\n color: #555;\n}\n\n.xr-attr-list li,\n.xr-attr-list li:hover {\n background-color: #fff;\n}\n",
"tagName": "style"
},
{
"attributes": {
"className": "xr-warp"
},
"children": [
{
"attributes": {
"className": "xr-header"
},
"children": "xarray.Dataset",
"tagName": "div"
},
{
"attributes": {
"className": "xr-sections"
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
{
"attributes": {
"style": {
"width": "125px"
}
},
"children": "Dimensions:",
"tagName": "div"
},
{
"attributes": {
"className": "xr-dim-list"
},
"children": [
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-has-index"
},
"children": "x",
"tagName": "span"
},
": 2"
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-has-index"
},
"children": "y",
"tagName": "span"
},
": 2"
],
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "summary"
},
"tagName": "details"
},
{
"attributes": {},
"children": {
"attributes": {
"open": true
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
"Coordinates:",
{
"attributes": {},
"children": 4,
"tagName": "span"
}
],
"tagName": "div"
},
"tagName": "summary"
},
{
"attributes": {
"className": "xr-var-list"
},
"children": [
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": true,
"id": "53158833-2220-4d40-8916-ddbdfb5703b1",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname xr-has-index",
"for": "53158833-2220-4d40-8916-ddbdfb5703b1"
},
"children": "x",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "int64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "67a0f982-6115-4311-ab5f-4206ad450dcd",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "67a0f982-6115-4311-ab5f-4206ad450dcd"
},
"children": [
{
"attributes": {},
"children": "0 ",
"tagName": "span"
},
{
"attributes": {},
"children": "1 ",
"tagName": "span"
}
],
"tagName": "label"
},
"",
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([0, 1])",
"tagName": "pre"
}
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": true,
"id": "8378ed09-4d33-4256-b73e-c7ac4d4cb215",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname xr-has-index",
"for": "8378ed09-4d33-4256-b73e-c7ac4d4cb215"
},
"children": "y",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "int64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "43935116-6a7e-4de7-ada6-248300dd761b",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "43935116-6a7e-4de7-ada6-248300dd761b"
},
"children": [
{
"attributes": {},
"children": "0 ",
"tagName": "span"
},
{
"attributes": {},
"children": "1 ",
"tagName": "span"
}
],
"tagName": "label"
},
"",
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([0, 1])",
"tagName": "pre"
}
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": false,
"id": "571d747c-0686-41ca-8f9c-b42f5bbd47b7",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname",
"for": "571d747c-0686-41ca-8f9c-b42f5bbd47b7"
},
"children": "lon",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x, y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "float64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "de09688e-e9dc-46a2-9627-11cdf373b388",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "de09688e-e9dc-46a2-9627-11cdf373b388"
},
"children": [
{
"attributes": {},
"children": "-99.83 ",
"tagName": "span"
},
{
"attributes": {},
"children": "-99.32 ",
"tagName": "span"
},
{
"attributes": {},
"children": "-99.79 ",
"tagName": "span"
},
{
"attributes": {},
"children": "-99.23 ",
"tagName": "span"
}
],
"tagName": "label"
},
{
"attributes": {
"className": "xr-attr-list"
},
"children": [
{
"attributes": {},
"children": "standard_name : longitude",
"tagName": "li"
}
],
"tagName": "ul"
},
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([[-99.83, -99.32],\n [-99.79, -99.23]])",
"tagName": "pre"
}
],
"tagName": "li"
},
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": false,
"id": "eada8e11-2f58-4326-86e2-9ff594aa57bd",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname",
"for": "eada8e11-2f58-4326-86e2-9ff594aa57bd"
},
"children": "lat",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x, y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "float64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "54571723-a82a-46af-b5ad-b310ff689a4c",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "54571723-a82a-46af-b5ad-b310ff689a4c"
},
"children": [
{
"attributes": {},
"children": "42.25 ",
"tagName": "span"
},
{
"attributes": {},
"children": "42.21 ",
"tagName": "span"
},
{
"attributes": {},
"children": "42.63 ",
"tagName": "span"
},
{
"attributes": {},
"children": "42.59 ",
"tagName": "span"
}
],
"tagName": "label"
},
{
"attributes": {
"className": "xr-attr-list"
},
"children": [
{
"attributes": {},
"children": "standard_name : latitude",
"tagName": "li"
}
],
"tagName": "ul"
},
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([[ 42.25, 42.21],\n [ 42.63, 42.59]])",
"tagName": "pre"
}
],
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "details"
},
"tagName": "li"
},
{
"attributes": {},
"children": {
"attributes": {
"open": true
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
"Data variables:",
{
"attributes": {},
"children": 1,
"tagName": "span"
}
],
"tagName": "div"
},
"tagName": "summary"
},
{
"attributes": {
"className": "xr-var-list"
},
"children": [
{
"attributes": {},
"children": [
{
"attributes": {
"className": "xr-varname-in",
"disabled": true,
"id": "84d67585-ca9b-4cb5-b336-b447c357fa11",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-varname",
"for": "84d67585-ca9b-4cb5-b336-b447c357fa11"
},
"children": "foo",
"tagName": "label"
},
{
"attributes": {
"className": "xr-dims"
},
"children": "(x, y)",
"tagName": "span"
},
{
"attributes": {
"className": "xr-dtype"
},
"children": "float64",
"tagName": "span"
},
{
"attributes": {
"className": "xr-values-in",
"id": "e483e6af-777c-4292-acfb-936a2da73175",
"type": "checkbox"
},
"children": null,
"tagName": "input"
},
{
"attributes": {
"className": "xr-values",
"for": "e483e6af-777c-4292-acfb-936a2da73175"
},
"children": [
{
"attributes": {},
"children": "0.04993 ",
"tagName": "span"
},
{
"attributes": {},
"children": "0.4014 ",
"tagName": "span"
},
{
"attributes": {},
"children": "0.3656 ",
"tagName": "span"
},
{
"attributes": {},
"children": "0.992 ",
"tagName": "span"
}
],
"tagName": "label"
},
"",
{
"attributes": {
"className": "xr-full-values"
},
"children": "array([[ 0.0499336 , 0.40139403],\n [ 0.3655935 , 0.99198063]])",
"tagName": "pre"
}
],
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "details"
},
"tagName": "li"
},
{
"attributes": {},
"children": {
"attributes": {
"open": true
},
"children": [
{
"attributes": {},
"children": {
"attributes": {},
"children": [
"Attributes:",
{
"attributes": {},
"children": 1,
"tagName": "span"
}
],
"tagName": "div"
},
"tagName": "summary"
},
{
"attributes": {
"className": "xr-attr-list"
},
"children": [
{
"attributes": {},
"children": "title : example dataset",
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "details"
},
"tagName": "li"
}
],
"tagName": "ul"
}
],
"tagName": "div"
}
],
"tagName": "div"
},
"text/plain": [
"<div />"
]
},
"execution_count": 404,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"repr_dataset(ds)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python [conda env:xarray_dev_py36]",
"language": "python",
"name": "conda-env-xarray_dev_py36-py"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.2"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment