The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Many designers find the flexboxes easier to use than boxes. Without a lot of work, div's frequently rose to the top of a page when designers did not want them to---so for example, sticking a footer to the bottom of a page was difficult. The widths and heights of flexboxes vary to adapt to the display space, holding the lower down elements in place. Flexbox logic also asks whether you want div's to accrue to the right or on the bottom. The display order of flexbox elements is independent of their order in the source code.

Popular layouts can thus be achieved more simply and with cleaner code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on a linear reading of the HTML source.

- MDN web docs



Combination of grid ad flexbox for responsiveness

grid play

Combinations for the grid display class



CSS Stuff

Web GL

D3 Charts

D3 Maps

Note: D3 is now in version 4. To learn the new version, I'm migrating all my old files and projects to the new version. If they have been migrated, they will be notated by an *.

D3 Map Projections

What is a projection?

Globes are the best representation of the earth because all distance, areas, and shapes are proportionally correct. Unfortunately globes of any size are rather inconvenient to tote about and store, and detailed images of even a large country would require globes larger than a room. Using portions of a globe would work but they still don't lie down flat and would be like trying to store large potato chips (potato crisps) of all different sizes in book form.

To deal with this problem ancient peoples created maps. The earliest maps only showed very small portions of the earth and were very serviceable without worrying about spheres and such nonsense — indeed, they were not made as replacements for globes at all. But the Greeks had grander plans and by at latest 600 BC the idea arose of projecting the globe onto a developable surface. This launched cartography, the science of mapmaking. A developable surface is a surface that is capable of being unrolled onto a plane. Without allowing a surface having ripples, creases, or tears (all of which have critical drawbacks), a cylinder; a cone, and a plane (which was 2-dimensional to start with) are the only three objects that can be developed.

These three surfaces give rise to the three natural projection classes that have members — true projections — which can be displayed physically by projecting a light source through a transparent globe onto a developable surface used as a screen. The classes are called cylindrical, conic, and azimuthal (because all azimuths from the center are straight lines and their directions are true).

Within the natural projection classes are many projections that cannot be projected physically, but rather are derived mathematically. They still fit within the three classes because they have similar appearances and obey certain critical mathematical rules. Any representation of the globe or part of the globe on a flat surface, such as a sheet of paper, can be called a projection.

Several common projections are included with default build of D3. Numerous less-common projections are available in the extended geographic projections plugin and the polyhedral projection plugin.

Most projections provided by D3 are created via d3.geo.projection and are configurable: you can rotate the globe, scale or transform the canvas, etc. Unless you’re implementing a new raw projection, you probably won’t use the d3.geo.projection constructor, but you are likely to use the configuration methods.

Eckert Map Projections

The Eckert projections are six pseudocylindrical map projections devised by Max Eckert-Greifendorff, who presented them in 1906. The latitudes are parallel lines in all six projections. The projections come in pairs; in the odd-numbered projections, the latitudes are equally spaced, while their even-numbered counterparts are equal-area.

The three pairs are distinguished by the shapes of the meridians. Eckert I and Eckert II have rectilinear (straight-line) meridians, meeting at the equator at an angle. In Eckert III and Eckert IV, meridians are elliptical, while in Eckert V and Eckert VI, they are sinusoidal.