Modify Sample Google Sheet - convert data to comma delimited.

[sync-by-unito[bot]]

┆Issue is synchronized with this Asana task by Unito ┆Attachments: Screenshot_47.png | 9-SoP 2 5th Tab.png | result-yes.png | result-no.png | tab 5 corrections.png | tab 5 corrections 2.png | Screenshot 2020-09-17 at 10.22.28.png

[sync-by-unito[bot]]

➤ steve button commented:

Serge - I have made a modification to the Google sheet. I have written a formula that converts the chart data to comma delimited. There are now 4 columns:

-Series1Original -original excel data in cells:keep as the originals will be pasted in this column -Series1 -data converted to comma delimited from Original -Series2Original-original excel data in cells:keep as the originals will be pasted in this column -Series2 - -data converted to comma delimited from Original

[sync-by-unito[bot]]

➤ Serg commented:

ok, thanks but we need to remove the empty rows, and those with only numbers for Series1 etc. As I read the spreadsheet as a csv file line by line. So it looks like this one https://docs.google.com/spreadsheets/d/1J-hK_N7hpayxvo3GztfjIX9-HtflwgPgE_Cyj0-IkGA/edit#gid=0

[sync-by-unito[bot]]

➤ Serg commented:

I am using this sheet as a test one

[sync-by-unito[bot]]

➤ steve button commented:

Understood - but is it not possible to keep the "Original"? The reason I ask is that the client will be copy/pasting their data here as cells. Then the formula automatically converts it to delimited in the new column. Is it not possible to just not read Series1Original / Series2Original?

[sync-by-unito[bot]]

➤ Serg commented:

ok, I will just skip empty rows

[sync-by-unito[bot]]

➤ steve button commented:

If this is a problem just let me know - I just want to explore what is the best way for them (the client) to build the final sheet in a way that is logical for them and gives you what you need. But feel free to tell me "this is not a good idea" and I will come up with a different approach...

[sync-by-unito[bot]]

➤ Serg commented:

Here is an example with that spreadsheet http://serg.one/mapbox-spreadsheet-d3chart-popup/1.html

[sync-by-unito[bot]]

➤ Serg commented:

BTW here is what I got when I run your index.html

[sync-by-unito[bot]]

➤ Serg commented:

no map and no right tab

[sync-by-unito[bot]]

➤ steve button commented:

what browser? Its running fine in Chrome for me - haven't tested others yet

[sync-by-unito[bot]]

➤ steve button commented:

The test you have done is a great starting point. Thanks. Let me get back to you tomorrow with specific comments.

[sync-by-unito[bot]]

➤ Serg commented:

Chrome under windows 10

[sync-by-unito[bot]]

➤ steve button commented:

Hi- as I said last night - great start. Here are some initial comments:

The Map:

• on clicking a location should flyto and center the map on that location -Would like to have a radiating circle on each location point (as you did in the ESMAP project (http://annualreport.esmap.org/#Overview)

The Popup: -for now this is good, would like to have previous/next arrows at bottom of the popup to navigate sequentially.

The Chart:

• I see you are using D3 charts - I will give you an accurate guide for the chart base later today: names, titles etc.

I have a call with the client who is responsible for the data at 11am today. Im going to show him the Google Sheet, explain how it works and show him your test. Will let you know his feedback afterwards.

[sync-by-unito[bot]]

➤ Serg commented:

Hi, with flyto, marker pulsation, prev/next http://serg.one/mapbox-spreadsheet-d3chart-popup/2.html ( http://serg.one/mapbox-spreadsheet-d3chart-popup/1.html )

[sync-by-unito[bot]]

➤ steve button commented:

This is great -

a couple of points: 1/ I talked with client on Friday and have another section of information to add to the accordion. I will clarify Monday.

2/ Can you push what you are doing (...2.html) to the repo on Github. that way we can collaborate on it and the "test page) will stay constant. No need to do this at once, but as we move forward it will be more efficient. have a good weekend

[sync-by-unito[bot]]

➤ steve button commented:

Hi- here are details of the next step for the chart: there is an extra tab to add to the accordion. It shows a table with a series of yes/no answers for different conditions. Take a look at the attached PNG to get an idea.

The data is coming from this sheet: https://docs.google.com/spreadsheets/d/1Ew7fy_mxpa4CH55KaMDA1rSF8j9Bxe_AE3IjIqn8Mdg/edit?usp=sharing

Be sure to look at the tab "Key Data". As you will see the data uses 0 to represent No, and 10 to represent Yes.

My question to you is: how should this data be added to work with your tools? When you tell me, I will modify the sheet we are currently using to include this data.

My client who is responsible for Data is on vacation for one week next week. I would like to add the 5th tab to the existing test before he leaves, so he can comment and approve -that way I can assemble complete Data sheet while he is gone. Is this possible with your schedule? Steve

[sync-by-unito[bot]]

➤ Serg commented:

Hi Steve, So, are we going to use 2 spreadsheets as our data source? one for coordinates and one as chart data?

[sync-by-unito[bot]]

➤ Serg commented:

and I need push access to github repo my github name is benderlidze or benderlio@gmail.com

[sync-by-unito[bot]]

➤ steve button commented:

Hi - no, one sheet. At the moment, they are two separate sheets. If you can tell me how you need the information that builds "Yes/No", I will modify then I will add all the data that constructs the 5th tab into the existing sheet.

[sync-by-unito[bot]]

➤ Serg commented:

I can work with 0 and 10 - it is not a problem

[sync-by-unito[bot]]

➤ steve button commented:

OK - great, I wasnt sure. I will combine the two sheets together in the morning. How is your schedule in terms of being able to incorporate this before the end of the week?

[sync-by-unito[bot]]

➤ Serg commented:

will do that before the end of the week

[sync-by-unito[bot]]

➤ steve button commented:

Great - that will let me get the client's reaction before he leaves. Then I can focus on building out all the data.Will get combined sheet to you in the mrning.

[sync-by-unito[bot]]

➤ Serg commented:

ok, thanks

[sync-by-unito[bot]]

➤ steve button commented:

Hi- I have modified the sheet: to be safe I have created a new version so you will need to change your link ref: https://docs.google.com/spreadsheets/d/1OvT9KX1_V0oy-4dZYOfli-cf9g0CjeapV9-vSxNriEs/edit?usp=sharing

Be Aware that as well as adding the 5 new columns for the accordion panel 5 info, I deleted one column that we were not using : it was Column I Sample Chart.

In the panel 5 data as you know 0 is No and 10 is Yes. Instead of these words, can we visualise the result with 2 icons? I have attached two sample PNGs to test. These are not final design but to test if it works...

[sync-by-unito[bot]]

➤ Serg commented:

Hi Steve, please have a look http://serg.one/mapbox-spreadsheet-d3chart-popup/test3.html

[sync-by-unito[bot]]

➤ steve button commented:

so fast - this is great. It lets us see that the functionality is working and decide what needs to change graphically to make it more readable.

Initial Reaction: 1 Obviously the icons are too small at this size 2 Having this new info at the bottom means when opened it is initially hidden and the user has to scroll - maybe change the tab order and make this the first?

don't change anything yet - would be interested in your thoughts/reactions/suggestions...

[sync-by-unito[bot]]

➤ steve button commented:

OK - some basic changes -take a look at these 2 screenshots attached. 1/ you will see the real chart is using more data points than we have (comma delimited) in the sample. I will add some numbers in the sample so it matches.

2/ I will eventually style this but a couple of size changes (icon and tab content font size) will help make this more readable for client review. Marked changes on screenshots...

[sync-by-unito[bot]]

➤ Serg commented:

Here is an updates version, but what to with the chart? http://serg.one/mapbox-spreadsheet-d3chart-popup/test4.html ( http://serg.one/mapbox-spreadsheet-d3chart-popup/test3.html )

[sync-by-unito[bot]]

➤ steve button commented:

Hi - thanks -much better. Was the chart not clear from my notes on screenshot?

Basically, I am supposing you can label your base chart in radarchart.js? If so, then the screen capture at the right shows what it should look like and what the labels are. Does that make sense?

[sync-by-unito[bot]]

➤ Serg commented:

Yes, but I need to know which number belongs to which field I have only these 32,78,99,32,66,55

[sync-by-unito[bot]]

➤ steve button commented:

OK - I understand- my note on the screenshot was not clear. The real data (which I am assembling now) has 12 comma delimited numbers. The sample sheet only has 6 numbers. I will add more numbers to that sheet now. They correspond with:

Effectiveness of PPD -1st number Government -2nd number Local private sector -3rd number EU private sector -and so on SMEs Large companies Micro and informat(to be clarified) IFIs International Organisations Local financial sector Women Young people

[sync-by-unito[bot]]

➤ Serg commented:

ok

[sync-by-unito[bot]]

➤ steve button commented:

the Google sheet now has sets of 12 comma delimited numbers -again this is dummy data but should now correspond to the 12 labels.

I am in the process of merging all real dat

[sync-by-unito[bot]]

➤ Serg commented:

ok

[sync-by-unito[bot]]

➤ Serg commented:

Hi, please have a look http://serg.one/mapbox-spreadsheet-d3chart-popup/test5.html

[sync-by-unito[bot]]

➤ steve button commented:

Great work - this is really good to show the client and get his feedback. Can you make some small changes to .map-overlay?

I don't want to get into styling this completely at the moment, until I have finished the overall design for the whole site, but a couple of css changes to this element will help to present. Screenshot attached showing changes made to: top -40px left- 40px border-radius-20px box-shadow-0,0,0,0.5 width-500px

One question: Is it possible within the structure for the graph to remain visible/static all the time, and only the other panels scroll? I realise this would mean the overall window would need to be bigger -just want to know if it is possible so I can consider it...

[sync-by-unito[bot]]

➤ steve button commented:

sorry-to be more clear

top 40px left 40px border-radius 20px box-shadow 0,0,0,0.5 width 500px (I put a dash between word and number and it looked like minus numbers)

[sync-by-unito[bot]]

➤ Serg commented:

Please, have a look http://serg.one/mapbox-spreadsheet-d3chart-popup/test6.html

[sync-by-unito[bot]]

➤ steve button commented:

excellent - I just showed this to the client and he is very happy. Next steps will be to finish all real data (I'm making good progress on this) and deal with styling this and integrating into my files.

Nothing more for you to do on this until next week.

There is a second set of information to come from a separate Google Sheet for this project.

Its nothing to do with charts - more a library of documents and resources associated with different countries. I have a call with the main client about that tomorrow morning and will be able to give you clearer direction next week.

Thanks for all your work -very happy with how things are progressing.

[sync-by-unito[bot]]

➤ Serg commented:

Ok, thanks