Variable: default
ts
const default: object;Everything as one namespace: hx.scatter(…), hx.data.fromCSV(…), hx.ff.distplot(…).
Type Declaration
| Name | Type | Description |
|---|---|---|
adjacencyMatrix | GraphFunction< | GraphInput | GraphMatrix, AdjacencyMatrixOptions> | Experimental A graph as a matrix (backlog G8): one heatmap trace on coloraxis, a row and a column per node, each cell the summed weight (or the number) of the links between the two, with square cells, the first node at the top and the labels on both axes. order sorts rows and columns so that clusters show as blocks on the diagonal. It reads where a node-link drawing is a hairball, and needs only the heatmap trace, which the full bundle has. Example const figure = adjacencyMatrix(emails, { source: 'from', target: 'to', weight: 'count', nodes: people, id: 'name', color: 'team', }); |
area | ExpressFunction<AreaOptions> | A stacked area chart (px.area): one scatter trace per group, stacked with stackgroup: '1' and filled to the previous one; groupnorm stacks to fractions or percents. |
bar | ExpressFunction<BarOptions> | A bar chart (px.bar): one bar trace per group of color / pattern values, per facet and per frame, stacked (barmode: 'relative') by default. A numeric color is a colorscale instead. Example const figure = bar(rows, { x: 'day', y: 'total', color: 'sex', barmode: 'group' }); |
barPolar | ExpressFunction<BarPolarOptions> | A polar bar chart (px.bar_polar), such as a wind rose: one barpolar trace per color / pattern group, the groups' bars stacked at each angle. Example const figure = barPolar(wind, { r: 'frequency', theta: 'direction', color: 'strength' }); |
box | ExpressFunction<BoxOptions> | A box plot (px.box): one box trace per group, side by side in group mode. |
chord | GraphFunction< | GraphInput | GraphMatrix, GraphDataOptions> | Experimental A chord diagram: one chord trace, the nodes as arcs of a ring and the links as ribbons, from an edge table (with the options of graph that are about data) or from a square matrix (matrix[i][j]: the flow from node i to node j) with label as an array. color groups the nodes: the nodes of a group sit together, share a color and a legend item. Example const figure = chord(trips, { source: 'from', target: 'to', weight: 'trips' }); const same = chord(matrix, { label: ['Harbor', 'Old Town', 'Campus'] }); |
choropleth | ExpressFunction<ChoroplethOptions> | Experimental A choropleth map (px.choropleth): the regions locations name, colored by color — a numeric column through a colorscale on coloraxis (one choropleth trace), any other column with one color and legend item per value (one trace each). Example const figure = choropleth(countries, { locations: 'iso', color: 'lifeExp', hoverName: 'country', colorContinuousScale: 'Viridis', }); |
data | object | Data helpers: data.fromCSV(text), data.toTable(rows), data.columnTypes(rows), …. |
data.columnTypes() | (data) => Record<string, ColumnType> | The inferred type of every column of data, by name (see inferColumnType). |
data.fromCSV() | (text, options) => Table | Parse CSV text (RFC 4180) into a Table, like pandas' read_csv: the first record names the columns; columns whose non-empty fields are all numbers become numbers; empty fields are missing (null). Dates stay ISO strings, which Express reads as dates. Records shorter than the header are padded with missing values. Example const table = fromCSV('city,temp\n"Paris, FR",21.5\nOslo,12\n'); table.column('temp'); // [21.5, 12] Throws For malformed quoting and for records with more fields than the header. |
data.inferColumnType() | (values) => ColumnType | The type of a column of values, as px decides from pandas dtypes: numeric when every present value is a number (or bigint), date when every present value is a Date or an ISO-8601 date string (2024-03-01, 2024-03-01 12:30, …), else categorical (strings, booleans, mixes, and columns with no present value). Missing values (null, undefined, NaN) are ignored; numeric strings are categories, as in pandas (fromCSV parses numbers first). |
data.Table | typeof Table | - |
data.toTable() | (data) => Table | Normalize any DataInput into a Table. - Rows ([{ a: 1, b: 'x' }, …]): columns are the keys of all rows, in first-seen order; a row without a key has undefined there. - Columns ({ a: [...], b: [...] }): typed arrays are copied into plain arrays; all columns must be equally long. - Arrow tables (anything with numRows, schema.fields and getChild(name)): one column per schema field; bigints become numbers. - A Table is returned as is; null / undefined give an empty table (then every column must be given as an array in the options, as px allows). Throws For other inputs and for columns of different lengths. |
densityContour | ExpressFunction<DensityContourOptions> | A density contour plot (px.density_contour): histogram2dcontour contour lines (contours.coloring: 'none'), one trace per color group in its color. |
densityHeatmap | ExpressFunction<DensityHeatmapOptions> | A density heatmap (px.density_heatmap): a histogram2d per facet / frame counting the rows in each x-y bin (or aggregating z), colored on layout.coloraxis. Marginals share its axes. Example const figure = densityHeatmap(rows, { x: 'total_bill', y: 'tip', marginalX: 'histogram' }); |
ecdf | ExpressFunction<EcdfOptions> | An ECDF plot (px.ecdf, plan E10.7): per group, a scatter step line (line.shape: 'hv') through the sorted values of x (or y for a horizontal one) and the share of rows at or below each. y (x when horizontal) optionally weights the rows. ecdfnorm and ecdfmode as in px; the cumulative axis starts at zero. Example const figure = ecdf(rows, { x: 'total_bill', color: 'sex' }); |
ff | object | Figure factories: ff.distplot(samples, labels, options). |
ff.distplot() | { (samples, labels, options?): ExpressFigure; (el, samples, labels, options?): Promise<Chart>; } | A distribution plot, like plotly.py's ff.create_distplot(hist_data, group_labels): for each sample set, a histogram (histnorm: 'probability density', bins of binSize from its smallest to largest sample, opacity: 0.7), a curve (Gaussian KDE with Scott's rule, or a fitted normal) on the same axes, and a rug (line-ns-open markers) in a strip below; barmode: 'overlay', the legend in reverse order. Differences from plotly.py: colors default to the template's colorway instead of category10. With an element first, renders it and resolves with the chart. Example const figure = ff.distplot([a, b], ['Group A', 'Group B'], { binSize: 0.25 }); Throws Without samples, with a label count that differs, and (KDE) for a set with fewer than two samples or no spread. A distribution plot, like plotly.py's ff.create_distplot(hist_data, group_labels): for each sample set, a histogram (histnorm: 'probability density', bins of binSize from its smallest to largest sample, opacity: 0.7), a curve (Gaussian KDE with Scott's rule, or a fitted normal) on the same axes, and a rug (line-ns-open markers) in a strip below; barmode: 'overlay', the legend in reverse order. Differences from plotly.py: colors default to the template's colorway instead of category10. With an element first, renders it and resolves with the chart. Example const figure = ff.distplot([a, b], ['Group A', 'Group B'], { binSize: 0.25 }); Throws Without samples, with a label count that differs, and (KDE) for a set with fewer than two samples or no spread. |
funnel | ExpressFunction<FunnelOptions> | A funnel chart (px.funnel): one funnel trace per color group — stages on the category axis (y when the values are x), each bar as wide as its value, stacked across groups (funnelmode: 'stack') — per facet and per frame. Example const figure = funnel(rows, { x: 'count', y: 'stage', color: 'office' }); |
funnelArea | ExpressFunction<FunnelAreaOptions> | A funnel area chart (px.funnel_area): one funnelarea trace, a stage per names value sized by values, colored from the colorway (or color / colorDiscreteMap, always discrete). Example const figure = funnelArea(rows, { names: 'stage', values: 'count' }); |
getTrendlineResults() | (figure) => readonly TrendlineResult[] | The OLS fits of a figure built with trendline: 'ols' (plotly.py's px.get_trendline_results(fig)): one result per trendline trace, with the group it was fit on and statsmodels-like results (params, rsquared, bse, pvalues, …). Pass the figure an Express function returned, or the chart it rendered (await hx.scatter(el, …)). The results are kept beside the figure object, not in it, so they do not survive chartToJSON, structuredClone or a copy of the figure (as plotly.py keeps them on the Python figure only); other kinds of trendline, and figures without one, give []. Example const figure = hx.scatter(tips, { x: 'total_bill', y: 'tip', color: 'sex', trendline: 'ols' }); const [female] = hx.getTrendlineResults(figure); female.groups; // { sex: 'Female' } female.fit.params; // [intercept, slope] female.fit.rsquared; |
graph | GraphFunction<GraphInput, GraphOptions> | Experimental A network graph: one graph trace of the nodes and links of an edge table (source, target, weight), with an optional node table (nodes, matched by id) for labels, colors, sizes, symbols, positions and hover text. color groups the nodes (one color and legend item per value), or maps a numeric column through a colorscale on coloraxis; size takes a column or 'degree'; directed draws arrowheads; arrangement picks the layout, with its options under the trace's own name (force, layered, tree, arc, hive). Drawing the figure needs the graph package: import '@mk7s/holochart/graph'. Example const figure = graph(emails, { source: 'from', target: 'to', weight: 'count', nodes: people, id: 'name', color: 'team', size: 'degree', }); |
histogram | ExpressFunction<HistogramOptions> | A histogram (px.histogram): one histogram trace per group, sharing bins (bingroup), stacked by default. With both x and y, y is summed per x bin (histfunc: 'sum'). marginal draws the same values' distribution above it. Example const figure = histogram(rows, { x: 'total_bill', color: 'sex', facetCol: 'day', facetColWrap: 2 }); |
icicle | ExpressFunction<HierarchyOptions> | An icicle chart (px.icicle): one icicle trace of adjoined rectangles cascading from the root, with the options of sunburst. Example const figure = icicle(rows, { path: ['continent', 'country'], values: 'pop' }); |
imshow | ImshowFunction | An image or a matrix (px.imshow). A 2D array becomes a heatmap on layout.coloraxis (colorscale from the template, zmin / zmax from the data); an RGB / RGBA array ([row][col][channel]) or ImageData becomes an image trace, drawn from a PNG data URI by default. Rows run down from the top (origin: 'upper') and pixels are square (aspect: 'equal'). A third or fourth dimension can be spread over facets (facetCol) or animation frames (animationFrame). Example const figure = imshow( [ [1, 20, 30], [20, 1, 60], ], { textAuto: true, labels: { x: 'column', y: 'row', color: 'value' } }, ); await imshow(el, pixels, { facetCol: 0 }); // or render directly Throws For ragged or empty arrays, shapes other than 2D / RGB / RGBA per slice, and x / y of the wrong length (or not numeric, for images). |
line | ExpressFunction<LineOptions> | A line chart (px.line): one scatter trace (mode: 'lines') per group of color / lineDash / symbol / lineGroup values, in data order (sort the data by x first). |
line3d | ExpressFunction<Line3dOptions> | A 3D line chart (px.line_3d): one scatter3d line per group of color / lineDash / symbol / lineGroup values, in data order, on one scene; markers adds markers at the points. Example const figure = line3d(flights, { x: 'lon', y: 'lat', z: 'altitude', color: 'flight' }); |
lineGeo | ExpressFunction<LineGeoOptions> | Experimental Lines on a map (px.line_geo): one scattergeo line per group of color / lineDash / symbol / lineGroup values, in data order, each segment along the great circle between its points; markers adds markers at the points. Example const figure = lineGeo(stops, { lat: 'lat', lon: 'lon', color: 'route', markers: true }); |
linePolar | ExpressFunction<LinePolarOptions> | A polar line chart (px.line_polar): one scatterpolar line per group of color / lineDash / symbol / lineGroup values, in data order; lineClose closes each line. |
parallelCategories | ExpressFunction<ParallelCategoriesOptions> | Parallel categories (px.parallel_categories): one parcats trace over the categorical dimensions (default: columns with at most 50 distinct values), ribbons colored by a numeric color on layout.coloraxis. |
parallelCoordinates | ExpressFunction<ParallelCoordinatesOptions> | Parallel coordinates (px.parallel_coordinates): one parcoords trace over the numeric dimensions, lines colored by a numeric color on layout.coloraxis. |
pie | ExpressFunction<PieOptions> | A pie chart (px.pie): one pie trace (per facet) with labels from names and values; color colors the sectors, from the colorway or colorDiscreteMap (or a colorscale when numeric); hole makes a donut. Example const figure = pie(rows, { names: 'day', values: 'tip', hole: 0.4 }); |
scatter | ExpressFunction<ScatterOptions> | A scatter plot (px.scatter): one scatter trace (mode: 'markers') per group of color / symbol values, per facet and per frame. A numeric color is a colorscale on coloraxis instead; size scales marker areas; marginalX / marginalY add distributions above / right; trendline adds a fitted line per group ('ols', 'lowess', 'rolling', 'ewm', 'expanding'), with OLS fits in getTrendlineResults(figure). Example const figure = scatter(rows, { x: 'gdpPercap', y: 'lifeExp', color: 'continent', logX: true }); |
scatter3d | ExpressFunction<Scatter3dOptions> | A 3D scatter plot (px.scatter_3d): one scatter3d trace (mode: 'markers') per group of color / symbol values and per frame, on one scene. A numeric color is a colorscale on coloraxis instead; size scales marker areas. Rendering needs the 3D traces registered (the @mk7s/holochart bundle, or register(...traces3d) from @mk7s/holochart-traces-3d). Example const figure = scatter3d(iris, { x: 'sepal_length', y: 'sepal_width', z: 'petal_width', color: 'species', }); |
scatterGeo | ExpressFunction<ScatterGeoOptions> | Experimental Markers on a map (px.scatter_geo): one scattergeo trace (mode: 'markers') per group of color / symbol values, per facet and per frame, at lat / lon or at the places locations name. A numeric color is a colorscale on coloraxis instead; size scales marker areas. Drawing the figure needs the geo package: import '@mk7s/holochart/geo'. Example const figure = scatterGeo(countries, { locations: 'iso', color: 'continent', size: 'pop', projection: 'natural earth', }); |
scatterMatrix | ExpressFunction<ScatterMatrixOptions> | A scatter plot matrix (px.scatter_matrix): one splom trace per color / symbol group over the dimensions (default: every numeric column not used for color, symbol, size or hover name), without the diagonal; box and lasso selections highlight across cells (dragmode: 'select'). Example const figure = scatterMatrix(iris, { dimensions: ['sepalLength', 'sepalWidth', 'petalLength'], color: 'species' }); |
scatterPolar | ExpressFunction<ScatterPolarOptions> | A polar scatter plot (px.scatter_polar): one scatterpolar trace (mode: 'markers') per group of color / symbol values and per frame, at radius r and angle theta. Example const figure = scatterPolar(wind, { r: 'frequency', theta: 'direction', color: 'strength' }); |
strip | ExpressFunction<StripOptions> | A strip plot (px.strip): every observation as a jittered point at its category — box traces with boxpoints: 'all' and an invisible box, one per group. The same figure as traces-stats' strip(), with Express's data, facets and animation. |
sunburst | ExpressFunction<HierarchyOptions> | A sunburst chart (px.sunburst): one sunburst trace, from names / parents / ids / values columns or built from path (with branchvalues: 'total'); color colors the sectors, through layout.coloraxis when numeric (values-weighted means on inner nodes), else from the colorway or colorDiscreteMap ('(?)' for nodes whose rows differ). Example const figure = sunburst(rows, { path: ['continent', 'country'], values: 'pop', color: 'lifeExp' }); |
timeline | ExpressFunction<TimelineOptions> | A timeline / Gantt chart (px.timeline): horizontal bars from xStart to xEnd per row of y, on a date x axis (barmode: 'overlay'). Unlike Holochart's timeline() helper in traces-basic, the rows keep Plotly's bottom-up order, as in px. |
treemap | ExpressFunction<HierarchyOptions> | A treemap (px.treemap): one treemap trace of nested rectangles, with the options of sunburst. Example const figure = treemap(rows, { path: ['continent', 'country'], values: 'pop', color: 'continent' }); |
violin | ExpressFunction<ViolinOptions> | A violin plot (px.violin): one violin trace per group, scaled together (scalegroup). |