diff --git a/doc/python/bar-charts.md b/doc/python/bar-charts.md
index 9ee75ea440..6fad0f45c2 100644
--- a/doc/python/bar-charts.md
+++ b/doc/python/bar-charts.md
@@ -589,6 +589,92 @@ fig.update_layout(
)
```
+### Using a scatterplot to wrap long bars into multiple columns
+
+This bar-style pictogram allows readers to focus on the relative sizes of smaller entities by wrapping the bar for largest entries into multiple columns. You could make it even more of a pictogram by using fontawesome to replace the square markers we use below with icons like mortar boards for students.
+
+```
+import plotly.graph_objects as go
+import pandas as pd
+
+#TODO: make the results and the code compellingly clear, terse, and well designed; for example, make sure all the variable names are descriptive
+#TODO: when we're happy, remove print statements
+#TODO: consider adding the value for each group either above its section or to its title
+
+def pictogram_bar(data, title, icon_size, max_height=10, units_per_icon=1,columns_between_units=.5):
+ fig = go.Figure()
+
+ # Iterate through the data and create a scatter plot for each category
+ x_start = 1
+ tick_locations = []
+ for i, (category, count) in enumerate(data.items()):
+ #convert the real number input to an integer number of icons. Depending on the context, you might want to take floor or a ceiling rather than rouding
+ count = round(count / units_per_icon)
+ num_cols = (count + max_height - 1) // max_height # Ceiling division
+ x_coordinates = []
+ y_coordinates = []
+ for col in range(num_cols):
+ print([x_start+col]*min(max_height, count-col*max_height))
+ x_coordinates += [x_start+col]*min(max_height, count-col*max_height)
+ print(list(range(0, min(max_height, count-col*max_height))))
+ for yc in range(1, min(max_height, count-col*max_height)+1):
+ y_coordinates.append(yc)
+ print(f"{category=}")
+ print(f"{x_coordinates=}")
+ print(f"{y_coordinates=}")
+ # Add dots for this category
+ fig.add_trace(go.Scatter(
+ x=x_coordinates, # All dots are in the same x position (category)
+ y=y_coordinates,
+ mode='markers',
+ marker=dict(size=icon_size, symbol="square", color=i),
+ name=category,
+ #text=[category] * (y_end - y_start), # Hover text
+ hoverinfo="text"
+ ))
+ tick_locations += [x_start+ (col)/2]
+ x_start += col+1+columns_between_units
+ print(f"{tick_locations=}")
+
+ # Update layout for better visualization
+ fig.update_layout(
+ title=title,
+ xaxis=dict(
+ tickvals=tick_locations,
+ ticktext=list(data.keys()),
+ tickangle=-45,
+ showgrid=False
+ ),
+ #TODO: HIDE THE Y-AXIS? OR ENUMERATE IT IN "NATURAL UNITS" -- so count
+ yaxis=dict(
+ title="Units",
+ showgrid=False,
+ showline=False,
+ zeroline=False
+ ),
+ #TO DO: SHOW THE LEGEND, BUT JUST FOR ONE TRACE; LABEL IT WITH SOMETHING LIKE "EACH ICON REPRESENTS {units_per_icon} {Y_VARNAME}"
+ showlegend=False,
+ #setting the width implicitly sets the amount of space between columns within groups and it's desirable to keep those columns close but not too close
+ #TODO: set the width to a value that makes the spacing between columns reasonable; try it as a function of the number of columns of data, number of columns left blank as spacers, the icon size; and the left and right margins
+ # there's no right answer; but some answers will look a lot better than others; I'm guessing that roughly 2-3 times as many px as we fill with icons might be good
+ height=600
+ )
+
+ # Show the plot
+ fig.show()
+
+# TODO: CHANGE THIS THROUGHOUT TO A DF NAMED DF.
+
+data = {
+ "Haverford College": 1421, #https://www.usnews.com/best-colleges/haverford-college-3274
+ "University of Mary Washington": 3611, #https://www.usnews.com/best-colleges/university-of-mary-washington-3746#:~:text=Overview,campus%20size%20is%20234%20acres.
+ "Brown University": 7226, #https://oir.brown.edu/institutional-data/factbooks/enrollment
+ "Arizona State University": 65174, #https://www.usnews.com/best-colleges/arizona-state-university-1081
+}
+
+pictogram_bar(data, title="Undergraduate Enrollment at Participating Schools", units_per_icon=1000, icon_size=27)
+```
+
### Customizing Individual Bar Base
```python
diff --git a/plotly-universities-1.ipynb b/plotly-universities-1.ipynb
new file mode 100644
index 0000000000..dbbaddb98f
--- /dev/null
+++ b/plotly-universities-1.ipynb
@@ -0,0 +1,1360 @@
+{
+ "cells": [
+ {
+ "cell_type": "code",
+ "execution_count": 28,
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "application/vnd.plotly.v1+json": {
+ "config": {
+ "plotlyServerURL": "https://plot.ly"
+ },
+ "data": [
+ {
+ "hoverinfo": "text",
+ "marker": {
+ "color": 0,
+ "size": 27,
+ "symbol": "square"
+ },
+ "mode": "markers",
+ "name": "Haverford College",
+ "text": [
+ "Haverford College: 1421"
+ ],
+ "type": "scatter",
+ "x": [
+ 1
+ ],
+ "y": [
+ 1.05
+ ]
+ },
+ {
+ "mode": "text",
+ "showlegend": false,
+ "text": [
+ "1421"
+ ],
+ "textfont": {
+ "color": "black",
+ "size": 14
+ },
+ "type": "scatter",
+ "x": [
+ 1
+ ],
+ "y": [
+ 11
+ ]
+ },
+ {
+ "hoverinfo": "text",
+ "marker": {
+ "color": 1,
+ "size": 27,
+ "symbol": "square"
+ },
+ "mode": "markers",
+ "name": "University of Mary Washington",
+ "text": [
+ "University of Mary Washington: 3611",
+ "University of Mary Washington: 3611",
+ "University of Mary Washington: 3611",
+ "University of Mary Washington: 3611"
+ ],
+ "type": "scatter",
+ "x": [
+ 2.005,
+ 2.005,
+ 2.005,
+ 2.005
+ ],
+ "y": [
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2
+ ]
+ },
+ {
+ "mode": "text",
+ "showlegend": false,
+ "text": [
+ "3611"
+ ],
+ "textfont": {
+ "color": "black",
+ "size": 14
+ },
+ "type": "scatter",
+ "x": [
+ 2.005
+ ],
+ "y": [
+ 11
+ ]
+ },
+ {
+ "hoverinfo": "text",
+ "marker": {
+ "color": 2,
+ "size": 27,
+ "symbol": "square"
+ },
+ "mode": "markers",
+ "name": "Brown University",
+ "text": [
+ "Brown University: 7226",
+ "Brown University: 7226",
+ "Brown University: 7226",
+ "Brown University: 7226",
+ "Brown University: 7226",
+ "Brown University: 7226",
+ "Brown University: 7226"
+ ],
+ "type": "scatter",
+ "x": [
+ 3.01,
+ 3.01,
+ 3.01,
+ 3.01,
+ 3.01,
+ 3.01,
+ 3.01
+ ],
+ "y": [
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25,
+ 6.3,
+ 7.35
+ ]
+ },
+ {
+ "mode": "text",
+ "showlegend": false,
+ "text": [
+ "7226"
+ ],
+ "textfont": {
+ "color": "black",
+ "size": 14
+ },
+ "type": "scatter",
+ "x": [
+ 3.01
+ ],
+ "y": [
+ 11
+ ]
+ },
+ {
+ "hoverinfo": "text",
+ "marker": {
+ "color": 3,
+ "size": 27,
+ "symbol": "square"
+ },
+ "mode": "markers",
+ "name": "Arizona State University",
+ "text": [
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174",
+ "Arizona State University: 65174"
+ ],
+ "type": "scatter",
+ "x": [
+ 4.015,
+ 4.015,
+ 4.015,
+ 4.015,
+ 4.015,
+ 4.015,
+ 4.015,
+ 4.015,
+ 4.015,
+ 4.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 5.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 6.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 7.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 8.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 9.015,
+ 10.015,
+ 10.015,
+ 10.015,
+ 10.015,
+ 10.015
+ ],
+ "y": [
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25,
+ 6.3,
+ 7.35,
+ 8.4,
+ 9.45,
+ 10.5,
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25,
+ 6.3,
+ 7.35,
+ 8.4,
+ 9.45,
+ 10.5,
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25,
+ 6.3,
+ 7.35,
+ 8.4,
+ 9.45,
+ 10.5,
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25,
+ 6.3,
+ 7.35,
+ 8.4,
+ 9.45,
+ 10.5,
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25,
+ 6.3,
+ 7.35,
+ 8.4,
+ 9.45,
+ 10.5,
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25,
+ 6.3,
+ 7.35,
+ 8.4,
+ 9.45,
+ 10.5,
+ 1.05,
+ 2.1,
+ 3.15,
+ 4.2,
+ 5.25
+ ]
+ },
+ {
+ "mode": "text",
+ "showlegend": false,
+ "text": [
+ "65174"
+ ],
+ "textfont": {
+ "color": "black",
+ "size": 14
+ },
+ "type": "scatter",
+ "x": [
+ 7.015
+ ],
+ "y": [
+ 11
+ ]
+ }
+ ],
+ "layout": {
+ "height": 600,
+ "showlegend": false,
+ "template": {
+ "data": {
+ "bar": [
+ {
+ "error_x": {
+ "color": "#2a3f5f"
+ },
+ "error_y": {
+ "color": "#2a3f5f"
+ },
+ "marker": {
+ "line": {
+ "color": "#E5ECF6",
+ "width": 0.5
+ },
+ "pattern": {
+ "fillmode": "overlay",
+ "size": 10,
+ "solidity": 0.2
+ }
+ },
+ "type": "bar"
+ }
+ ],
+ "barpolar": [
+ {
+ "marker": {
+ "line": {
+ "color": "#E5ECF6",
+ "width": 0.5
+ },
+ "pattern": {
+ "fillmode": "overlay",
+ "size": 10,
+ "solidity": 0.2
+ }
+ },
+ "type": "barpolar"
+ }
+ ],
+ "carpet": [
+ {
+ "aaxis": {
+ "endlinecolor": "#2a3f5f",
+ "gridcolor": "white",
+ "linecolor": "white",
+ "minorgridcolor": "white",
+ "startlinecolor": "#2a3f5f"
+ },
+ "baxis": {
+ "endlinecolor": "#2a3f5f",
+ "gridcolor": "white",
+ "linecolor": "white",
+ "minorgridcolor": "white",
+ "startlinecolor": "#2a3f5f"
+ },
+ "type": "carpet"
+ }
+ ],
+ "choropleth": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "type": "choropleth"
+ }
+ ],
+ "contour": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "colorscale": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ],
+ "type": "contour"
+ }
+ ],
+ "contourcarpet": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "type": "contourcarpet"
+ }
+ ],
+ "heatmap": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "colorscale": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ],
+ "type": "heatmap"
+ }
+ ],
+ "heatmapgl": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "colorscale": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ],
+ "type": "heatmapgl"
+ }
+ ],
+ "histogram": [
+ {
+ "marker": {
+ "pattern": {
+ "fillmode": "overlay",
+ "size": 10,
+ "solidity": 0.2
+ }
+ },
+ "type": "histogram"
+ }
+ ],
+ "histogram2d": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "colorscale": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ],
+ "type": "histogram2d"
+ }
+ ],
+ "histogram2dcontour": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "colorscale": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ],
+ "type": "histogram2dcontour"
+ }
+ ],
+ "mesh3d": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "type": "mesh3d"
+ }
+ ],
+ "parcoords": [
+ {
+ "line": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "parcoords"
+ }
+ ],
+ "pie": [
+ {
+ "automargin": true,
+ "type": "pie"
+ }
+ ],
+ "scatter": [
+ {
+ "fillpattern": {
+ "fillmode": "overlay",
+ "size": 10,
+ "solidity": 0.2
+ },
+ "type": "scatter"
+ }
+ ],
+ "scatter3d": [
+ {
+ "line": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scatter3d"
+ }
+ ],
+ "scattercarpet": [
+ {
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scattercarpet"
+ }
+ ],
+ "scattergeo": [
+ {
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scattergeo"
+ }
+ ],
+ "scattergl": [
+ {
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scattergl"
+ }
+ ],
+ "scattermapbox": [
+ {
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scattermapbox"
+ }
+ ],
+ "scatterpolar": [
+ {
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scatterpolar"
+ }
+ ],
+ "scatterpolargl": [
+ {
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scatterpolargl"
+ }
+ ],
+ "scatterternary": [
+ {
+ "marker": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "type": "scatterternary"
+ }
+ ],
+ "surface": [
+ {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ },
+ "colorscale": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ],
+ "type": "surface"
+ }
+ ],
+ "table": [
+ {
+ "cells": {
+ "fill": {
+ "color": "#EBF0F8"
+ },
+ "line": {
+ "color": "white"
+ }
+ },
+ "header": {
+ "fill": {
+ "color": "#C8D4E3"
+ },
+ "line": {
+ "color": "white"
+ }
+ },
+ "type": "table"
+ }
+ ]
+ },
+ "layout": {
+ "annotationdefaults": {
+ "arrowcolor": "#2a3f5f",
+ "arrowhead": 0,
+ "arrowwidth": 1
+ },
+ "autotypenumbers": "strict",
+ "coloraxis": {
+ "colorbar": {
+ "outlinewidth": 0,
+ "ticks": ""
+ }
+ },
+ "colorscale": {
+ "diverging": [
+ [
+ 0,
+ "#8e0152"
+ ],
+ [
+ 0.1,
+ "#c51b7d"
+ ],
+ [
+ 0.2,
+ "#de77ae"
+ ],
+ [
+ 0.3,
+ "#f1b6da"
+ ],
+ [
+ 0.4,
+ "#fde0ef"
+ ],
+ [
+ 0.5,
+ "#f7f7f7"
+ ],
+ [
+ 0.6,
+ "#e6f5d0"
+ ],
+ [
+ 0.7,
+ "#b8e186"
+ ],
+ [
+ 0.8,
+ "#7fbc41"
+ ],
+ [
+ 0.9,
+ "#4d9221"
+ ],
+ [
+ 1,
+ "#276419"
+ ]
+ ],
+ "sequential": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ],
+ "sequentialminus": [
+ [
+ 0,
+ "#0d0887"
+ ],
+ [
+ 0.1111111111111111,
+ "#46039f"
+ ],
+ [
+ 0.2222222222222222,
+ "#7201a8"
+ ],
+ [
+ 0.3333333333333333,
+ "#9c179e"
+ ],
+ [
+ 0.4444444444444444,
+ "#bd3786"
+ ],
+ [
+ 0.5555555555555556,
+ "#d8576b"
+ ],
+ [
+ 0.6666666666666666,
+ "#ed7953"
+ ],
+ [
+ 0.7777777777777778,
+ "#fb9f3a"
+ ],
+ [
+ 0.8888888888888888,
+ "#fdca26"
+ ],
+ [
+ 1,
+ "#f0f921"
+ ]
+ ]
+ },
+ "colorway": [
+ "#636efa",
+ "#EF553B",
+ "#00cc96",
+ "#ab63fa",
+ "#FFA15A",
+ "#19d3f3",
+ "#FF6692",
+ "#B6E880",
+ "#FF97FF",
+ "#FECB52"
+ ],
+ "font": {
+ "color": "#2a3f5f"
+ },
+ "geo": {
+ "bgcolor": "white",
+ "lakecolor": "white",
+ "landcolor": "#E5ECF6",
+ "showlakes": true,
+ "showland": true,
+ "subunitcolor": "white"
+ },
+ "hoverlabel": {
+ "align": "left"
+ },
+ "hovermode": "closest",
+ "mapbox": {
+ "style": "light"
+ },
+ "paper_bgcolor": "white",
+ "plot_bgcolor": "#E5ECF6",
+ "polar": {
+ "angularaxis": {
+ "gridcolor": "white",
+ "linecolor": "white",
+ "ticks": ""
+ },
+ "bgcolor": "#E5ECF6",
+ "radialaxis": {
+ "gridcolor": "white",
+ "linecolor": "white",
+ "ticks": ""
+ }
+ },
+ "scene": {
+ "xaxis": {
+ "backgroundcolor": "#E5ECF6",
+ "gridcolor": "white",
+ "gridwidth": 2,
+ "linecolor": "white",
+ "showbackground": true,
+ "ticks": "",
+ "zerolinecolor": "white"
+ },
+ "yaxis": {
+ "backgroundcolor": "#E5ECF6",
+ "gridcolor": "white",
+ "gridwidth": 2,
+ "linecolor": "white",
+ "showbackground": true,
+ "ticks": "",
+ "zerolinecolor": "white"
+ },
+ "zaxis": {
+ "backgroundcolor": "#E5ECF6",
+ "gridcolor": "white",
+ "gridwidth": 2,
+ "linecolor": "white",
+ "showbackground": true,
+ "ticks": "",
+ "zerolinecolor": "white"
+ }
+ },
+ "shapedefaults": {
+ "line": {
+ "color": "#2a3f5f"
+ }
+ },
+ "ternary": {
+ "aaxis": {
+ "gridcolor": "white",
+ "linecolor": "white",
+ "ticks": ""
+ },
+ "baxis": {
+ "gridcolor": "white",
+ "linecolor": "white",
+ "ticks": ""
+ },
+ "bgcolor": "#E5ECF6",
+ "caxis": {
+ "gridcolor": "white",
+ "linecolor": "white",
+ "ticks": ""
+ }
+ },
+ "title": {
+ "x": 0.05
+ },
+ "xaxis": {
+ "automargin": true,
+ "gridcolor": "white",
+ "linecolor": "white",
+ "ticks": "",
+ "title": {
+ "standoff": 15
+ },
+ "zerolinecolor": "white",
+ "zerolinewidth": 2
+ },
+ "yaxis": {
+ "automargin": true,
+ "gridcolor": "white",
+ "linecolor": "white",
+ "ticks": "",
+ "title": {
+ "standoff": 15
+ },
+ "zerolinecolor": "white",
+ "zerolinewidth": 2
+ }
+ }
+ },
+ "title": {
+ "text": "Undergraduate Enrollment at Participating Schools"
+ },
+ "width": 1000,
+ "xaxis": {
+ "showgrid": false,
+ "tickangle": -45,
+ "ticktext": [
+ "Haverford College",
+ "University of Mary Washington",
+ "Brown University",
+ "Arizona State University"
+ ],
+ "tickvals": [
+ 1,
+ 2.005,
+ 3.01,
+ 7.015
+ ],
+ "title": {
+ "text": "Categories"
+ }
+ },
+ "yaxis": {
+ "showgrid": false,
+ "title": {
+ "text": "Units (1 icon = 1000)"
+ },
+ "zeroline": false
+ }
+ }
+ }
+ },
+ "metadata": {},
+ "output_type": "display_data"
+ }
+ ],
+ "source": [
+ "import plotly.graph_objects as go\n",
+ "import pandas as pd\n",
+ "\n",
+ "def pictogram_bar(data, title, icon_size, max_height=10, units_per_icon=1, column_spacing=0.005,icon_spacing=0.005):\n",
+ " \n",
+ " fig = go.Figure()\n",
+ " x_start = 1\n",
+ " tick_locations = []\n",
+ "\n",
+ " for i, (category, value) in enumerate(data.items()):\n",
+ " icon_count = round(value / units_per_icon)\n",
+ " num_columns = -(-icon_count // max_height) # Ceiling division\n",
+ "\n",
+ " x_coordinates, y_coordinates = [], []\n",
+ " for col in range(num_columns):\n",
+ " column_icons = min(max_height, icon_count - col * max_height)\n",
+ " x_coordinates.extend([x_start + col] * column_icons)\n",
+ " # y_coordinates.extend(range(1, column_icons + 1))\n",
+ " y_coordinates.extend([y + icon_spacing * y for y in range(1, column_icons + 1)])\n",
+ "\n",
+ "\n",
+ " # Add scatter plot for the category\n",
+ " fig.add_trace(go.Scatter(\n",
+ " x=x_coordinates,\n",
+ " y=y_coordinates,\n",
+ " mode='markers',\n",
+ " marker=dict(size=icon_size, symbol=\"square\", color= i),\n",
+ " name=category,\n",
+ " hoverinfo=\"text\",\n",
+ " text=[f\"{category}: {value}\" for _ in range(len(x_coordinates))]\n",
+ " ))\n",
+ " \n",
+ "\n",
+ " # Add value annotations above the section: new line of code \n",
+ " fig.add_trace(go.Scatter(\n",
+ " x=[x_start + (num_columns - 1) / 2],\n",
+ " y=[max_height + 1],\n",
+ " mode=\"text\",\n",
+ " text=[f\"{value}\"],\n",
+ " textfont=dict(size=14, color=\"black\"),\n",
+ " showlegend=False\n",
+ " ))\n",
+ "\n",
+ " # Track tick locations\n",
+ " tick_locations.append(x_start + (num_columns - 1) / 2)\n",
+ " x_start += num_columns + column_spacing\n",
+ "\n",
+ " # Update layout\n",
+ " fig.update_layout(\n",
+ " title=title,\n",
+ " xaxis=dict(\n",
+ " tickvals=tick_locations,\n",
+ " ticktext=list(data.keys()),\n",
+ " tickangle=-45,\n",
+ " showgrid=False,\n",
+ " title=\"Categories\"\n",
+ " ),\n",
+ " yaxis=dict(\n",
+ " title=f\"Units (1 icon = {units_per_icon})\",\n",
+ " showgrid=False,\n",
+ " zeroline=False,\n",
+ " ),\n",
+ " showlegend=False,\n",
+ " height=600,\n",
+ " width=(len(data) * 200 + 200) # Done adjused width based on number of categories\n",
+ " )\n",
+ "\n",
+ " fig.show()\n",
+ "\n",
+ "\n",
+ "# done as pd \n",
+ "df = pd.DataFrame({\n",
+ " 'School': [\"Haverford College\", \"University of Mary Washington\", \"Brown University\", \"Arizona State University\"],\n",
+ " 'Enrollment': [1421, 3611, 7226, 65174]\n",
+ "})\n",
+ "\n",
+ "pictogram_bar(\n",
+ " data={row['School']: row['Enrollment'] for _, row in df.iterrows()},\n",
+ " title=\"Undergraduate Enrollment at Participating Schools\",\n",
+ " units_per_icon=1000,\n",
+ " icon_size=27,\n",
+ " icon_spacing=0.05\n",
+ ")\n",
+ "\n",
+ "\n"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "\n"
+ ]
+ }
+ ],
+ "metadata": {
+ "kernelspec": {
+ "display_name": "3.11.9",
+ "language": "python",
+ "name": "python3"
+ },
+ "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.12.4"
+ }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}