doc22940

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

doc22940

Terminal Colors

There exists common confusion about terminal colors. This is what we have right now:

• Plain ASCII
• ANSI escape codes: 16 color codes with bold/italic and background
• 256 color palette: 216 colors + 16 ANSI + 24 gray (colors are 24-bit)
• 24-bit true color: "888" colors (aka 16 milion)

doc22940

Generating an SVG from a set of shapefiles

The USGS provides detailed downloads of fire perimeters, with timestamped files that can be used to show the spread of a major fire over time.

Using the 2017 Thomas fire as an example, we'll process this data into a single SVG file with all the different perimeter measurements.

This index page contains links to a series of shapefiles of the fire boundary, each one with a timestamp:

https://rmgsc.cr.usgs.gov/outgoing/GeoMAC/2017_fire_data/California/Thomas/

doc22940

Generating an SVG from a set of shapefiles

The USGS provides detailed downloads of fire perimeters, with timestamped files that can be used to show the spread of a major fire over time.

Using the 2017 Thomas fire as an example, we'll process this data into a single SVG file with all the different perimeter measurements.

This index page contains links to a series of shapefiles of the fire boundary, each one with a timestamp:

https://rmgsc.cr.usgs.gov/outgoing/GeoMAC/2017_fire_data/California/Thomas/

doc22940

Converting a canvas animation to a video with the MediaRecorder API.

doc22940

Converting an SVG animation to a video with the MediaRecorder API and a hidden canvas.

Drawing frames from img elements can introduce an extra delay, so this version generates all the frames upfront and then renders them in a loop with requestAnimationFrame().

See also: Canvas animation to video

doc22940

Click-to-zoom using projection.fitSize() to interpolate a projection's scale and translate instead of modifying the SVG transform. Has the advantage of leaving stroke-widths alone and the disadvantage of probably being a lot slower.

See also: click-to-zoom via transform

doc22940

{
  "name": "world",
  "children": [
    {
      "name": "Asia",
      "color": "#f58321",
      "children": [
        {"name": "China", "weight": 14.84, "code": "CN"},
        {"name": "Japan", "weight": 5.91, "code": "JP"},
        {"name": "India", "weight": 2.83, "code": "IN"},

doc22940

A method for automatically finding the best eligible label position and font size for a label that's going to go along a path inside of an area, similar to this example but with two embellishments:

• Using d3plus.polygonRayCast() to more accurately measure the vertical clearance available at a given x position with any rotation.
• Avoiding label positions that would cause the text to be overlapped by another shape for a case like this bump chart.

The measurement gets thrown off a little bit by the curve function and the fact that text is rotated letter by letter instead of continuously, but the results seem good enough.

See also: Automatic label placement along a path Streamgraph label positions #2

doc22940

Simulating a split-flap display with CSS animations, advancing the letters on each animationiteration event.

Slow-motion version