Convert D3 Observable to standalone webpage - like blocks.org? - d3.js

I would like to run this D3 visualization
https://beta.observablehq.com/#mbostock/d3-zoomable-sunburst
as a standalone webpage, like this one here
https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099
Does Observable have a function to export to a .html file? Or what would I need to change to make it standalone?

Sadly, it's not that easy any more.
They have "archived" bl.ocks.org and are pushing the adoption of ObservableHQ notebooks. You can actually embed notebooks with a little effort, but they are served from https://api.observablehq.com. There are other options, but nothing that lets you easily pull out the html, javascript and css and host it yourself, as bl.ocks.org did. At best, you'll have to cobble a bunch more stuff together now. One method is to click the top-right context menu on some notebooks and select Export > Download code. Another possible option is this tool.
< relevant-humble-opinion > I don't know if d3 bl.ock.org examples just got so good that the suits moved in... or if Mike Bostock (our story's hero) really believed we needed "dataflow"... but things look bad from here... nothing good seems to last... < /relevant-humble-opinion >

On an Observable example page, I clicked the triple three dots next to the fork option. Then chose export and then "download code".
I extracted the tar file to a folder on my machine. In the Readme it suggests that you run
$ npx http-server in a terminal, to run a local server on your machine.
Open up the location in your browser and it should show nearly the same thing as a web page. It should be close enough to what you are looking for.
Observable page used Reusable Choropleth Map

Related

Trying to find out what language this was created in (pic inside)

You can see the image here: http://i.stack.imgur.com/ABWc4.jpg
I use this system for work on my home PC and I'm trying to find out what language it is, and if I can extract data from it. Someone suggested it may be some type of terminal program that is then converted to web. It is used like a terminal, using the F keys to help navigate.
The only info I have is that it's called CATS. It is used by the company to keep in touch with employees, keep track of payroll/payments, see when you work next, etc.
Looks like it's HTML/ XHTML. Can read that off from the end of the link.
The functioning of page is handled by Javascript

How to download pdf file in ruby without .pdf in the link

I need to download a pdf from a website which does not provide a link ending with (.pdf) using ruby. Manually, when i click on the link to download the pdf, it takes me to a new page and the dialog box to save/open the file appears after some time.
Please help me in downloading the file.
The link
You an do this
require 'open-uri'
File.open('my_file_name.pdf', "wb") do |file|
file.write open('http://someurl.com/2013-1-2/somefile/download').read
end
I have been doing this for my projects and it works.
If you just need a simple ruby script to do it, I'd just run wget. Like this exec 'wget "http://path.to.the.file/and/some/params"'
At that point though, you might as well run wget.
The other way, is to just run a get on the page that you know the pdf is at
source = Net::HTTP.get("http://the.website.com", "/and/some/params")
There are a number of other http clients that you could use, but as long as you make a get request to the endpoint that the pdf is at, it should give you the raw data. Then you can just rename the file, and you'll have the pdf
In your case, I ran the following commands to get the pdf
wget http://www.lawcommission.gov.np/en/documents/prevailing-laws/constitution/func-download/129/chk,d8c4644b0f086a04d8d363cb86fb1647/no_html,1/
mv index.html thefile.pdf
Then open the pdf. Note that these are linux commands. If you want to get the file with a ruby script, you could use something like what I previously mentioned.
Update:
There is an added complication that was not initially stated, which is that the url to the pdf changes every time there is an update to the pdf. In order to make this work, you probably want to do something involving web scraping. I suggest nokogiri. This way you can look at the page where the download is and then perform a get request on the desired URL. Furthermore, the server that hosts the pdf is misconfigured, and breaks chrome within a few seconds of opening the page.
How to solve this problem: I went to the site, and refreshed it. Then broke the connection to the server (press the X where there would otherwise be a refresh button). Then right click next to the download link, and select inspect element. Then browse the dom to find something that is definitively identifying (like an id). Thankfully, I found something <strong id="telecharger"> Download</strong>. This means that you can use something like page.css('strong#telecharger')[0].parent['href'] This should give you a URL. Then you can perform a get request as described above. I don't have time to make the script for you (too much work to do), but this should be enough to solve the problem.

Changing Where CKEditor Looks for Images

I am wondering if there is some way to change where CKEditor looks for images. Right now it uses the location of the web page containing the editor as the root directory but I would like to write a javascript function that can change this directory to any arbitrary path passed to the function.
The bigger picture for this is that I'd like to extend the functionality of CKEditor to be able to save the source it creates to whatever location is picked by the user. I've already implemented getting the source and saving it using wxWidgets but am having trouble getting CKEditor to change its working directory so that images can be included from the directory the user picks.
I've tried using some of the properties like baseDir, basePath, and baseHref to make this possible but as far as I can tell none of them quite do what I'm looking for.
So the process would be:
(1) The user picks a directory where the source will be saved
(2) The user creates a page using CKEditor where images from the directory chosen can be included AND DISPLAYED in CKEditor
(3) The user saves the source of their page to the chosen directory (the source saved here should use the relative path to the images because the source is now located in the same directory as the images it includes)
I realize this is a rather unconventional use of CKEditor but if someone might be able to kick me in the right direction to making this happen, I'd really appreciate it.
EDIT:
So after a little experimenting and changing some backslashes to regular slashes, it looks like the baseHref attribute does what I'd like. I've still not been able to change its value at runtime though as I would like. Does anybody know if this is possible with CKEditor? I'd still like to have a javascript function that I can pass a path to and have it change this baseHref value. Right now I have set its value in config.js.
If this isn't possible, I know you can read and write the source in and out of the editor. So I would like to resort to reading and storing the source from the editor, reloading CKEditor with a new config.baseHref, and then writing the source back into the editor. Does anyone know if the CKEditor api provides functionality to reload its configuration?
Thanks.
I don't expect too many people will be trying to do what I was doing here since CKEditor is usually hosted on a server somewhere, but in case someone finds it helpful, here's what I ended up doing.
As I mentioned in the edit to my question, modifying the baseHref gave me the functionality of prepending the image filename with the directory path leading to it. I wasn't able to find a way to modify it while the editor was running so I ended up telling CKEditor to load an external configuration file each time it started with the line
config.customConfig = 'C:/Users/kenwood/Desktop/MarkCreator2/ckeditor/custom_config.js';
Then I used C++ to write new contents to custom_config.js any time I wanted to switch directories.
Unfortunately this method meant I had to read the contents out of the editor, refresh the page, and then write the editor contents back in any time I wanted to change directories. This was adequate for what I needed though.

Load an image from Firefox cache?

I'm trying to load an image from the Firefox cache as the title suggests. I'm running Ubuntu, so the location of my cache is /home/me/.mozilla/firefox/xxxxxx.default/Cache
However, in the Cache (and this is on Mac, too) the filenames are just ridiculous combinations of letters and numbers. Is there a way to pinpoint a certain file?
You should take a look at the source code of the CacheViewer Add-on.
Download the file instead of installing it (right click and save as) and then extract it (it's just a Zip file, even though it has a .xpi extension), then extract the cacheviewer.jar file inside the resulting chrome folder. Finally go into content and then cacheviewer to find the javascript and XUL files.
From my brief investigation, the useful routines are in the cacheviewer.js file, though if you were hoping there would be a simple javascript one liner for accessing cached items you're probably going to be disappointed. The XUL files (which are just XML) are helpful in working out which JS functions are called to perform particular tasks. I'm not too sure how all this maps into Greasemonkey, rather than the extension environment, but hopefully there's enough code to get you started.
Ummm, that really is an internal implementation detail. But I suggest looking at how about:cache?device=disk and about:cache-entry?client=HTTP&sb=1&key=https://stackoverflow.com/Content/img/wmd/blockquote.png are implemented.
Also, http://www.securityfocus.com/infocus/1832 gives details, too. Note that Firefox doesn't use a separate file for everything...
And of course, Firefox may change the format at any time.
Just give your img src= attribute the full URL. If the image happens to be cacheable (the server sends an appropriate Expires: or Cache-control: header, for example) and it's already in the cache, Firefox will not hit the network.
HTTP caching is supposed to be invisible. When you're generating content, you generally shouldn't worry about it.
You can point REDbot at a URL to see all sorts of delicious information about its cacheability.

Very newbie troubleshooting. Basic p5.js index.html setup on Atom, not generating anything on browser?

literally just got into the world of coding, so if my question seems absolutely insane, I do apologise.
Anywho, was following some tutorials (Daniel Shiffman's https://www.youtube.com/watch?v=HZ4D3wDRaec) how to setup a basic p5.js file on Atom, and generate a green window to test if the code is working. Really basic setup, nothing should've went wrong.
For some reason the text editor wouldn't read my code while I was typing; so then I clicked on the index.html file from the root folder.
Instead of having to show a green window, nothing actually happened. I don't know if this is a software issue, seems like nobody has encountered such a basic problem.
Nothing seems to be wrong here. And it opened a white window when it should've been green
You might have missed a couple of steps in the video:
You can simply (manually) double click index.html from the yayme folder on your Desktop. This should open your default browser with the page. This works for simple sketches but once you start loading assets (images/sounds/data from other sites, etc.) it's best to use a local web server
You can use any http server as Daniel Shiffman's video mentions or the atom-live-server package (notice the install button on that page which will open Atom for you). Once that's installed you can access it via Atom > Packages> atom-live-server

Resources