-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
File prefixed for external data; new examples.
- Loading branch information
Showing
5 changed files
with
236 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| """ | ||
| Interactive CORD-19 | ||
| ------------------- | ||
| Demonstrating interactive plotting with colormaps and search with the CORD-19 large data map. | ||
| For a full size version see | ||
| https://lmcinnes.github.io/datamapplot_examples/CORD19_data_map_example.html | ||
| """ | ||
| import numpy as np | ||
| import bz2 | ||
| import datamapplot | ||
| import colorcet | ||
|
|
||
| cord19_data_map = np.load("cord19_umap_vectors.npy") | ||
| cord19_label_layers = [] | ||
| for i in range(6): | ||
| cord19_label_layers.append( | ||
| np.load(f"cord19_layer{i}_cluster_labels.npy", allow_pickle=True) | ||
| ) | ||
| cord19_hover_text = [ | ||
| x.decode("utf-8").strip() | ||
| for x in bz2.open( | ||
| "cord19_large_hover_text.txt.bz2", | ||
| mode="r" | ||
| ) | ||
| ] | ||
| cord19_marker_size_array = np.log(1+np.load("cord19_marker_size_array.npy")) | ||
|
|
||
| plot = datamapplot.create_interactive_plot( | ||
| cord19_data_map, | ||
| cord19_label_layers[0], | ||
| cord19_label_layers[1], | ||
| cord19_label_layers[2], | ||
| cord19_label_layers[3], | ||
| cord19_label_layers[4], | ||
| cord19_label_layers[5], | ||
| hover_text=cord19_hover_text, | ||
| initial_zoom_fraction=0.4, | ||
| title="CORD-19 Data Map", | ||
| sub_title="A data map of papers relating to COVID-19 and SARS-CoV-2", | ||
| font_family="Cinzel", | ||
| logo="https://allenai.org/newsletters/archive/2023-03-newsletter_files/927c3ca8-6c75-862c-ee5d-81703ef10a8d.png", | ||
| logo_width=128, | ||
| marker_size_array=cord19_marker_size_array, | ||
| cmap=colorcet.cm.CET_C2s, | ||
| noise_color="#aaaaaa66", | ||
| cluster_boundary_polygons=True, | ||
| enable_search=True, | ||
| ) | ||
| plot |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| """ | ||
| Interactive CORD-19 | ||
| ------------------- | ||
| Demonstrating interactive plotting and what can be achieved with the extra options available | ||
| via ``custom_html``, ``custom_css`` and ``custom_js`` to construct a clickable legend for | ||
| selecting subsets of data based on the field of research (click on the colour swatches | ||
| in the legend to select a specific field). | ||
| For a full size version see | ||
| https://lmcinnes.github.io/datamapplot_examples/CORD19_customised_example.html | ||
| """ | ||
| import numpy as np | ||
| import pandas as pd | ||
| import bz2 | ||
| import seaborn as sns | ||
| from matplotlib.colors import rgb2hex | ||
|
|
||
| import datamapplot | ||
|
|
||
| cord19_data_map = np.load("cord19_umap_vectors.npy") | ||
| cord19_label_layers = [] | ||
| for i in range(6): | ||
| cord19_label_layers.append( | ||
| np.load(f"cord19_layer{i}_cluster_labels.npy", allow_pickle=True) | ||
| ) | ||
| cord19_hover_text = [ | ||
| x.decode("utf-8").strip() | ||
| for x in bz2.open( | ||
| "cord19_large_hover_text.txt.bz2", | ||
| mode="r" | ||
| ) | ||
| ] | ||
|
|
||
| color_mapping = {} | ||
| color_mapping["Medicine"] = "#bbbbbb" | ||
| for key, color in zip(("Biology", "Chemistry", "Physics"), sns.color_palette("YlOrRd_r", 3)): | ||
| color_mapping[key] = rgb2hex(color) | ||
| for key, color in zip(("Business", "Economics", "Political Science"), sns.color_palette("BuPu_r", 3)): | ||
| color_mapping[key] = rgb2hex(color) | ||
| for key, color in zip(("Psychology", "Sociology", "Geography", "History"), sns.color_palette("YlGnBu_r", 4)): | ||
| color_mapping[key] = rgb2hex(color) | ||
| for key, color in zip(("Computer Science", "Engineering", "Mathematics"), sns.color_palette("light:teal_r", 4)[:-1]): | ||
| color_mapping[key] = rgb2hex(color) | ||
| for key, color in zip(("Environmental Science", "Geology", "Materials Science"), sns.color_palette("pink", 3), ): | ||
| color_mapping[key] = rgb2hex(color) | ||
| for key, color in zip(("Art", "Philosophy", "Unknown"), sns.color_palette("bone", 3)): | ||
| color_mapping[key] = rgb2hex(color) | ||
|
|
||
| cord19_extra_data = pd.read_feather("cord19_extra_data.arrow") | ||
| cord19_extra_data["color"] = cord19_extra_data.primary_field.map(color_mapping) | ||
| marker_color_array = cord19_extra_data.primary_field.map(color_mapping) | ||
| marker_size_array = np.log(1 + cord19_extra_data.citation_count.values) | ||
|
|
||
| # Add custom CSS to style the legend element we will add to the plot | ||
| custom_css = """ | ||
| .row { | ||
| display : flex; | ||
| align-items : center; | ||
| } | ||
| .box { | ||
| height:10px; | ||
| width:10px; | ||
| border-radius:2px; | ||
| margin-right:5px; | ||
| } | ||
| #legend { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| margin: 16px; | ||
| padding: 12px; | ||
| border-radius: 16px; | ||
| z-index: 2; | ||
| background: #ffffffcc; | ||
| font-family: Cinzel; | ||
| font-size: 8pt; | ||
| box-shadow: 2px 3px 10px #aaaaaa44; | ||
| } | ||
| #title-container { | ||
| max-width: 75%; | ||
| } | ||
| """ | ||
| # Construct HTML for the legend | ||
| custom_html = """ | ||
| <div id="legend"> | ||
| """ | ||
| for field, color in color_mapping.items(): | ||
| custom_html += f' <div class="row"><div id="{field}" class="box" style="background-color:{color};padding:0px 0 1px 0;text-align:center"></div>{field}</div>\n' | ||
| custom_html += """ | ||
| </div> | ||
| """ | ||
|
|
||
| # Create a custom tooltip, highlighting the field of research and citation count | ||
| badge_css = """ | ||
| border-radius:6px; | ||
| width:fit-content; | ||
| max-width:75%; | ||
| margin:2px; | ||
| padding: 2px 10px 2px 10px; | ||
| font-size: 10pt; | ||
| """ | ||
| hover_text_template = f""" | ||
| <div> | ||
| <div style="font-size:12pt;padding:2px;">{{hover_text}}</div> | ||
| <div style="background-color:{{color}};color:#fff;{badge_css}">{{primary_field}}</div> | ||
| <div style="background-color:#eeeeeeff;{badge_css}">citation count: {{citation_count}}</div> | ||
| </div> | ||
| """ | ||
|
|
||
| # Add custom javascript to make the legend interactive/clickable, | ||
| # and interact with search selection | ||
| custom_js = """ | ||
| const legend = document.getElementById('legend'); | ||
| legend.addEventListener('click', function (event) { | ||
| const primary_field = event.srcElement.id; | ||
| selectPoints(primary_field, (i) => (hoverData.data.primary_field[i] == primary_field)); | ||
| for (const row of legend.children) { | ||
| for (const item of row.children) { | ||
| if (item.id == primary_field) { | ||
| item.innerHTML = "✓"; | ||
| } else { | ||
| item.innerHTML = ""; | ||
| } | ||
| } | ||
| } | ||
| search.value = ""; | ||
| }); | ||
| search.addEventListener("input", (event) => { | ||
| for (const row of legend.children) { | ||
| for (const item of row.children) { | ||
| item.innerHTML = ""; | ||
| } | ||
| } | ||
| }); | ||
| """ | ||
|
|
||
| plot = datamapplot.create_interactive_plot( | ||
| cord19_data_map, | ||
| cord19_label_layers[0], | ||
| cord19_label_layers[1], | ||
| cord19_label_layers[2], | ||
| cord19_label_layers[3], | ||
| cord19_label_layers[4], | ||
| cord19_label_layers[5], | ||
| hover_text=cord19_hover_text, | ||
| initial_zoom_fraction=0.4, | ||
| title="CORD-19 Data Map", | ||
| sub_title="A data map of papers relating to COVID-19", | ||
| font_family="Cinzel", | ||
| logo="https://allenai.org/newsletters/archive/2023-03-newsletter_files/927c3ca8-6c75-862c-ee5d-81703ef10a8d.png", | ||
| logo_width=128, | ||
| color_label_text=False, | ||
| marker_size_array=marker_size_array, | ||
| marker_color_array=marker_color_array, | ||
| point_radius_max_pixels=16, | ||
| noise_color="#aaaaaa44", | ||
| cluster_boundary_polygons=True, | ||
| color_cluster_boundaries=False, | ||
| extra_point_data=cord19_extra_data, | ||
| hover_text_html_template=hover_text_template, | ||
| on_click="window.open(`http://google.com/search?q=\"{hover_text}\"`)", | ||
| enable_search=True, | ||
| custom_css=custom_css, | ||
| custom_html=custom_html, | ||
| custom_js=custom_js, | ||
| ) | ||
| plot |