Show all posts
5 years ago

Napoleon’s Russian campaign via Taucharts

Minard’s “Figurative map of the successive losses of men in the French army during the Russian campaign, 1812-1813” is one of the most famous statistical graphics in the world.

“The numbers of men present are represented by the widths of the colored zones in a rate of one millimeter for ten thousand men; these are also written beside the zones. Red designates men moving into Russia, black those on retreat. “

The graphic displays a cartographic representation of numerical data related to Napoleon Bonaparte’s disastrous invasion of Russia.  It is notable for its ingenious display of different types of data across two dimensions. French scientist Étienne-Jules Marey was one of the first to praise it, noting that it “defies the pen of the historian in its brutal eloquence.”

It is a decent challenge for a graphical library to build such a chart. The graphic displays six types of data: the number of Napoleon’s troops, distance, temperature, the latitude and longitude, direction of travel, and location relative to specific dates.

Let’s test the power and expressiveness of Taucharts, which is backed up by the ideas of Grammar of Graphics / Leland Wilkinson, 1999 /.

Taucharts API defines a chart as a declarative mapping of data fields to a set of visual elements and their properties. Here is a principal chart specification with comments:

    type: 'line',        // build lines in Cartesian coordinates
    x: 'longitude',      // where X is longitude
    y: 'latitude',       //       Y is latitude
    split: 'group',      // and lines are split by military group
    color: 'direction',  // and colorized by their direction (advance / retreat)
    size: 'survivors',   // and line width is an amount of survivors
    data: [
                         // where source data is..
        {longitude: 24.0, latitude: 54.9, survivors: 340000, direction: 'Advance', group: '1'},
        {longitude: 24.1, latitude: 54.4, survivors: 6000,   direction: 'Retreat', group: '3'}

Parallel to the main chart, we’ll use another line chart with similar X axis settings to express temperature in the graphic.

Click the image below to go live in jsfiddle.

minard napoleon russian campaign via taucharts

Of course the result is far from ideal and uses some workarounds to display names of places over the grid. The upcoming 1.0.0 release will offer the full power of the “text” visual encoding parameter.

Stay tuned for more updates on our progress. Support the project on Product Hunt, post your ideas and any issues to the taucharts uservoice or github repository. We’re always happy to hear your feedback!

  • PatrickMartin

    Great example! TauCharts really makes it easy to generate things like this. I was able to download Minard’s dataset and generate it pretty easily with the Dex/TauCharts integration.

    Mapping that onto a D3 TopoJSON map would be pretty cool.

  • Mike

    So impressive! Just discovered Taucharts today. The level of thought and design that went into the code and docs is mind-blowing. Huge thanks for making something this good.

    • Vladimir Petriko

      Mike, thank you for such a kind words. Happy to see you find it useful!