Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

General Feedback Thread #52

Open
curran opened this Issue Jul 31, 2018 · 34 comments

Comments

Projects
7 participants
@curran
Copy link
Member

curran commented Jul 31, 2018

This is a thread for general feedback.

Frustrated using VizHub? We want to know!

Please freely comment here about anything.

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 2, 2018

Resize the page should work.

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 2, 2018

If I click on any link it should open in new tab..

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 2, 2018

have a suggestion .....if there is feature ... like moving cursor on that character in the file will give little info about it ..right on the page as a small pop up.....
for example ..I want to know what is "charset"...and if i hover on it gives short info.

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Aug 3, 2018

@nitanagdeote Great ideas!

The links opening in new tabs is tracked as Open GitHub Links in New Tab #55

By resizing the page, do you mean resizing the panels within the page?

This is tracked as IDE - Resizable Editor Pane #54

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Aug 11, 2018

We made the change for opening the GitHub links in new tabs. Thanks for that idea!

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 17, 2018

Hey...just want to let you know....there is cursor issue...if you zoom out...the cursor disappears...

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 17, 2018

The intro video could be a link....will save space on the page

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 17, 2018

screenshot from 2018-08-17 23-42-16

See what you tube is suggesting after playing the video....its distracting....

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Aug 18, 2018

@nitanagdeote

  • Re: video: Ah yes, great point! Thanks for the screenshot it's really helpful.
  • Re: cursor: confirmed I can reproduce the behavior. Created a new issue #98
@curran

This comment has been minimized.

Copy link
Member Author

curran commented Aug 20, 2018

@nitanagdeote I figured out how to disable suggestions after the video plays! There's an option in the YouTube embed to turn them off. I updated all the video embeds so they don't show suggestions after playing.

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 23, 2018

hey....so...when I fork the page....is there anything that says this is the forked page or something.....

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Aug 23, 2018

@nitanagdeote Fantastic idea! Made a new issue for that Forking Confirmation #107

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 23, 2018

hi....how to delete the file from the list of files in profile...

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Aug 24, 2018

Yes that still needs to be implemented. Tracked as Delete Visualization #88

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 25, 2018

......On profile page is it possible to make new file....

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 25, 2018

suggestion...How about having "hello world" template available in profile or something..

@nitanagdeote

This comment has been minimized.

Copy link

nitanagdeote commented Aug 27, 2018

wondering ...if there was a share button......

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Aug 28, 2018

Great ideas! Tracked as:

  • Create Visualization from Profile Page #121
  • Share Button #122
@KCachel

This comment has been minimized.

Copy link

KCachel commented Sep 18, 2018

It would be really awesome if the browser tab was able to pull in the Name of the Visual vs. "Edit Visualization". This would be really helpful when going between them.
For some similar inspiration check out this blog post:http://joelcalifa.com/blog/tiny-wins/

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Sep 18, 2018

@KCachel That's an excellent idea! Thank you. Tracked as #142

@curran curran added this to To do in VizHub Nov 2, 2018

@curran curran moved this from To do to Unprioritized in VizHub Nov 2, 2018

@gr2595

This comment has been minimized.

Copy link

gr2595 commented Nov 15, 2018

Exporting is an issue for me. After exporting, the index.html for your "Cars Scatter Plot" visualization works. I can make minor tweaks to it through bundle.js (like title name), but if I make any changes in index.js, the code breaks and the html returns an empty page. Also if I try changing anything regarding the data, the code also breaks. This would not be an issue, if the html files from visualizations I create and export from vizhub work. For example I created the project called Garrett R's CitiBike Analysis--it looks great on the vizhub platform, but the exported html does not work.

Otherwise, Thank you for the tutorials and awesome source!

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Nov 16, 2018

Greetings @garrettriha and thank you for the report!

For the exported HTML to work correctly, you'll need to use a local HTTP server like this command line utility http-server. Are you using a local HTTP server? Just opening the file by double clicking it will open a URL that starts with file://, which will not work for loading data files.

To get bundle.js to update, you'll need to use the build script included in the exported package.json, which uses Rollup to combine the ES6 modules into a single output file. To use the build script, first run npm install in the exported program directory, then run npm run build.

I investigated your particular work G. Riha Citibike & Commuting Analysis to see if there were any problems with the export workflow. I was able to run the program locally and update bundle.js from changes in index.js without any issues. The trick is to use the right tools in your development environment.

Here are the exact commands I used in order to get the workflow to work (on Ubuntu Linux):

mkdir exportTest
cd exportTest
# Simulate clicking on the link to download the file
wget https://vizhub.com/api/visualization/export/3704472abcf644e79ed15ceda6bd2902 --content-disposition
unzip G.\ Riha\ Citibike\ \&\ Commuting\ Analysis.zip 
npm install -g http-server
http-server

Now the program is available at http://localhost:8080/.

In a separate terminal window, I ran the following commands to set up the build script:

npm install
npm run build

Now bundle.js is updated. At this point, each time you make a change to a source file, you can run npm run build in order to generate a fresh bundle.js.

There's a paragraph or so on this topic also in the "Visualization Export" section of Medium: VizHub 1.0.

I realize all these steps are not obvious, and I do have plans to create a documentation page within VizHub itself containing these notes. Thanks for your report though, as it's led to this first draft of the documentation!

If anyone would like to take a stab at implementing this documentation UX, PRs are welcome! Created a new issue to track this over at #173

@gr2595

This comment has been minimized.

Copy link

gr2595 commented Nov 16, 2018

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Nov 16, 2018

Happy to hear the problem is solved!

By the way, the reason the cars example works is that it requests the data from a VizHub URL (csv('https://vizhub.com/curran/datasets/auto-mpg.csv')), whereas your example wasn't working because it loads a local file (csv('data.csv')). The HTTP request for the VizHub URL worked, because it's a remote endpoint (and has CORS enabled), whereas the local file loading was not working, because that is the part that depends on the local file server running. The browser will not load external files using the file:// because it's a security risk, but if you start a local file server it will serve the files (in that directory only) over HTTP, so the call to csv will work.

Part of the goal with VizHub is to hide these messy details, but once you export you will need to face them.

Welcome to the world of coding and good luck!

@curran curran moved this from Unprioritized to Backlog in VizHub Nov 18, 2018

@leorawe

This comment has been minimized.

Copy link

leorawe commented Nov 18, 2018

I am trying to upload a dataset that I found on Cool Datasets. I converted it to csv from here:
https://raw.githubusercontent.com/hopperrr/ellis-immigration-by-ship/gh-pages/data/trips.tsv
I got to the Upload Dataset page and filled in the blanks. However, it does not do anything when I hit upload. I tried a different one, and that one did work.
When I go to: https://vizhub.com/upload-dataset/trips.csv
I get: An unexpected error has occurred.

@leorawe

This comment has been minimized.

Copy link

leorawe commented Nov 18, 2018

I think I figured it out - Googlesheets did not add "" to strings. When I did a shorter version and used an online converter, it added strings to my text, and that worked. Need to find a tsv to csv converter that works for longer data.

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Nov 18, 2018

@leorawe Thanks for the report! There's a hard limit of 5MB for datasets at the moment, and I just had a look at that file, it appears to be 5.8MB. So I think what happened for you is that the upload failed due to the size limit, but no error was shown. It's a flaw in VizHub that it doesn't show an error at that point. There's an open issue for adding that error message datavis-tech/vizhub#43 Hope to get to it soon!

In the case of that particular dataset, there appears to be many duplicated values for the "Port" and "Ship" columns. One way to reduce the file size is to use a data dictionary for those columns, replacing the full strings with numbers that are codes for each unique value, then have a separate table that shows what code corresponds with what values. It's a bit more involved than one would hope, but that's one way to get it into VizHub.

You know, I think you could also pull down that URL directly in your program, rather than uploading to VizHub first. For example the following should work:

import { tsv } from 'd3';
const url = 'https://raw.githubusercontent.com/hopperrr/ellis-immigration-by-ship/gh-pages/data/trips.tsv';
tsv(url).then(data => console.log(data));

Indeed it works! Here's an Example of Loading External Data.

@CleverChuk

This comment has been minimized.

Copy link

CleverChuk commented Jan 22, 2019

the "sign up / sign in" prompt takes up a lot of space and is kinda annoying. Can you make that dismissible? Thanks in advance.
(Edit)
Add a footer too, to have some separation. Makes it easy on my eye haha.

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Jan 23, 2019

Thanks for the feedback!

@tasqon

This comment has been minimized.

Copy link

tasqon commented Feb 5, 2019

Have a look at this visualization D3 v5 Circle Packing from Observable. It is actually kind of a template and describes the steps needed to port a (Observable) JavaScript "notebook" into a VizHub vanilla JavaScript index.html

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Feb 6, 2019

@tasqon Very cool! I'm thrilled to see things being ported from Observable to VizHub. It means there is hope for VizHub :)

May I suggest setting a custom height for it (by clicking "set height"), so you can see the bottom of the packed circles.

Thanks for sharing!

@tasqon

This comment has been minimized.

Copy link

tasqon commented Feb 6, 2019

VizHub is the right meeting point for vanilla D3 JavaScript. No doubt about that.

@curran

This comment has been minimized.

Copy link
Member Author

curran commented Feb 6, 2019

The most frequent complaint I see out there about Observable is that it's not vanilla JavaScript, leading to difficulties with exporting and downstream use.

@tasqon

This comment has been minimized.

Copy link

tasqon commented Feb 6, 2019

Yes that disturbed me too. The (Observable) Java Script notebooks have a plus and minus side. The big plus I see is that you can share and work with others interactively with Markdown comments in between on one project (notebook). The minus side is that the notebook use the Observable Standard Library and want its own runtime environment. Hence I asked the Observable folk for the steps required from a (Observable) JavaScript to a vanilla JavaScript. You can follow the discussion when you read the README.md file in this VizHub project D3 v5 Circle Packing from Observable. You need to copy and paste all the fragments manually from the Observable notebook into your index.html, index.js and style.css files. With the right link to the Observable Standard Library. That is fair and fills the gap between vanilla JavaScripts and (Observable) JavaScript notebooks. The point is that a growing number of visualizations by Mike Bostock are only available in new Observable notebooks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.