How to integrate a json data frame into an html file - html

I'm currently "learning" d3js by myself and I found a lot of examples here. It seems that for all the visualizations we need two separated files. One is a script (an html file) and the other one is a json file which contains our data set.
I'm curious if there is a way to put the json file into html file so we can have only one file. I think I saw an example like this previously on the internet but I lost it.
The only reason I want to do it like this is that if data set is separated from html file, I cannot use Chrome to view my result (I think Chrome is blocking the script from reading local data set). I can use Firefox to open up my result but the animation doesn't perform smoothly.
Maybe some of my understanding is not really right. But if there is any suggestions please let me know. Thanks in advance.

If you're just using one HTML file, you probably have a <script> tag on your page where all the code is located. You can define your data as a Javascript array.
It can be nice to use multiple files to organize code, data, and view elements (the HTML). This page gives some help on setting your browser to let you do that. For Chrome, close all open windows. Then run Chrome from the 'Run' prompt with this flag: chrome --allow-file-access-from-files

Related

Make chrome to read properly my own file extension

I am using on my computer a file extension I invented .gameos, in the files with this extension I put html code (html+js+css).
Whenever I try to open this files with Chrome it shows me the plain text of the html document with all of its tags, all the functions of javascript and all style properties of css.
I was wondering if there is a way to solve this problem on my single computer (sort of telling chrome how to read this files) and if there was a way to solve the problem with every computer, so each one will always show the html game and not the plain text.
Thanks in advance

What's wrong with this HTML page that I created?

I'm taking a programming class on Lynda.com and I just finished creating this HTML web page, but it's not opening on a web browser. Can someone help me figure out what I did wrong? Thanks! :)
Here's what I did:
Picture
I took a look at your code and it not only looks correct, it displays for me on Chrome, Firefox, Opera, and MS Edge.
I'm thinking that it may be the manner in which you are trying to access the file to display.
Follow these two solutions and see if one of them works for you:
Solution 1) Find where on your hard drive you are saving your "body.html" file. When you find the file, click on it and it should automatically open the file in whatever your default browser is for you.
Solution 2) If you are trying to manually type in the directory address for your "body.html" file inside the web address box of your browser, make sure you are writing the address correctly. Remember, the address is coming from your hard drive and not the internet itself. A format would look something like this:
C:/Website-Projects/body.html
or try:
C://Website-Projects/body.html (***the only difference is the 2 back slashes instead of one).
in the example above, "C" stands for the designation of my hard drive, "Website-Projects" is the name of the folder on my "C drive" that my target file is in, and "body.html" is the target file I'm trying to open within the "Website-Projects" folder.
Give those two solutions a spin and see if that helps.

Automatically convert markdown to html on browser refresh

Paul Irish gave some amazing insight on web tooling this time during googleio 2013. So he was presenting some slides that had been parsed into html from a markdown source i.e a .md file.
However one thing that surprised me was when he edited the source markdown for the slides in the chrome dev tools sources panel and then hit refresh, the .md automatically compiled again into the html to be output on the browser. Now I understand that the changes he made to the markdown file in the chrome dev tools were made also on his local file saved on the computer, but how did the markdown file automatically get converted into the html file upon save and refreshing the browser?
I am a complete beginner with markdown and I would really like to have this functionality. Any help is deeply appreciated
The whole purpose of markdown is that it is both human readable and machine readable. It is designed to be converted to HTML.
Depending on the language you are using, there are markdown parsers that create HTML for you.
For example, for PHP.
So, as an example, to have your server show the contents of say, homepage.md, your index.php file could have something like this:
$filename = $_GET['file'];
$content = markdown( file_get_contents( "path_to_markdown/{$filename}.md" ) );
print $content;
And, to see it in your browser you would go to example.com/?file=homepage
I will do my best to answer this.
HTML Mark down is a shorthand syntax that can be interpreted by a web browser to format or render the page in html.
this is taken from Stack Overflow.
eg
The syntax is based on the way email programs
usually do quotations. You don't need to hard-wrap
the paragraphs in your blockquotes, but it looks much nicer if you do. Depends how lazy you feel.
So, like converting from a file in notepad ++ from text to html. The file will be formatted using the basic rules of that particular syntax.
It also must be remembered, that programs are not mind readers. If the mark down code is not valid, neither will the corresponding html code. Just as saving a text file that is "supposed" to be formatted in html. It won't save as a working html file if the syntax is incorrect.
Also, markdown is not a total replacement for real code. It cannot cover the breadth and depth of the true coding language. I could liken it to pseudocode, but that is more of a lateral example.
In answer to your latest comment, If a second file is created from a first file (and the format is altered) -( in this case from mark down to html) - If the first file is then edited, without overwriting the changes into the second file, it cannot expect to be altered.
This is a good link a fellow SO gave me:
https://stackoverflow.com/editing-help
Please feel free to edit, if I have made an error.
I haven't tried this extension for Chrome but it seems to automatically render markdown (.md) files in Chrome.
https://chrome.google.com/webstore/detail/markdown-preview/jmchmkecamhbiokiopfpnfgbidieafmd?hl=en
In Firefox, I use the following extension for the same functionality.
https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer/
No need for a separate .html file, just save the text file with .md extension and open it in the browser.
Hope that helps.

What are possible ways to read and display .docx/.doc file in editable mode

Using HTML5 File API I am able to read text and XML files without any problems. I have tried to read the .docx/.doc file with the same code and that was not working. In my chrome extension I need to open a .doc/.docx file in editable mode in Google chrome. I am really waiting to know all the possible ways to achieve this. I found some extensions like Google docs viewer etc.. But they are opening files in preview mode. Please help me on this
The .DOC file is binary, and DOCX is a zip file containing a whole collection of XML files that make up a Word document, so neither can easily be read by your straight XML reader.
I don't think there are any native extensions or bits of code for Chrome to edit DOC or DOCX files, so you'd have to write your own - presumably, that's what the extension you're considering would do. You can use the Google docs viewer as a jumping off point - there's no difference between "preview mode" and "edit mode" other than one writes back to the file and the other doesn't. And you'd need to add the controls to modify the document on screen, which may be the larger hurdle.
If you can give some detail on where exactly you're stuck, that might help the community point you towards a solution, but a general "nothing does this for me" is likely to result in a little less help.
Good luck!
you can use jquery for this.
you can use typewith me which is generated in jquery where you can import/export docx,doc.pdf,etc.. files check type with me and private pad
you can use its jquery code for your use as it is opensource.

Does HTML 5 allow to invoke save file dialog with file created in JavaScript?

Does HTML 5 allow to invoke save file dialog with file created in JavaScript?
Yes, but you don't really need HTML5 for it, what you can use is a Data URI. There are several limitations, like IE8 only allows files up to 32Kb, and you'll need to get the user to click on a link. See my answer to a similar question for an example.
In the future you may be able to use the File Writer API, but I'm not aware of any browser support for that yet.
I've tested data-uri approach. Currently it works only in Firefox.
Seems that for now it is better to stay with flash: https://github.com/dcneiner/Downloadify