Creating a Dashboard for Interactive Data Visualization with Dash in Python #609
Comments
|
Hello @caiocmello and @hluling, You can find the key files here:
You can review a preview of the lesson here: I do have a question about two
How come these scripts are provided separately, rather than included as code blocks within the lesson? (I am slightly confused about how these scripts differ from the main code, which you've collated together under app.py.) Thank you for clarifying! |
|
Thank you for processing these files, @charlottejmc! Hello Luling @hluling, What's happening now?Your lesson has been moved to the next phase of our workflow which is Phase 2: Initial Edit. In this Phase, your editor Caio @caiocmello will read your lesson, and provide some initial feedback. Caio will post feedback and suggestions as a comment in this Issue, so that you can revise your draft in the following Phase 3: Revision 1. %%{init: { 'logLevel': 'debug', 'theme': 'dark', 'themeVariables': {
'cScale0': '#444444', 'cScaleLabel0': '#ffffff',
'cScale1': '#882b4f', 'cScaleLabel1': '#ffffff',
'cScale2': '#444444', 'cScaleLabel2': '#ffffff'
} } }%%
timeline
Section Phase 1 <br> Submission
Who worked on this? : Publishing Assistant (@charlottejmc)
All Phase 1 tasks completed? : Yes
Section Phase 2 <br> Initial Edit
Who's working on this? : Editor (@caiocmello)
Expected completion date? : May 17
Section Phase 3 <br> Revision 1
Who's responsible? : Author (@hluling)
Expected timeframe? : ~30 days after feedback is received
|
Thank you @charlottejmc. To clarify:
The two RQs are based on two different data sources. The reason to separate |
|
Thank you @hluling, that makes good sense to me now. Anisa and I did find this slightly confusing upon initial processing of the lesson, so this might indicate it will be confusing to readers as well. One solution would be to keep the code in a separate asset folder, but give clearer instructions to readers explaining this choice. I will let @caiocmello share his view on this too! |
|
Dear @hluling, It has been such a pleasure reading your lesson. I've learnt a lot from it and I'm sure it will be of great contribution to the PH! So, thanks very much for this! I took note of some suggestions I could provide you at this stage before it goes to external review. I hope they are useful in improving the accessibility and usability of this material. Comments below indicate the paragraph, as annotated in the preview version.
It was great to see that you included more than one research question in the lesson. Also, you provide a different set-up of the dashboard, showing how readers can customise it in different ways. This is excellent. I have, however, some suggestions regarding the way the RQs are structured in the text:
Final comment:
These are my initial suggestions and I look forward to hearing back from you. I hope this is useful and feel free to get in touch if you have any questions. |
|
Thank you very much @caiocmello – just a short note to let you and @hluling know that I've just taken care of switching the two asset links at paragraphs 39 and 41. |
|
Thank you @caiocmello for the insightful feedback! I'm working on the edits. |
|
Hello Luling @hluling, If you'd like to slot in some figure images, please either upload them to your repository where we can download them or email to us as before. Charlotte and I will process these next week and put them in place for you! Thank you, |
What's happening now?Hello Luling @hluling. Your lesson has been moved to the next phase of our workflow which is Phase 3: Revision 1. This Phase is an opportunity for you to revise your draft in response to @caiocmello's initial feedback. I've sent you an invitation to join us as an Outside Collaborator here on GitHub. This gives you the Write access you'll need to edit your lesson directly. We ask authors to work on their own files with direct commits: we prefer you don't fork our repo, or use the Pull Request system to edit in ph-submissions. You can make direct commits to your file here: /en/drafts/originals/interactive-data-visualization-dashboard.md. Charlotte and I can help if you encounter any practical problems! When you and Caio are both happy with the revised draft, we will move forward to Phase 4: Open Peer Review. %%{init: { 'logLevel': 'debug', 'theme': 'dark', 'themeVariables': {
'cScale0': '#444444', 'cScaleLabel0': '#ffffff',
'cScale1': '#882b4f', 'cScaleLabel1': '#ffffff',
'cScale2': '#444444', 'cScaleLabel2': '#ffffff'
} } }%%
timeline
Section Phase 2 <br> Initial Edit
Who worked on this? : Editor (@caiocmello)
All Phase 2 tasks completed? : Yes
Section Phase 3 <br> Revision 1
Who's working on this? : Author (@hluling)
Expected completion date? : June 12
Section Phase 4 <br> Open Peer Review
Who's responsible? : Reviewers (TBC)
Expected timeframe? : ~60 days after request is accepted
|
|
Hi @caiocmello, thanks again for the thorough review! Please see the revised lesson here: https://programminghistorian.github.io/ph-submissions/en/drafts/originals/interactive-data-visualization-dashboard
Revised as suggested (now in Paragraph 9).
Revised as suggested (now in Paragraph 30).
This is a great idea. I added Figure 1 and Figure 2 showing screenshots for the two dashboard.
I agree. I added Figure 3 and Figure 4 showing screenshots for the two datasets.
I've revised and adjusted the language about the role of the two RQs (Paragraphs 4 and 27).
I've added a link to download the dataset directly (Paragraph 48).
The added Figure 2 shows a screenshot of the RQ2 dashboard. |
|
Hi Anisa @anisa-hawes (thanks for the reply!) and @charlottejmc, I've placed the 4 figures here: https://github.com/hluling/ph-dash/tree/master/interactive-data-visualization-dashboard. You can find the figure placeholders in the revised lesson draft: https://programminghistorian.github.io/ph-submissions/en/drafts/originals/interactive-data-visualization-dashboard Also a quick note: I updated some files here: https://github.com/programminghistorian/ph-submissions/tree/gh-pages/assets/interactive-data-visualization-dashboard |
|
Thank you @hluling, I've uploaded your four images and updated the placeholder links in the markdown file. |
|
Hi @hluling, It looks great! Thanks for the rapid response and for your engagement in the process! @anisa-hawes and @charlottejmc will process the lesson to the next stage of external peer-reviewing. I will write to you soon once reviewers are assigned. Best wishes, |
|
Thanks very much @dfvalio for providing such thorough feedback on this piece! Dear @hluling, I've organised reviewers' feedback on this comment, combining them and adding some 'notes' that I hope can be helpful (My notes are just suggestions, though. Feel free to respond as you wish). Please, let me know if you need help with anything and feel free to ask questions to reviewers if you think something needs further clarification. Best wishes,
|
|
Many thanks for contributing as reviewers, Diego @dfvalio and Johannes @jobreu! We sincerely appreciate your generous participation. And thank you @caiocmello for your thorough summary comment. I agree that it makes good sense to remove the bibliography in this case, as all works referenced are cited within the endnotes. -- Hello Luling @hluling, What's happening now?Your lesson has been moved to the next phase of our workflow which is Phase 5: Revision 2. This phase is an opportunity for you to revise your draft in response to the peer reviewers' feedback. Caio @caiocmello has summarised their suggestions, but feel free to ask questions if you are unsure. Please make revisions via direct commits to your file: /en/drafts/originals/interactive-data-visualization-dashboard.md. Charlotte and I are here to help if you encounter any difficulties. When you and Editor are both happy with the revised draft, the Managing Editor @hawc2 will read it through before we move forward to Phase 6: Sustainability + Accessibility. %%{init: { 'logLevel': 'debug', 'theme': 'dark', 'themeVariables': {
'cScale0': '#444444', 'cScaleLabel0': '#ffffff',
'cScale1': '#882b4f', 'cScaleLabel1': '#ffffff',
'cScale2': '#444444', 'cScaleLabel2': '#ffffff'
} } }%%
timeline
Section Phase 4 <br> Open Peer Review
Who worked on this? : Reviewers (@dfvalio+ @jobreu)
All Phase 4 tasks completed? : Yes
Section Phase 5 <br> Revision 2
Who's working on this? : Author (@hluling)
Expected completion date? : August 18
Section Phase 6 <br> Sustainability + Accessibility
Who's responsible? : Publishing Team
Expected timeframe? : 7~21 days
|
|
Hi Charlotte @charlottejmc, I need to replace Figure 2 in the lesson. Could you please help me with this? Here is the new version: Thank you @dfvalio and @jobreu for the detailed feedback! Thanks @caiocmello for combining the comments! I've revised the lesson and will address each of the comment below. When a revision is described, the added or edited texts are in italics.
I've removed the sentence.
Added the following: "Unlike static graphs, interactive dashboards allow readers to explore patterns in the data based on their specific interests by filtering, sorting, or changing data view. Features like hover-over tooltips can also provide additional information without cluttering the main display."
Please see the following edits.
I have increased the chart size and the font size, as shown in the new Figure 2 (please see above). In the caption, I have also added the following description “Each chart shows the top-10 non-English newspapers in a given decade. The percentage is the count of newspaper titles in a given non-English language divided by the sum of non-English newspaper titles.”
The following changes are made: “The approach taken by this lesson can be applied to a wide range of digital humanities projects where there is a need to retrieve data from a publicly available source, process and analyze the data, and visualize the research outputs in an interactive manner. In addition, this lesson also shows how to deploy the RQ1 dashboard via a freemium web service, which helps to make similar dashboards widely and easily accessible.”
ATA was used because it emphasized “algorithmic,” which I believe is a useful distinction from CA. I agree with including the more popular and general terms of text mining and NLP. In the revised paragraph, I’ve elaborated on (briefly) the difference between ATA and CA, included more references to CA and ATA, and referred to text mining and NLP when ATA is discussed: “Both methods aim to infer meanings from text through classification or measurement. Whereas CA relies heavily on a carefully crafted codebook based on research questions and multiple human coders to ensure the reliability and validity of a systematic analysis,[2] [3] ATA relies on algorithms and models (a more general term for this method is text mining or natural language processing).[4]"
I added the following text: “Our goal is to retrieve the relevant data for RQ1 via the 2.0 TV API. Regarding keyword, some appropriate Ukraine-related terms can include "Ukrainian" and "Zelenskyy," and the Russia-related terms can include "Russian" and "Putin." With the 2.0 TV API, we also specify the TV geographic market to be "National;" the output mode is the normalized percentage of airtime (the y-axis of the line graph that we will create later); and the time range covers the last 365 days, including today. After data retrieval, we will prepare a dataset like this for visualization.”
I made the following change to clarify: “How has the ranking of top non-English languages of American newspapers changed from the 1690s to the present? Specifically, the dashboard will be designed to show the top ten languages for each decade dating back to the 1690s, highlighting any shifts in their rankings and the emergence or decline of different languages over time.”
I’ve revised the paragraph to improve clarity: “In Figure 4, the rows represent languages, the columns represent decades (from the 1690s to the 2020s), and the cells represent counts of newspaper. We can use the cell values to calculate the percentage for a given newspaper language in a certain decade. The percentage is calculated by dividing the number of newspapers for a given language in a certain decade by the total number of non-English newspapers in that decade, and then multiplying by 100. This gives the proportion of newspapers for that language relative to all non-English newspapers in the same decade. Then, we can visualize what the top 10 non-English newspapers are in a certain decade.”
I’ve changed the URL to https://flask.palletsprojects.com. Opening this link will redirect to the latest version.
I’ve added this and Codespaces: “Have git ready to use in command line. You could also use either of the following (not covered in this lesson):
I’ve added a footnote: “[11] A virtual environment in Python is a self-contained directory that contains a specific version of Python and a set of libraries. It allows you to manage dependencies for different projects separately, ensuring that changes in one project do not affect others. This is especially useful for maintaining consistent development environments and avoiding conflicts between package versions.”
To improve clarity, I’ve removed the original section called “An Idea of a Simple Dashboard.” Its content related to RQ1 has been moved under “Coding the Dashboards -> RQ1,” and the content related to RQ2 has been moved under “Coding the Dashboards -> RQ2.”
I’ve updated the link.
The suggested changes have been made.
The paragraphs under question have been revised: “Next, once we have the data retrieved, we need to prepare the data in a way that is ready for visualization. Our goal is to transform the data into the shape shown in Figure 3, above. Code explanation: The Optional: You can use the ”
I’m able to open the links. Maybe their site was down when you tested it?
I’ve added the following: “Do not close the command line program when the server is running. When you are done, in command line, press
I’ve made the revision: “Second, scroll down and find the section called "Environment Variables."”
I’ve added the following sentences for RQ2: “Regarding workflow, the following steps will be the same as described above: the same prerequisites will be needed; follow the same steps to create a new virtual environment; the same Python libraries will be needed; and you can follow the same steps to deploy the RQ2 dashboard on Render. The data downloading procedure and the specific code used for the RQ2 dashboard will be different from RQ1. However, the underlying logic is the same: We start with data retrieval, prepare the data for visualization, code the dashboard frontend, then code the dashboard backend. I will briefly describe these in the next two sections.”
Per Anisa’s reply, I deleted the bibliography. I hope that I have addressed the comments successfully. Thank you all again! |
|
Hi @hluling, Just to let you know I've replaced Figure 2 with the new version! Thanks so much for all your energy with this. |
|
Dear @caiocmello, Once you've had a look through @hluling's Phase 5 Revisions and have confirmed you're happy with how the lesson now reads, please do let us know! We can then move to the next phase of the workflow, which is Phase 6: Sustainability & Accessibility. I'll begin with copyediting, before typesetting and the final checks. Thank you! ✨ |
|
Hella @hawc2, if @caiocmello is indeed happy with the lesson at this stage, then it is ready for your final read-through before we move it to Phase 6. Thank you! |
|
Dear @charlottejmc, I have revised this draft and I am happy for it to move on to Phase 6. Thanks very much @hluling for your work on this piece and for your careful editions, following the recommendations of reviewers. |
|
Thank you, @caiocmello. Hello Luling @hluling, The Managing Editor Alex @hawc2 will also read the lesson to confirm if it should be moved onwards to Phase 6, or if he'd like to suggest some further revisions. Thank you, |
|
Hi @hluling, my apologies for delays getting back to you with my review - the start of the semester swept things away. This is looking really interesting, but there are some sections of the code that seem to be too briefly described. There’s a few changes I’d recommend making to the framing and presentation of key details. I’ve made a round of line-edits where you can see some of the simple changes I made to the table of contents, headings, and the wording of some sections. Right now the intro section focuses on showing the final dashboard images the lesson will produce. But this information would be better to save for the end of the lesson. Instead, spend more time in the intro discussing the datasets and general types of data visualizations you will produce. It’s not clear in the intro what kind of graph will be viewable in the end, and it’s not concrete what the publicly available data sources are that you selected to answer your research questions. You end up going into detail about that below, but you might as well say concretely what they are the first time you mention them. This is a difficult lesson that requires some base knowledge of Python and deploying code, and it may be helpful to add some more prerequisite lessons and helpful references/guidelines for some of those complicated steps (like running Python in the command line when you first mention it). All the sections that begin “Code explanation” shouldn’t include that phrase, they should just actually describe the code. These sections could all afford to include more commentary about the code. Ideally you have commentary before and after the code, so instead of just citing code and then providing one paragraph describing the code, weave the commentary before and after the code. Ideally code chunks are less long, and there’s more detail per each chunk of code. You do say that for Q2 you don't provide commentary because it's similar to Q1, but you should still provide some commentary to direct the reader. Please take a look at most of our published lessons, and you will get a better idea of the custom for citing and discussing code. Once you've made those revisions, I can take a final look over it for any other lingering questions relating to the overall structure and last section. Some of the formatting and related presentation of information will continue to get revised after we send this on for copyedits and for the publishing manager to review. Please let me know if you have questions! |
|
Looking more at your lesson, @hluling, I'm not sure it's even worth keeping RQ2. You give so little time to walking through it, I feel like it's a distraction, and it might be easier to just have 1 research question this whole lesson focuses on? It is already quite difficult, and tracking two different Research Questions and datasets is alot to follow |
|
@hluling as an alternate solution, I think what would be best is to keep the content but change the framing. I would move away from the heading sections being titled Research Question 1 and 2, and actually give those sections content titles that refer to what the section is about. You could reorganize the essay so it is less about two research questions, and more about, the second part serving as an extension of the first part to show extended features of the tool through a secondary research question. That research question and the data could be brought later, after you've shown everything for what you've currently labeled RQ1. That RQ1 is the majority of the whole lesson, so it doesn't make sense to divide it up as if it's a part 1 of a two part lesson. The RQ2 section could be converted into a discussion of extensions of Dash using a secondary research question and dataset that you introduce when those features come up. The conclusion could use more discussion, tying together all these loose threads. What are the key methodologies you are teaching for people to advance their research and its presentation? Can you resummarize and elaborate on those here. Feel free to take a few paragraphs to wrap up. I made substantial line-edits to some areas to break up long paragraphs and show you how code should have comments woven in. In a few places I added comments in brackets where I'm asking you to elaborate more on the code. Generally avoid comments inline of code when it can serve as preface or subsequent explanation after code. Lots of our recent lessons will offer good examples of how to write more extended discussions of code. For example, when you cite a pandas dataframe for the first time, explain what it is, or provide a link to a secondary resource (wikipedia is fine). That kind of detail will really help guide the reader who isn't already pretty familiar with this type of work. If you can explain in more detail what a code is doing, what the purpose of each function is to that step in the process, that would be helpful, even if it's a brief sentence or two per line/chunk of code. The later sections on deployment, especially, are going to be difficult for people. Running Python code is already not the most user-friendly, so using Github and Render are going to need alot of helping hands I'd think. We will label this lesson the highest difficulty. But if you can find more ways to provide guidelines and tips, please do. In a similar way, you could make the Jupyter notebook available as a functional Colab notebook for ease of running. The more you can explain, even just in a few sentences, how to run Python code in the command line, as well, the more likelihood people will be able to use your lesson. Finally, I'd recommend adding more images. As I said before, ideally you don't show the end result until the end of the lesson. I replicated the images from the front near where they should appear at the end. But they shouldn't appear twice. Could the first ones be just one general image pulled from dash's website showcasing what the tool can do? Ideally you have more images throughout the lesson, not all frontloaded in the first half. So take a moment to consider what other images can you include earlier to give the reader a sense of the methodologies you will be teaching to advance their research? |
|
Hello Luling @hluling, What's happening now?Your lesson remains in Phase 5: Revision 2. The Managing Editor Alex @hawc2 has made some additional suggestions following Caio's @caiocmello. Feel free to ask Alex or Caio further questions if you are unsure. You can make revisions via direct commits to your file: /en/drafts/originals/interactive-data-visualization-dashboard.md. And, as always, @charlottejmc and I are here to help if you encounter any difficulties. I've plotted in the revised timeframes for this Phase: %%{init: { 'logLevel': 'debug', 'theme': 'dark', 'themeVariables': {
'cScale0': '#444444', 'cScaleLabel0': '#ffffff',
'cScale1': '#882b4f', 'cScaleLabel1': '#ffffff',
'cScale2': '#444444', 'cScaleLabel2': '#ffffff'
} } }%%
timeline
Section Phase 4 <br> Open Peer Review
Who worked on this? : Reviewers (@dfvalio+ @jobreu)
All Phase 4 tasks completed? : Yes
Section Phase 5 <br> Revision 2
Who's working on this? : Author (@hluling)
Expected completion date? : November 2
Section Phase 6 <br> Sustainability + Accessibility
Who's responsible? : Publishing Team
Expected timeframe? : 7~21 days
|
|
Thanks, Alex @hawc2 for the detailed feedback and edits! I'll work on the revision. |
|
Thank you for your email, Luling @hluling. To confirm, we're looking forwards to receiving your revisions in early November. I've adjusted the timeframes above. Please don't hesitate to write to us if you have questions in the meantime 🙂 |
|
Hi Alex @hawc2, thanks again for the comments and edits. I've revised the lesson based on your feedback. Here is a summary of the revisions:
I hope that I have addressed the comments successfully. Please let me know if any further revision is needed. |
|
Thank you, Luling @hluling. We appreciate your work on these revisions. -- Hello Alex @hawc2, Please let us know when you've had time to review these revisions. |
|
@hluling thank you for these thorough revisions, the lesson is much improved. It's an excellent exploration of building dashboards. @caiocmello could you look this over one last time and share any thoughts for revision before we send this to copyedits? My only immediate thought for revision is mostly something we can address in copyedits: some of the section headings aren't very explanatory of what that section is like, such as down in the Extended Use Case area where there's a heading that's just Dataset. I still plan to test the Colab notebook, make sure the code works still as expected, and come back separately if there are any changes I'd recommend for it. We can finalize the notebook after copyedits. |
anisa-hawes
moved this from 5 Revision 2
to 6 Sustainability + Accessibility
in Active Lessons
|
Hello Luling @hluling, What's happening now?Your lesson has been moved to the next phase of our workflow which is Phase 6: Sustainability + Accessibility. In this phase, our publishing team will coordinate a series of tasks including: copyediting, typesetting, generating archival links, collating copyright agreements, and reviewing essential metadata.
When our Sustainability + Accessibility actions are complete, the Managing Editor @hawc2 will read the lesson through one final time ahead of publication. %%{init: { 'logLevel': 'debug', 'theme': 'dark', 'themeVariables': {
'cScale0': '#444444', 'cScaleLabel0': '#ffffff',
'cScale1': '#882b4f', 'cScaleLabel1': '#ffffff',
'cScale2': '#444444', 'cScaleLabel2': '#ffffff'
} } }%%
timeline
Section Phase 5 <br> Revision 2
Who worked on this? : Author (@hluling)
All Phase 5 tasks completed? : Yes
Section Phase 6 <br> Sustainability + Accessibility
Who's working on this? : Publishing Team
Expected completion date? : ~21 days
Section Phase 7 <br> Publication
Who's responsible? : Managing Editor @hawc2
Expected timeframe? : ~10 days
|
|
Hello @hluling, This lesson is now with me for copyediting. I aim to complete the work by ~21 November. Please note that you won't have direct access to make further edits to your files during this phase. Any further revisions can be discussed with your editor @caiocmello after copyedits are complete. Thank you for your understanding. |
|
Hello @hluling and @caiocmello, I've prepared a PR with the copyedits for your review. There, you'll be able to review the 'rich-diff' to see my edits in detail. You'll also find brief instructions for how to reply to any questions or comments which came up during the copyedit. When you're both happy, we can merge in the PR. |
|
Hello @hawc2, This lesson's sustainability + accessibility checks are in progress.
Publisher's sustainability + accessibility actions:
Authorial / editorial input to YAML:
Files we are preparing for transfer to Jekyll:
Promotion:
Publisher's post-publication tasks:
|
|
Hi @hluling, What do you think about this thumbnail for your lesson? I think it represents the title 'interactive data visualization' rather well! I also found this chart which could work, although it's not as playful as the first option. Feel free to suggest your own images too (following the guidance above). |
Programming Historian in English has received a proposal for a lesson, 'Creating a Dashboard for Interactive Data Visualization with Dash in Python' by @hluling.
I have circulated this proposal for feedback within the English team. We have considered this proposal for:
We are pleased to have invited @hluling to develop this Proposal into a Submission to be developed under the guidance of @caiocmello as editor.
The Submission package should include:
We ask @hluling to share their Submission package with our Publishing team by email, copying in @caiocmello .
We've agreed a submission date of April. We ask @hluling to contact us if they need to revise this deadline.
When the Submission package is received, our Publishing team will process the new lesson materials, and prepare a Preview of the initial draft. They will post a comment in this Issue to provide the locations of all key files, as well as a link to the Preview where contributors can read the lesson as the draft progresses.
If we have not received the Submission package by April, @caiocmello will attempt to contact @hluling. If we do not receive any update, this Issue will be closed.
Our dedicated Ombudspersons are Ian Milligan (English), Silvia Gutiérrez De la Torre (español), Hélène Huet (français), and Luis Ferla (português) Please feel free to contact them at any time if you have concerns that you would like addressed by an impartial observer. Contacting the ombudspersons will have no impact on the outcome of any peer review.
The text was updated successfully, but these errors were encountered: