We Keep Coding

Javascript darken area during processing

I have a page with several grid panels. The grid panels contain specific output objects.
I want to darken a panel while the javascript is building the display objects (mostly Plotly charts, DataTable objects, and a D3-generated map, etc.) then brighten the panel when the processing is complete. The goal is to let users know that processing is going on.
I have tried an overlay (based on https://www.w3schools.com/howto/howto_css_overlay.asp), but this approach doesn't darken the panel or preserve the contents of the panel when the overlay is switched off.
I'd appreciate any ideas about how to 1) darken a panel during processing, 2) write display objects under the overlay, and 3) remove the overlay while preserving the display objects.
Sorry for the rambling question. If there is another approach (changing the cursor??) I'd appreciate hearing about this too.
TIA AB

Crop zoomable and movable SVG to what is visible in the div

I have built an ASP.NET MVC application which will render a floor plan in SVG after a user selects a specific buildling and floor. Using Timmywil's panzoom library, I've added the ability for users to move the floor plan around and zoom in or out on it. The floor plan is initially rendered in the center of the screen and the zoom is adjusted so the whole floor plan is visible.
Via a button, users can save the floor plan in PDF format. After this button click, the SVG tag with the paths inside is used as input to convert it. However, only the initial situation is saved since the viewbox and coordinates are still the same. I've used Timmywil's samples to demonstrate my problem. Below is the initial situation. So the floor plan (in this case a lion) is nicely centered and fully visible inside of the div (the black bordered box):
In the situation a floor plan is really large and a user would only like to have a certain part of saved (picture 2 and 3), it should 'crop' the SVG, but I'm having trouble finding the numbers and making the calculations to achieve this. I guess it has to be done by changing the viewbox values.
Could someone help me out?

Highcharts multiple dynamic panes with single legend

I would like to create a highchart with:
-Multiple panes that can be turned on and off to show different data streams (temperature, wind speed, wind direction)
-A single legend for each data stream where you can turn on and off different weather models (NAM, GFS, RAP)
Essentially the user could select, independently of each other, which data streams and which models to show.
To get the idea of what I mean you can see where I am at right now here. I would like there to be one legend, and when you turn off/on a data set all three graphs/panes respond, and also a selector where if you turned off Wind Speed, Wind Direction would slide upward/resize.
Any ideas? I was unable to even figure out how to make panes in highcharts so I understand if this is a pretty noob question.Thanks in advance

In the highcharts you can use multiple axis like here:
http://www.highcharts.com/stock/demo/candlestick-and-volume
http://www.highcharts.com/demo/combo-multi-axes
If you need to show/hide you should destroy / initialize new axis.
Customisation of legendItemClick:
http://api.highcharts.com/highcharts#plotOptions.series.events.legendItemClick

Animating div on top of Highcharts very slow

I am writing an app that uses Highcharts, and in one instance I want to have a "slider" at the bottom of the chart that extends up vertically over the chart. Moving the slider will update other parts of the page based on where the user moves the slider on the chart.
The problem is that when drawing anything on top of the Highchart (image or a div) the performance becomes absolutely unacceptable. The slider simply cannot keep up with the mouse movements See a jsfiddle here. Note - this only happens when working with a large number of data points (which is absolutely unavoidable in my case).
Is there anything that I can do, short of not drawing on top of the chart?

I suspect the slowness is because the browser has to redraw the chart (either the whole thing or parts of it) as the div slides over it. With a large data set to redraw the chart from, this becomes annoyingly slow.
There are solutions, but not all of them are always acceptable:
You can try reducing the number of points in your data set by sampling it at a lower rate.
You can try windowing, so that the viewer only shows a range within the entire set. For example, if you have 10,000 data points your window can slide along the data set, showing only 1,500 points at a time as opposed to all 10,000 points.
Move to a different technology such as Flash or Silverlight.
Like I said, though, not all of these or even any of them will work for you.

I noticed that when you drag the slider over the graph it still highlights the datapoints. You probably should set pointer-events:none on that part of your chart while dragging the slider, that will allow browsers to not check pointer-events in that subtree (which if you have a lot of datapoints can be somewhat expensive, especially if you update these elements on hover).

Google Map Algorithm (Ajax, Tiles, etc)

I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.
By the way, this is a Javascript project.
I'm thinking of representing each tile as a square div with the image loaded as a background image.
My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?
Thanks!

About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.
About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.
About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).
About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.
Some further reference:
Tile5: Tiling Interfaces
gTile: Javascript tile based game engine
Experiments in rendering a Tiled Map in javascript/html…

There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.
To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.
If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.
But, again, if this is real work, don't implement it yourself. There's no reason to.