{"id":5013,"date":"2020-09-22T18:53:06","date_gmt":"2020-09-22T18:53:06","guid":{"rendered":"https:\/\/dvsnightingstg.wpenginepowered.com\/?p=5013"},"modified":"2021-06-07T17:50:04","modified_gmt":"2021-06-07T21:50:04","slug":"navigating-the-wide-world-of-data-visualization-libraries","status":"publish","type":"post","link":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/","title":{"rendered":"Navigating the Wide World of Data Visualization Libraries"},"content":{"rendered":"\r\n<p id=\"7b07\" class=\"has-drop-cap\">Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0<em>\u201cWhich visualization library should I use?\u201d<\/em> Typically, making this decision is not about whether one library is \u201cbetter\u201d than another, but whether the specific library is more suitable for what the developer is trying to achieve.To answer this question thoroughly, we need to start by better understanding the actual\u00a0<strong>design space of visualization libraries<\/strong>. Based on a survey of web-based libraries (i.e. javascript packages), we could conceivably map out a landscape based on two attributes:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><strong><em>Level of Abstraction<\/em><\/strong><em>\u00a0\u2014\u00a0<\/em>which maps roughly to two aspects: The first is the\u00a0<i>effort required<\/i> from the developers to create a visualization. Higher-level libraries usually require fewer lines of code and\/or fewer concepts to learn compared to lower-level libraries. Another is\u00a0<em>expressivity,\u00a0<\/em>or how much you can customize, which is in the opposite direction. Higher-level libraries will not let you customize much while you can have a lot more freedom and flexibility with lower-level libraries.<\/li>\r\n<li><strong><em>API Design<\/em><\/strong>\u00a0\u2014 The choices made by the authors which control how the code should be written.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"b0d5\"><strong>API Design<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>Let\u2019s start with the API Design. As we go through each\u00a0<em>level of abstraction\u00a0<\/em>after this, you will get a better sense of the available varieties. Libraries that provide the same level of abstraction may offer different forms of APIs. It is important to avoid confusing API design with level of abstraction.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>A large number of libraries offer\u00a0<strong>plain Javascript API.\u00a0<\/strong>Theydo not depend on specific frameworks such as\u00a0<a href=\"https:\/\/reactjs.org\/\">React<\/a>,\u00a0<a href=\"https:\/\/vuejs.org\/\">Vue<\/a>,\u00a0<a href=\"https:\/\/angular.io\/\">Angular<\/a>, etc. For example,\u00a0<a href=\"https:\/\/d3js.org\/\">D3<\/a>\u00a0does not depend on any one framework. The advantage of being framework-agnostic is flexibility; they can be used anywhere. The code, however, tends to be more imperative (closer to machine instructions) than declarative (closer to the output that humans want to see).<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">const chart = new Chart();<br \/>chart.addAxis(new XAxis(...));<br \/>chart.addSeries(new LineSeries(...));<\/pre>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Some libraries, such as\u00a0<a href=\"https:\/\/vega.github.io\/\">Vega<\/a>, declare their entire APIs in a single\u00a0<strong>JSON\u00a0<\/strong>configuration. With the JSON constraint, they cannot accept any function or custom object as part of the arguments, avoiding imperative instructions. This constraint enforces a more declarative API. It also means the configuration can be easily serialized and stored as text files, or used with command-line tools. In return, it is more difficult to integrate with other libraries.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">{ \"x\": \"time\", \"y\": \"price\", \"series\": [ ... ] }<\/pre>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Some libraries, such as\u00a0<a href=\"https:\/\/echarts.apache.org\/en\/index.html\">ECharts<\/a>, are in between and offer the hybrid<strong>\u00a0JSON with callbacks\u00a0<\/strong>approach.Instead of plain JSON, they declare the entire API as a single configuration Javascript object which can also include functions and sometimes non-primitive values. Their simple configurations may look just like the plain JSONs though at a surface level. The added function support allows advanced customization, more flexibility and easier integration with other libraries. This flexibility is traded with the serializable text output and strict enforcement of a fully declarative API.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">{ \"x\": d =&gt; d.time, \"y\": d =&gt; d.price, \"series\": [ ... ] }<\/pre>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Other libraries yet fully embrace syntax of\u00a0<strong>specific frameworks<\/strong>\u00a0(e.g.\u00a0<a href=\"https:\/\/reactjs.org\/\">React<\/a>) and provide better integration. For example, using a React-based library in a React web application project will be more natural and provide better overall code consistency and optimization opportunities compared to adding alien blocks of D3 code. The drawback is they require prerequisite knowledge about the framework and are only appropriated to be used in a project where the main framework is also used.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">&lt;Chart&gt;<br \/>  &lt;XAxis \/&gt;<br \/>  &lt;LineSeries \/&gt;<br \/>&lt;\/Chart&gt;<\/pre>\r\n\r\n\r\n\r\n<p id=\"6800\">Some libraries also offer multiple forms of APIs. For instance,\u00a0<a href=\"https:\/\/deck.gl\/playground\/\">deck.gl<\/a>\u00a0has\u00a0<code>@deck.gl\/core<\/code>,\u00a0<code>@deck.gl\/react<\/code>\u00a0and\u00a0<code>@deck.gl\/json<\/code>\u00a0modules that offer plain JS API, React-based API and declarative JSON API, respectively.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"87c8\">Level of Abstraction<\/h2>\r\n\r\n\r\n\r\n<p id=\"fffb\">These levels map roughly to the effort required to create a visualization and expressivity. In other words, the higher level libraries usually requires fewer lines of code to produce a usable visualization but then there are fewer things you can customize. On the other hand, you can customize more and more the lower-level you choose, but have to put in more work yourself.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"248\" class=\"wp-image-5015\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-42-1024x352.png?resize=720%2C248&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=1024%2C352&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=300%2C103&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=768%2C264&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=1536%2C527&amp;ssl=1 1536w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=450%2C155&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=1360%2C467&amp;ssl=1 1360w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=800%2C275&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=250%2C86&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=550%2C189&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=524%2C180&amp;ssl=1 524w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=874%2C300&amp;ssl=1 874w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?resize=1456%2C500&amp;ssl=1 1456w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-42.png?w=1852&amp;ssl=1 1852w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\r\n<figcaption>A metaphorical representation of Levels of Abstraction<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p id=\"1743\"><em>Composable Building Blocks (level 2\u20134)<\/em>are fragments that can be composed to produce a visualization. If using the graphics libraries is like trying to build a house from freeform clay, using composable building blocks is like trying to do the same thing using a box of LEGOs. You can assemble these LEGOs anyway you want. The limitations are based on the kinds of LEGOs you have. You can also use multiple building block libraries together, as long as they are compatible.<\/p>\r\n\r\n\r\n\r\n<p id=\"5c70\"><em>The building blocks are at the sweet spot\u00a0<\/em>when you need more flexibility than the chart templates (level 5) and still want to stand on the shoulder of giants instead of starting from almost scratch (level 1).<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"8730\">1. Graphics Libraries<\/h2>\r\n\r\n\r\n\r\n<p id=\"4d11\">This group of libraries lets a developer draw visual elements directly or perform traditional\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Computer_graphics_(computer_science)#:~:text=Computer%20graphics%20is%20a%20sub,dimensional%20graphics%20and%20image%20processing.\">computer graphics<\/a>\u00a0operations (scene graph, shading, etc.). They are the closest to native APIs such as\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\">Canvas<\/a>\u00a0or\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGL_API\">WebGL<\/a>. They have the maximum level of expressivity and in return require the most effort to produce the same visualizations.\u00a0<strong>If you are trying to produce a quick bar chart immediately out-of-the-box, these are probably not for you.\u00a0<\/strong>However, these libraries let you tune for deep performance optimization or produce wild graphics that the higher-level libraries may not offer.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"wp-image-5016\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-8.gif?resize=517%2C239&#038;ssl=1\" alt=\"\" width=\"517\" height=\"239\" \/>\r\n<figcaption>Example from\u00a0<a href=\"https:\/\/github.com\/react-spring\/react-three-fiber\">react-three-fiber<\/a><\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p><strong>Examples<\/strong>:\u00a0<a href=\"https:\/\/processing.org\/\">Processing<\/a>,\u00a0<a href=\"https:\/\/p5js.org\/\">p5*js<\/a>,\u00a0<a href=\"https:\/\/dmitrybaranovskiy.github.io\/raphael\/\">Raphael<\/a>,\u00a0<a href=\"https:\/\/roughjs.com\/\">Rough.js<\/a>,\u00a0<a href=\"https:\/\/threejs.org\/\">three.js<\/a>,\u00a0<a href=\"http:\/\/www.senchalabs.org\/philogl\/\">PhiloGL<\/a>,\u00a0<a href=\"https:\/\/luma.gl\/\">luma.gl<\/a>,\u00a0<a href=\"https:\/\/two.js.org\/\">two.js<\/a>,\u00a0<a href=\"https:\/\/www.pixijs.com\/\">PixiJS<\/a>,\u00a0<a href=\"https:\/\/github.com\/ooade\/react-rough\">react-rough<\/a>,\u00a0<a href=\"https:\/\/github.com\/react-spring\/react-three-fiber\">react-three-fiber<\/a><\/p>\r\n\r\n\r\n\r\n<p id=\"343d\">For instance, this is the amount of code required to setup an empty canvas and draw a single rectangle with p5.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"200\" height=\"200\" class=\"wp-image-5017\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-43.png?resize=200%2C200&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-43.png?w=200&amp;ssl=1 200w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-43.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-43.png?resize=70%2C70&amp;ssl=1 70w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-43.png?resize=48%2C48&amp;ssl=1 48w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-43.png?resize=180%2C180&amp;ssl=1 180w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>import p5 from 'p5';\r\n\r\nconst p = new p5(function(sketch) {\r\n  sketch.setup = () =&gt; {\r\n    sketch.createCanvas(200, 200);\r\n  };\r\n  sketch.draw = () =&gt; {\r\n    sketch.background(0);\r\n    sketch.fill(255);\r\n    sketch.rect(100, 100, 50, 50);\r\n  };\r\n});<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center has-small-font-size\">Draw a rectangle with\u00a0<a href=\"https:\/\/p5js.org\/get-started\/\">p5*js<\/a>, which has plain JS API<\/p>\r\n\r\n\r\n\r\n<p id=\"68c0\">Similarly, this is how to draw a single rectangle with react-rough. Some higher-level libraries may let you create an entire bar chart with the same amount of code.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"99\" height=\"98\" class=\"wp-image-5018\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-44.png?resize=99%2C98&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-44.png?w=99&amp;ssl=1 99w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-44.png?resize=70%2C70&amp;ssl=1 70w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-44.png?resize=48%2C48&amp;ssl=1 48w\" sizes=\"(max-width: 99px) 100vw, 99px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;ReactRough&gt;\r\n  &lt;Rectangle x={15} y={15} width={90} height={80} fill=\"red\" \/&gt;\r\n&lt;\/ReactRough&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center has-small-font-size\">Draw a sketch rectangle with\u00a0<a href=\"https:\/\/github.com\/ooade\/react-rough\">react-rough<\/a>, which has React-based API.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"d443\">2. Low-level Building Blocks<\/h2>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"425\" height=\"352\" class=\"wp-image-5019\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-18.jpeg?resize=425%2C352&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-18.jpeg?w=425&amp;ssl=1 425w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-18.jpeg?resize=300%2C248&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-18.jpeg?resize=250%2C207&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-18.jpeg?resize=217%2C180&amp;ssl=1 217w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-18.jpeg?resize=362%2C300&amp;ssl=1 362w\" sizes=\"(max-width: 425px) 100vw, 425px\" \/>\r\n<figcaption>Basic LEGO blocks (<a href=\"https:\/\/www.amazon.com\/LEGO-Classic-10717-Bricks-Piece\/dp\/B07G4R3HD5\/ref=sr_1_3?dchild=1&amp;keywords=lego+classic&amp;qid=1595629136&amp;sr=8-3\">source<\/a>)<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>The\u00a0<em>low-level Building Blocks\u00a0<\/em>are quite\u00a0<strong>independent and flexible<\/strong>. Each component or utility in these libraries serves particular purpose and can be used in combination with components from the same libraries or other libraries to create a visualization. How they should be combined is roughly defined and leaves a lot up to the discretion of the developers.<\/p>\r\n\r\n\r\n\r\n<p id=\"5ec4\">The most notable of this is\u00a0<a href=\"https:\/\/d3js.org\/\">D3<\/a>\u00a0, which\u00a0<a href=\"http:\/\/vis.stanford.edu\/files\/2011-D3-InfoVis.pdf\">evolves<\/a>\u00a0from the early frameworks in other languages (<a href=\"http:\/\/kneecap.ist.berkeley.edu\/\">Prefuse<\/a>,\u00a0<a href=\"https:\/\/blokt.com\/tool\/prefuse-flare\">Flare<\/a>). D3 completely changed the landscape of visualization authoring in the past decade. It introduced a suite of low-level components and utilities, such as\u00a0<a href=\"https:\/\/github.com\/d3\/d3-selection\">selection<\/a>,\u00a0<a href=\"https:\/\/github.com\/d3\/d3-scale\">scales<\/a>,\u00a0<a href=\"https:\/\/github.com\/d3\/d3-format\">formatting<\/a>, etc. while leveraging the common standards such as DOM and SVG instead of defining all constructs by itself.<\/p>\r\n\r\n\r\n\r\n<p id=\"a8be\">In the example below, multiple building blocks offered by D3 (scales and selection) are used in combination to create a simple bar chart.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"343\" class=\"wp-image-5020\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=720%2C343&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?w=909&amp;ssl=1 909w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=300%2C143&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=768%2C366&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=450%2C214&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=800%2C381&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=250%2C119&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=550%2C262&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=378%2C180&amp;ssl=1 378w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-45.png?resize=630%2C300&amp;ssl=1 630w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>const x = d3.scaleBand().rangeRound([0, width]);\r\nconst y = d3.scaleLinear().range([height, 0]);\r\nconst svg = d3.select(\"svg\").attr(\"width\", width).attr(\"height\", height);\r\n\r\nx.domain(data.map(d =&gt; d.date));\r\ny.domain([0, d3.max(data, d =&gt; d.value)]);\r\nsvg.selectAll(\"bar\")\r\n    .data(data)\r\n  .enter().append(\"rect\")\r\n    .style(\"fill\", \"steelblue\")\r\n    .attr(\"x\", d =&gt; x(d.date))\r\n    .attr(\"width\", x.band())\r\n    .attr(\"y\", d =&gt; y(d.value))\r\n    .attr(\"height\", d =&gt; (height - y(d.value)));<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center has-small-font-size\">Create a bar chart with\u00a0<a href=\"https:\/\/d3js.org\/\">D3<\/a><\/p>\r\n\r\n\r\n\r\n<p>In addition to D3, many libraries offer specialized components and utilities with unique functionalities. Even though many of them have the\u00a0<code>d3-<\/code>prefix in their names, not all of them really depend on D3. To name a few:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><a href=\"https:\/\/ialab.it.monash.edu\/webcola\/\">cola<\/a>\u00a0and\u00a0<a href=\"https:\/\/js.cytoscape.org\/\">Cytoscape<\/a>\u00a0provide various graph layout algorithms.<\/li>\r\n<li><a href=\"https:\/\/d3-annotation.susielu.com\/\">d3-annotation<\/a>\u00a0takes annotation to the next level.<\/li>\r\n<li><a href=\"https:\/\/github.com\/jasondavies\/d3-cloud\/blob\/master\/examples\/browserify.js\">d3-cloud<\/a>\u00a0provides word cloud algorithm.<\/li>\r\n<li><a href=\"https:\/\/d3-legend.susielu.com\/\">d3-legend<\/a>\u00a0creates nice legends for your scales.<\/li>\r\n<li><a href=\"https:\/\/github.com\/veltman\/flubber\">flubber<\/a>\u00a0smoothly interpolates between 2-D shapes.<\/li>\r\n<li><a href=\"https:\/\/twitter.github.io\/labella.js\/\">labella<\/a>\u00a0helps you place label on a timeline.<\/li>\r\n<li><a href=\"https:\/\/airbnb.io\/visx\/\">visx<\/a>\u00a0provides native React building blocks that wraps D3 and SVG.<\/li>\r\n<li>\u00a0<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"8309\">3. Visualization Grammars<\/h2>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"346\" class=\"wp-image-5021\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-46-1024x492.png?resize=720%2C346&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=1024%2C492&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=768%2C369&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=1536%2C738&amp;ssl=1 1536w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=450%2C216&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=1665%2C800&amp;ssl=1 1665w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=1360%2C653&amp;ssl=1 1360w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=800%2C384&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=250%2C120&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=550%2C264&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=375%2C180&amp;ssl=1 375w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=624%2C300&amp;ssl=1 624w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?resize=1041%2C500&amp;ssl=1 1041w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?w=1786&amp;ssl=1 1786w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-46.png?w=1440&amp;ssl=1 1440w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\r\n<figcaption>From the blueprint, a LEGO mini-figure consists of 8 body parts. Any LEGO mini-figure can be described using these 8 parts and accessories.<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p id=\"3280\">In the middle of the \u201cbuilding blocks\u201d range are the\u00a0<em>Visualization Grammars.\u00a0<\/em>They have their roots in\u00a0<a href=\"https:\/\/www.amazon.com\/Grammar-Graphics-Statistics-Computing\/dp\/0387245448\">The Grammar of Graphics<\/a><em>,\u00a0<\/em>which was introduced in the late 1990s and offered a new perspective on designing statistical graphics. Instead of referring to charts by their traditional \u201ctypes\u201d \u2014 bar, pie, scatter plot, bubble, etc., \u2014 the book calls out their shared structures and introduces the ideas of using these common concepts to describe any chart.<\/p>\r\n\r\n\r\n\r\n<p id=\"c98e\">Similar to how the grammar of a language, such as English, defines part of speech (noun, verb, etc.) and gives you a structure for combining these parts into a meaningful sentence,<strong>\u00a0the grammar of graphics defines it own parts and provides a structure for combining them to describe an output graphics<\/strong>. This rigid structure is what differentiates them from the low-level building blocks.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"237\" class=\"wp-image-5022\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-47-1024x337.png?resize=720%2C237&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=1024%2C337&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=300%2C99&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=768%2C253&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=1536%2C505&amp;ssl=1 1536w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=2048%2C673&amp;ssl=1 2048w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=450%2C148&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=1360%2C447&amp;ssl=1 1360w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=800%2C263&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=2000%2C658&amp;ssl=1 2000w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=250%2C82&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=550%2C181&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=547%2C180&amp;ssl=1 547w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=912%2C300&amp;ssl=1 912w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?resize=1521%2C500&amp;ssl=1 1521w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?w=1440&amp;ssl=1 1440w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-47.png?w=2160&amp;ssl=1 2160w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\r\n<figcaption>Object-oriented graphic specification\u2014 Leland Wilkinson.\u00a0<a href=\"https:\/\/www.amazon.com\/Grammar-Graphics-Statistics-Computing\/dp\/0387245448\">\u201cThe Grammar of Graphics\u201d<\/a>\u00a0p. 7<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>See the chart below and its specification in the grammar of graphics. The chart is broken down into parts and described as a composition of DATA, SCALE, COORD an ELEMENT.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"522\" class=\"wp-image-5023\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-48-1024x742.png?resize=720%2C522&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=1024%2C742&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=300%2C217&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=768%2C557&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=1536%2C1114&amp;ssl=1 1536w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=450%2C326&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=1103%2C800&amp;ssl=1 1103w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=1360%2C986&amp;ssl=1 1360w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=800%2C580&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=250%2C181&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=550%2C399&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=248%2C180&amp;ssl=1 248w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=414%2C300&amp;ssl=1 414w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?resize=690%2C500&amp;ssl=1 690w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?w=1898&amp;ssl=1 1898w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-48.png?w=1440&amp;ssl=1 1440w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\r\n<figcaption>An example application \u2014 Leland Wilkinson.\u00a0<a href=\"https:\/\/www.amazon.com\/Grammar-Graphics-Statistics-Computing\/dp\/0387245448\">\u201cThe Grammar of Graphics\u201d<\/a>\u00a0p. 191<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p id=\"a974\">The most famous implementation of the Grammar of Graphics is\u00a0<a href=\"https:\/\/ggplot2.tidyverse.org\/\">ggplot2<\/a>, which dominates the R and data science communities. On the web,\u00a0<a href=\"https:\/\/vega.github.io\/vega\/\">Vega<\/a>\u00a0let users describe visualizations in JSON, and generate interactive views using either HTML5 Canvas or SVG.\u00a0<a href=\"https:\/\/vega.github.io\/vega-lite\/\">Vega-Lite<\/a>\u00a0provides a higher-level grammar equivalent to ggplot2 level with interactions, which is compiled into Vega and rendered using the same engine.<\/p>\r\n\r\n\r\n\r\n<p id=\"9d00\">The code block below is a specification of a bar chart in Vega-Lite. The dataset\u00a0<code>data<\/code>\u00a0is described separately. The\u00a0<code>mark<\/code>\u00a0and\u00a0<code>encoding<\/code>\u00a0fields are equivalent to the ELEMENT part of the Grammar of Graphics and its aesthetics.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"109\" class=\"wp-image-5024\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-49.png?resize=273%2C109&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-49.png?w=273&amp;ssl=1 273w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-49.png?resize=250%2C100&amp;ssl=1 250w\" sizes=\"(max-width: 273px) 100vw, 273px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>{\r\n  \"$schema\": \"https:\/\/vega.github.io\/schema\/vega-lite\/v4.json\",\r\n  \"description\": \"A simple bar chart with embedded data.\",\r\n  \"data\": {\r\n    \"values\": [\r\n      {\"country\": \"China\", \"population\": 131744}, \r\n      {\"country\": \"India\", \"population\": 104970},\r\n      {\"country\": \"US\", \"population\": 29034}\r\n    ]\r\n  },\r\n  \"mark\": \"bar\",\r\n  \"encoding\": {\r\n    \"x\": {\"field\": \"population\", \"type\": \"quantitative\"},\r\n    \"y\": {\"field\": \"country\", \"type\": \"nominal\"}\r\n  }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center has-small-font-size\">Create a bar chart with\u00a0<a href=\"https:\/\/vega.github.io\/vega-lite\/examples\/bar.html\">Vega-Lite<\/a>, which describes everything as pure JSON.<\/p>\r\n\r\n\r\n\r\n<p>In contrast to the APIs of Vega-Lite which is JSON,\u00a0<a href=\"https:\/\/g2.antv.vision\/en\">G2<\/a>, and\u00a0<a href=\"https:\/\/muzejs.org\/\">Muze<\/a>\u00a0all provide visualization grammars with Plain JS APIs while\u00a0<a href=\"https:\/\/microsoft.github.io\/chart-parts\/\">Chart Parts<\/a>\u00a0was built for React. See the G2 code to create a bar chart below. Notice the different API design compared to Vega-Lite.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"150\" class=\"wp-image-5025\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-50.png?resize=400%2C150&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-50.png?w=400&amp;ssl=1 400w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-50.png?resize=300%2C113&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-50.png?resize=250%2C94&amp;ssl=1 250w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>import { Chart } from '@antv\/g2';\r\n\r\nconst data = [\r\n  {country: \"China\", population: 131744}, \r\n  {country: \"India\", population: 104970},\r\n  {country: \"US\", population: 29034}, \r\n];\r\n\r\nconst chart = new Chart({ container: 'container', autoFit: true, height: 500 });\r\nchart.data(data);\r\nchart.coordinate().transpose();\r\nchart.scale('population', { nice: true });\r\nchart.interval().position('country*population');\r\nchart.render();<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center has-small-font-size\">Create a bar chart with\u00a0<a href=\"https:\/\/g2.antv.vision\/en\/examples\/bar\/basic\">G2<\/a>, which has plain JS API<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"2314\">4. High-level Building Blocks<\/h2>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"296\" class=\"wp-image-5026\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-51.png?resize=360%2C296&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-51.png?w=360&amp;ssl=1 360w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-51.png?resize=300%2C247&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-51.png?resize=250%2C206&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-51.png?resize=219%2C180&amp;ssl=1 219w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/>\r\n<figcaption>Pre-assembled LEGOS: You still need to put them together to create a bathroom. (<a href=\"https:\/\/www.ebay.com\/itm\/Bathroom-set-Includes-Bath-Shower-Toilet-All-parts-LEGO-\/123870106726\">source<\/a>)<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p id=\"7791\">If the\u00a0<em>low-level building blocks\u00a0<\/em>are equivalent to individual LEGO bricks, which are very flexible and can be combined in many different ways, these\u00a0<em>high-level building blocks<\/em>\u00a0are pre-assembled larger pieces.<\/p>\r\n\r\n\r\n\r\n<p id=\"9f7b\">Similar to the\u00a0<em>visualization grammars<\/em>, each of the\u00a0<em>high-level building blocks\u00a0<\/em>librariesalso comes with its own set of components and predetermined way to assemble these components into a chart. However, there are a few common differences that place this group of libraries in between the\u00a0<em>visualization grammars<\/em>\u00a0and the\u00a0<em>chart templates\u00a0<\/em>levels:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Some libraries\u00a0<strong>combines axes and scales together.<\/strong>\u00a0SCALE in the grammars is considered one part while axes are part of GUIDE<\/li>\r\n<li>The high-level building blocks libraries sometimes\u00a0<strong>embed data in multiple places, commonly within the series<\/strong>\u00a0along with\u00a0<em>aesthetics<\/em>\u00a0configurations. The grammars treat data (DATA) and transformation (TRANS) as separated parts and only reference to field names or derived variables in the ELEMENTs, .<\/li>\r\n<li>More commonly, they are more relaxed from the \u201cno-chart-type\u201d philosophy and\u00a0<strong>may include convenient templates as\u00a0<em>series<\/em>\u00a0or\u00a0<em>layer<\/em><\/strong>to encapsulate special logic for more complex chart types, such as stream graph, etc. This makes them closer to the\u00a0<em>chart templates<\/em>. However, they still do not refer to the entire chart by just a chart type, which is more common for the chart templates.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>As an example, a candlestick chart can be described with grammars as combined layers of bar \u201cmarks\u201d and line \u201cmarks.\u201d For convenience, a high-level library may provide\u00a0<code>CandlestickSeries<\/code>\u00a0to combine the two layers into one and encapsulate logic for encoding the aesthetics. This\u00a0<code>CandlestickSeries<\/code>\u00a0is then composed with axes and gridlines to create a chart. On the other end, a chart template library may provide a<code>CandlestickChart<\/code>\u00a0component which already includes axes and gridlines and only ask for data.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/miro.medium.com\/max\/1634\/1%2A3IwI9OgWLYIuVvW1jxpfOQ.png?w=720&#038;ssl=1\" alt=\"\" \/>\r\n<figcaption>Candlestick Chart (<a href=\"https:\/\/diagrammm.com\/candlestick_chart\">reference<\/a>)<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n<p id=\"d306\">Several libraries utilize the\u00a0<strong>JSON with callbacks\u00a0<\/strong>design such as\u00a0<a href=\"https:\/\/echarts.apache.org\/en\/index.html\">ECharts<\/a>,\u00a0<a href=\"https:\/\/www.highcharts.com\/\">Highcharts<\/a>\u00a0and\u00a0<a href=\"https:\/\/plotly.com\/javascript\/\">Plotly<\/a>. The example below is a simple one so the configuration object looks just like plain JSON.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>option = {\r\n  xAxis: {\r\n    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']\r\n  },\r\n  yAxis: {},\r\n  series: [{\r\n    type: 'candlestick',\r\n    data: [\r\n      [20, 30, 10, 35],\r\n      [40, 35, 30, 55],\r\n      [33, 38, 33, 40],\r\n      [40, 40, 32, 42]\r\n    ]\r\n  }]\r\n};<\/code><\/pre>\r\n\r\n\r\n\r\n<p id=\"d306\" class=\"has-text-align-center has-small-font-size\">Create a Candlestick chart with\u00a0<a href=\"https:\/\/echarts.apache.org\/examples\/en\/editor.html?c=candlestick-simple\">ECharts<\/a><\/p>\r\n\r\n\r\n\r\n<p id=\"6372\">Many libraries were later created for React such as\u00a0<a href=\"https:\/\/formidable.com\/open-source\/victory\/\">Victory<\/a>,\u00a0<a href=\"https:\/\/uber.github.io\/react-vis\/\">React-Vis<\/a>\u00a0or\u00a0<a href=\"https:\/\/semiotic.nteract.io\/\">Semiotic<\/a>. They provide components, such as\u00a0<code>&lt;XYPlot\/&gt;<\/code>,\u00a0<code>&lt;LineSeries\/&gt;<\/code>, or\u00a0<code>&lt;XAxis\/&gt;<\/code>, that can be composed into the desired visualizations.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;VictoryChart\r\n  theme={VictoryTheme.material}\r\n  domainPadding={{ x: 25 }}\r\n  scale={{ x: \"time\" }}\r\n&gt;\r\n  &lt;VictoryAxis tickFormat={(t) =&gt; `${t.getDate()}\/${t.getMonth()}`}\/&gt;\r\n  &lt;VictoryAxis dependentAxis\/&gt;\r\n  &lt;VictoryCandlestick\r\n    candleColors={{ positive: \"#5f5c5b\", negative: \"#c43a31\" }}\r\n    data={sampleDataDates}\r\n  \/&gt;\r\n&lt;\/VictoryChart&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p id=\"6372\" class=\"has-text-align-center has-small-font-size\">Create a Candlestick chart with\u00a0<a href=\"https:\/\/formidable.com\/open-source\/victory\/docs\/victory-candlestick\">Victory<\/a>, which has React-based API<\/p>\r\n\r\n\r\n\r\n<p id=\"6372\">Compare the ECharts code (line 7) and Victory code (line 8\u201311) above to Vega-Lite code (line 24\u201339) below. Notice how the candlestick shape is described as a single series vs. two layers of marks.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>{\r\n  \"$schema\": \"https:\/\/vega.github.io\/schema\/vega-lite\/v4.json\",\r\n  \"width\": 400,\r\n  \"data\": {\"url\": \"data\/ohlc.json\"},\r\n  \"encoding\": {\r\n    \"x\": {\r\n      \"field\": \"date\",\r\n      \"type\": \"temporal\",\r\n      \"title\": \"Date\"\r\n    },\r\n    \"y\": {\r\n      \"type\": \"quantitative\",\r\n      \"scale\": {\"zero\": false},\r\n      \"title\": \"Price\"\r\n    },\r\n    \"color\": {\r\n      \"condition\": {\r\n        \"test\": \"datum.open &lt; datum.close\",\r\n        \"value\": \"#06982d\"\r\n      },\r\n      \"value\": \"#ae1325\"\r\n    }\r\n  },\r\n  \"layer\": [\r\n    {\r\n      \"mark\": \"rule\",\r\n      \"encoding\": {\r\n        \"y\": {\"field\": \"low\"},\r\n        \"y2\": {\"field\": \"high\"}\r\n      }\r\n    },\r\n    {\r\n      \"mark\": \"bar\",\r\n      \"encoding\": {\r\n        \"y\": {\"field\": \"open\"},\r\n        \"y2\": {\"field\": \"close\"}\r\n      }\r\n    }\r\n  ]\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p id=\"6372\" class=\"has-text-align-center has-small-font-size\">Create a Candlestick chart with\u00a0<a href=\"https:\/\/vega.github.io\/vega-lite\/examples\/layer_candlestick.html\">Vega-Lite<\/a><\/p>\r\n\r\n\r\n\r\n<p id=\"6372\">Another notable example of\u00a0<em>high-level building blocks\u00a0<\/em>abstraction is\u00a0<a href=\"https:\/\/deck.gl\/\">deck.gl<\/a>\u00a0and its comprehensive collection of layers that can be combined to produce map-based visualizations.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"651\" height=\"584\" class=\"wp-image-5027\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=651%2C584&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?w=651&amp;ssl=1 651w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=300%2C269&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=450%2C404&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=250%2C224&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=550%2C493&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=201%2C180&amp;ssl=1 201w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=334%2C300&amp;ssl=1 334w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-52.png?resize=557%2C500&amp;ssl=1 557w\" sizes=\"(max-width: 651px) 100vw, 651px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>import {Deck} from '@deck.gl\/core';\r\nimport {ScatterplotLayer} from '@deck.gl\/layers';\r\n\r\nconst INITIAL_VIEW_STATE = {\r\n  latitude: 37.8,\r\n  longitude: -122.45,\r\n  zoom: 15\r\n};\r\n\r\nconst deckgl = new Deck({\r\n  initialViewState: INITIAL_VIEW_STATE,\r\n  controller: true,\r\n  layers: [\r\n    new ScatterplotLayer({\r\n      data: [\r\n        {position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}\r\n      ],\r\n      getColor: d =&gt; d.color,\r\n      getRadius: d =&gt; d.radius\r\n    })\r\n  ]\r\n});<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Create a scatter plot on the map with deck.gl using its plain JS API. A ScatterplotLayer is one of the many layers offered by deck.gl that can be composed and placed on top of a map.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"d81d\">5. Chart Templates<\/h2>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"573\" class=\"wp-image-5028\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=617%2C573&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?w=617&amp;ssl=1 617w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=300%2C279&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=450%2C418&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=250%2C232&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=550%2C511&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=194%2C180&amp;ssl=1 194w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=323%2C300&amp;ssl=1 323w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-53.png?resize=538%2C500&amp;ssl=1 538w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/>\r\n<figcaption>Chart Templates are like completed LEGOs. Just look at the catalog and choose the one you want. (<a href=\"https:\/\/www.lego.com\/en-us\/product\/bricks-and-houses-11008\">source<\/a>)<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p id=\"e0da\">A library of this type can range from containing a single component to hundreds of components. Each component is referred to via its\u00a0<strong>chart type<\/strong>, e.g., Bar, Pie, Area, Stacked Bar, Stacked Area, Waterfall, Bump, Calendar, Treemap, Marimekko, Sunburst, ColumnWithLine, Dual line etc.<\/p>\r\n\r\n\r\n\r\n<p id=\"7101\">The best thing about the chart templates is they are\u00a0<strong>often ready to use, straight out of the box and require the least effort to produce a usable output<\/strong>. Developers can choose a chart type from its catalog, prepare data in the documented format then plug the data and component together.<\/p>\r\n\r\n\r\n\r\n<p id=\"ee27\">Instead of trying to describe a pie chart with a grammar or learn how to implement it in D3, just check if the library provides a pie chart component. If there is such component, then use it. If not, then find another library or alternative.<\/p>\r\n\r\n\r\n\r\n<p id=\"84a4\">Also, novel visualization types (such as a new technique that just came out of research) are often offered as a single-component library like this.<\/p>\r\n\r\n\r\n\r\n<p id=\"844e\">Examples:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>The generic collection that has many standard chart types:\u00a0<a href=\"https:\/\/developers.google.com\/chart\">Google Charts<\/a>,\u00a0<a href=\"https:\/\/nivo.rocks\/\">nivo<\/a>,\u00a0<a href=\"https:\/\/www.fusioncharts.com\/\">FusionCharts<\/a>,\u00a0<a href=\"http:\/\/philogb.github.io\/jit\/\">JIT<\/a>,\u00a0<a href=\"https:\/\/www.chartjs.org\/\">Chart.js<\/a>, or dc.js<\/li>\r\n<li>The specialized collection which has a single chart type:\u00a0<a href=\"http:\/\/kmandov.github.io\/d3-horizon-chart\/\">d3-horizon-chart<\/a>,\u00a0<a href=\"https:\/\/github.com\/abcnews\/d3-layout-narrative\">d3-layout-narrative<\/a>,\u00a0<a href=\"https:\/\/runningwithdata.com\/post\/566345323\/streamgraphjs\">streamgraph.js<\/a>.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"412\" class=\"wp-image-5029\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-54.png?resize=561%2C412&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-54.png?w=561&amp;ssl=1 561w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-54.png?resize=300%2C220&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-54.png?resize=450%2C330&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-54.png?resize=250%2C184&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-54.png?resize=550%2C404&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-54.png?resize=245%2C180&amp;ssl=1 245w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-54.png?resize=408%2C300&amp;ssl=1 408w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>const myRadarChart = new Chart(ctx, {\r\n  type: 'radar',\r\n  data: data,\r\n  options: options\r\n});<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center has-small-font-size\">Create a Radar chart with\u00a0<a href=\"https:\/\/www.chartjs.org\/docs\/latest\/charts\/radar.html\">Chart.js<\/a><\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"260\" class=\"wp-image-5030\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-55.png?resize=720%2C260&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-55.png?w=728&amp;ssl=1 728w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-55.png?resize=300%2C108&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-55.png?resize=450%2C163&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-55.png?resize=250%2C90&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-55.png?resize=550%2C199&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-55.png?resize=498%2C180&amp;ssl=1 498w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>import { Calendar } from '@nivo\/calendar';\r\n\r\n&lt;Calendar\r\n  data={[\r\n    { \"day\": \"2016-02-05\", \"value\": 397 },\r\n    { \"day\": \"2015-09-17\", \"value\": 283 }, \r\n  ]}\r\n  from=\"2015-04-01\"\r\n  to=\"2016-12-12\"\r\n  emptyColor=\"#eeeeee\"\r\n  colors={[ '#61cdbb', '#97e3d5', '#e8c1a0', '#f47560' ]}\r\n\/&gt;<\/code><\/pre>\r\n\r\n\r\n\r\n<p class=\"has-text-align-center has-small-font-size\">Create a calendar chart with\u00a0<a href=\"https:\/\/nivo.rocks\/calendar\/\">nivo<\/a>, which has React-based API<\/p>\r\n\r\n\r\n\r\n<p id=\"c64c\">The level of abstraction in a data visualization library is a continuous spectrum, not a discrete set of layers. Therefore, you may run into libraries that are somewhat borderline.\u00a0<strong>What is critical is not a semantic distinction between levels<\/strong>, but more so the developers\u2019 abilities to understand the offered abstraction to select a library that is appropriate for their own use cases and comfort. It is in fact not uncommon for libraries to offer features from multiple levels of abstraction. To give a few examples:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><a href=\"https:\/\/dc-js.github.io\/dc.js\/\">dc.js<\/a>\u00a0has both chart templates and high-level building blocks.<\/li>\r\n<li>G2Plot\u00a0is a catalog of chart templates on top of\u00a0G2, which is a grammar.<\/li>\r\n<li>react-vis\u00a0has both high-level building blocks (&lt;XYPlot \/&gt;) and chart templates (&lt;Sankey \/&gt;).<\/li>\r\n<li>In fact, D3 also spans multiple levels. For example,\u00a0<a href=\"https:\/\/github.com\/d3\/d3-scale\">d3-scale<\/a>\u00a0is using the scale concept from the grammar level while\u00a0<a href=\"https:\/\/github.com\/d3\/d3-shape\">d3-shape<\/a>\u00a0is closer to the graphics libraries.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"23e4\">Parting Thoughts<\/h2>\r\n\r\n\r\n\r\n<p id=\"3d1c\">To recap, the goal of this article was to map the vast universe of data visualization libraries and derive an underlying framework for better understanding them, regardless of whether you are simply picking one to use or trying to develop a new one. We\u2019ve organized a variety of libraries across a spectrum from low-level graphics manipulators to chart components that are ready to use, straight out of the box.<\/p>\r\n\r\n\r\n\r\n<p id=\"2de9\">While there were many libraries that were mentioned, I would be remiss if I didn\u2019t state that this listing is by no means exhaustive. I simply endeavored to describe the characteristics of each group and then selected some prominent libraries that best exemplified each category. This post also focused only on web-based libraries, and I would be interested to see such an approach extended to other languages and platforms.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"480\" class=\"wp-image-5031\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2021\/06\/image-19-1024x682.jpeg?resize=720%2C480&#038;ssl=1\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=1024%2C682&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=300%2C200&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=768%2C512&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=1536%2C1024&amp;ssl=1 1536w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=2048%2C1365&amp;ssl=1 2048w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=450%2C300&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=1200%2C800&amp;ssl=1 1200w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=1360%2C906&amp;ssl=1 1360w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=800%2C533&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=2000%2C1333&amp;ssl=1 2000w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=250%2C167&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=550%2C367&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=270%2C180&amp;ssl=1 270w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?resize=750%2C500&amp;ssl=1 750w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?w=1440&amp;ssl=1 1440w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-19-scaled.jpeg?w=2160&amp;ssl=1 2160w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\r\n<figcaption>A magnificent Beauty and the Beast Library built with LEGO by\u00a0<a href=\"https:\/\/www.flickr.com\/photos\/156644125@N08\/\">Sarah von Innerebner<\/a>\u00a0(<a href=\"https:\/\/www.flickr.com\/photos\/156644125@N08\/39613842480\/in\/album-72157667743168568\">source<\/a>)<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p id=\"2152\">When deciding which library to use, look for the appropriate abstraction level for the time you have, your own coding comfort, the tasks you are trying to accomplish, and the target developers and users. Then look at API design and other factors that might be included into the consideration, such as:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><strong>Rendering technology:<\/strong>\u00a0SVG, Canvas, WebGL<\/li>\r\n<li><strong>Performance:<\/strong>\u00a0Bundle size, Speed, Server-side Rendering<\/li>\r\n<li><strong>Others:<\/strong>\u00a0Type-safety, License, Theming, Animation, etc.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p id=\"84ed\">I hope you enjoyed the tour and learned a few things along the way! Perhaps the next time you come across a new package, you can use this framework as a lens to analyze its own offerings and how it is different from or similar to the libraries that you already know.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"0ae7\">Acknowledgment<\/h2>\r\n\r\n\r\n\r\n<p id=\"afa6\"><em>Thank you\u00a0<a href=\"https:\/\/medium.com\/u\/d151daf6c630?source=post_page-----798ea9f536e7--------------------------------\" target=\"_blank\" rel=\"noreferrer noopener\">Kanit Ham Wong<\/a>\u00a0and\u00a0<a href=\"https:\/\/medium.com\/u\/d85e994e2adb?source=post_page-----798ea9f536e7--------------------------------\" target=\"_blank\" rel=\"noreferrer noopener\">Senthil Natarajan<\/a>\u00a0for their feedback.<\/em><\/p>\r\n<div class=\"cats\"><span class=\"cats__title\">Categories<\/span><a href=\"https:\/\/nightingaledvs.com\/.\/how-to\/code\/\" rel=\"category tag\">Code<\/a> <a href=\"https:\/\/nightingaledvs.com\/.\/how-to\/\" rel=\"category tag\">How To<\/a> <a href=\"https:\/\/nightingaledvs.com\/.\/how-to\/use-tools\/\" rel=\"category tag\">Use Tools<\/a><\/div><div class=\"tags\"><div class=\"tags__title\">Tags<\/div><a href=\"https:\/\/nightingaledvs.com\/tag\/code\/\" rel=\"tag\">Code<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/data-visualization\/\" rel=\"tag\">Data Visualization<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/json\/\" rel=\"tag\">json<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/libraries\/\" rel=\"tag\">libraries<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/tools\/\" rel=\"tag\">Tools<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0\u201cWhich visualization library should I use?\u201d Typically, making this decision is not about..<\/p>\n","protected":false},"author":47,"featured_media":5014,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","cybocfi_hide_featured_image":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[64,63,181],"tags":[228,35,227,226,225],"class_list":["post-5013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-how-to","category-use-tools","tag-code","tag-data-visualization","tag-json","tag-libraries","tag-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Navigating the Wide World of Data Visualization Libraries | Nightingale<\/title>\n<meta name=\"description\" content=\"Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0\u201cWhich visualization library should I use?\u201d Typically, making this decision is not about whether one library is \u201cbetter\u201d than another, but whether the specific library is more suitable for what the developer is trying to achieve.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Navigating the Wide World of Data Visualization Libraries - Nightingale\" \/>\n<meta property=\"og:description\" content=\"Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0\u201cWhich visualization library should I use?\u201d Typically, making this decision is not about whether one library is \u201cbetter\u201d than another, but whether the specific library is more suitable for what the developer is trying to achieve.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/\" \/>\n<meta property=\"og:site_name\" content=\"Nightingale\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-22T18:53:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-07T21:50:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1966\" \/>\n\t<meta property=\"og:image:height\" content=\"1420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Krist Wongsuphasawat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Krist Wongsuphasawat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/\"},\"author\":{\"name\":\"Krist Wongsuphasawat\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/person\/583369a1c3994bb17ac68a37228a2a8f\"},\"headline\":\"Navigating the Wide World of Data Visualization Libraries\",\"datePublished\":\"2020-09-22T18:53:06+00:00\",\"dateModified\":\"2021-06-07T21:50:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/\"},\"wordCount\":2722,\"publisher\":{\"@id\":\"https:\/\/nightingaledvs.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1\",\"keywords\":[\"Code\",\"Data Visualization\",\"json\",\"libraries\",\"Tools\"],\"articleSection\":[\"Code\",\"How To\",\"Use Tools\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/\",\"url\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/\",\"name\":\"Navigating the Wide World of Data Visualization Libraries - Nightingale\",\"isPartOf\":{\"@id\":\"https:\/\/nightingaledvs.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1\",\"datePublished\":\"2020-09-22T18:53:06+00:00\",\"dateModified\":\"2021-06-07T21:50:04+00:00\",\"description\":\"Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0\u201cWhich visualization library should I use?\u201d Typically, making this decision is not about whether one library is \u201cbetter\u201d than another, but whether the specific library is more suitable for what the developer is trying to achieve.\",\"breadcrumb\":{\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1\",\"width\":1966,\"height\":1420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/nightingaledvs.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Navigating the Wide World of Data Visualization Libraries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nightingaledvs.com\/#website\",\"url\":\"https:\/\/nightingaledvs.com\/\",\"name\":\"Nightingale\",\"description\":\"The Journal of the Data Visualization Society\",\"publisher\":{\"@id\":\"https:\/\/nightingaledvs.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nightingaledvs.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/nightingaledvs.com\/#organization\",\"name\":\"Nightingale\",\"url\":\"https:\/\/nightingaledvs.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1\",\"width\":1988,\"height\":454,\"caption\":\"Nightingale\"},\"image\":{\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/person\/583369a1c3994bb17ac68a37228a2a8f\",\"name\":\"Krist Wongsuphasawat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cadb2b1390d569246e96ac636f89264447fa7c47727eba61aa01e80fc5d8ef33?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cadb2b1390d569246e96ac636f89264447fa7c47727eba61aa01e80fc5d8ef33?s=96&d=monsterid&r=g\",\"caption\":\"Krist Wongsuphasawat\"},\"description\":\"Data Experience @airbnb \/ Prev: Turn data into pixels @twitter \u2022 Invent new vis @UofMaryland HCIL PhD \u2022 From @Thailand \u2022 http:\/\/kristw.yellowpigz.com\",\"url\":\"https:\/\/nightingaledvs.com\/author\/krist_wongsuphasawat\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Navigating the Wide World of Data Visualization Libraries | Nightingale","description":"Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0\u201cWhich visualization library should I use?\u201d Typically, making this decision is not about whether one library is \u201cbetter\u201d than another, but whether the specific library is more suitable for what the developer is trying to achieve.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/","og_locale":"en_US","og_type":"article","og_title":"Navigating the Wide World of Data Visualization Libraries - Nightingale","og_description":"Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0\u201cWhich visualization library should I use?\u201d Typically, making this decision is not about whether one library is \u201cbetter\u201d than another, but whether the specific library is more suitable for what the developer is trying to achieve.","og_url":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/","og_site_name":"Nightingale","article_published_time":"2020-09-22T18:53:06+00:00","article_modified_time":"2021-06-07T21:50:04+00:00","og_image":[{"width":1966,"height":1420,"url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1","type":"image\/png"}],"author":"Krist Wongsuphasawat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Krist Wongsuphasawat","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#article","isPartOf":{"@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/"},"author":{"name":"Krist Wongsuphasawat","@id":"https:\/\/nightingaledvs.com\/#\/schema\/person\/583369a1c3994bb17ac68a37228a2a8f"},"headline":"Navigating the Wide World of Data Visualization Libraries","datePublished":"2020-09-22T18:53:06+00:00","dateModified":"2021-06-07T21:50:04+00:00","mainEntityOfPage":{"@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/"},"wordCount":2722,"publisher":{"@id":"https:\/\/nightingaledvs.com\/#organization"},"image":{"@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1","keywords":["Code","Data Visualization","json","libraries","Tools"],"articleSection":["Code","How To","Use Tools"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/","url":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/","name":"Navigating the Wide World of Data Visualization Libraries - Nightingale","isPartOf":{"@id":"https:\/\/nightingaledvs.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage"},"image":{"@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1","datePublished":"2020-09-22T18:53:06+00:00","dateModified":"2021-06-07T21:50:04+00:00","description":"Graphics and visualization developers often get presented with a simple yet difficult question:\u00a0\u201cWhich visualization library should I use?\u201d Typically, making this decision is not about whether one library is \u201cbetter\u201d than another, but whether the specific library is more suitable for what the developer is trying to achieve.","breadcrumb":{"@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#primaryimage","url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1","contentUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1","width":1966,"height":1420},{"@type":"BreadcrumbList","@id":"https:\/\/nightingaledvs.com\/navigating-the-wide-world-of-data-visualization-libraries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nightingaledvs.com\/"},{"@type":"ListItem","position":2,"name":"Navigating the Wide World of Data Visualization Libraries"}]},{"@type":"WebSite","@id":"https:\/\/nightingaledvs.com\/#website","url":"https:\/\/nightingaledvs.com\/","name":"Nightingale","description":"The Journal of the Data Visualization Society","publisher":{"@id":"https:\/\/nightingaledvs.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nightingaledvs.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/nightingaledvs.com\/#organization","name":"Nightingale","url":"https:\/\/nightingaledvs.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1","contentUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1","width":1988,"height":454,"caption":"Nightingale"},"image":{"@id":"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/nightingaledvs.com\/#\/schema\/person\/583369a1c3994bb17ac68a37228a2a8f","name":"Krist Wongsuphasawat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nightingaledvs.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cadb2b1390d569246e96ac636f89264447fa7c47727eba61aa01e80fc5d8ef33?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cadb2b1390d569246e96ac636f89264447fa7c47727eba61aa01e80fc5d8ef33?s=96&d=monsterid&r=g","caption":"Krist Wongsuphasawat"},"description":"Data Experience @airbnb \/ Prev: Turn data into pixels @twitter \u2022 Invent new vis @UofMaryland HCIL PhD \u2022 From @Thailand \u2022 http:\/\/kristw.yellowpigz.com","url":"https:\/\/nightingaledvs.com\/author\/krist_wongsuphasawat\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-41.png?fit=1966%2C1420&ssl=1","jetpack-related-posts":[{"id":22939,"url":"https:\/\/nightingaledvs.com\/fourth-wave-a-changing-world\/","url_meta":{"origin":5013,"position":0},"title":"The 4th Wave: A Changing World","author":"Amanda Makulec","date":"February 11, 2025","format":false,"excerpt":"For decades now, we\u2019ve seen data visualization become a part of our lives politically, socially, and culturally, rather than just being a tool at work or a niche interest. The use of charts through the peak of the COVID pandemic accelerated those fundamental shifts in the ways the public accesses\u2026","rel":"","context":"In &quot;Topics in Dataviz&quot;","block_context":{"text":"Topics in Dataviz","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/"},"img":{"alt_text":"A header graphic titled \"A Changing World,\" featuring a bar chart icon and intricate network visualizations in teal and yellow hues.","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/02\/image4.png?fit=1200%2C549&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/02\/image4.png?fit=1200%2C549&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/02\/image4.png?fit=1200%2C549&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/02\/image4.png?fit=1200%2C549&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/02\/image4.png?fit=1200%2C549&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":17188,"url":"https:\/\/nightingaledvs.com\/hachette-v-internet-archive-data-access\/","url_meta":{"origin":5013,"position":1},"title":"Hachette v. Internet Archive and the Future of Data Access","author":"William Careri","date":"May 16, 2023","format":false,"excerpt":"A legal ruling raises issues about fair use in storing knowledge, the role of digital libraries, and balancing copyrights with open access.","rel":"","context":"In &quot;All Stories&quot;","block_context":{"text":"All Stories","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/all-stories\/"},"img":{"alt_text":"An isometric illustration of a library, filled with books and coworking tables, is enclosed by yellow police tape which read \"lockdown.\"","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/image3-1.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/image3-1.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/image3-1.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/image3-1.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/image3-1.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":21145,"url":"https:\/\/nightingaledvs.com\/interactive-data-diaries-machine-learning-visualization\/","url_meta":{"origin":5013,"position":2},"title":"&#8216;The Data Diaries&#8217;: Transforming a Machine Learning Paper into an Interactive Visualization","author":"Jan Simson","date":"June 8, 2024","format":false,"excerpt":"Can you make an academic paper interactive? Let me walk you through my journey of creating an interactive visualization to illustrate the results of the paper, \u201cOne Model Many Scores: Using Multiverse Analysis to Prevent Fairness Hacking and Evaluate the Influence of Model Design Decisions\u201d written by Florian Pfisterer, Christoph\u2026","rel":"","context":"In &quot;Data Science&quot;","block_context":{"text":"Data Science","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/data-science\/"},"img":{"alt_text":"A graphic showing an academic paper and a data visualization","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2024\/06\/nightingale-title-1.jpg?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2024\/06\/nightingale-title-1.jpg?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2024\/06\/nightingale-title-1.jpg?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2024\/06\/nightingale-title-1.jpg?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2024\/06\/nightingale-title-1.jpg?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13134,"url":"https:\/\/nightingaledvs.com\/five-inspiring-data-visualization-galleries\/","url_meta":{"origin":5013,"position":3},"title":"Five Inspiring Data Visualization Galleries","author":"Jason Forrest","date":"September 29, 2022","format":false,"excerpt":"If designed with care and preparation, data visualization can immensely improve viewers\u2019 understanding of what is happening. Yes, data exploration and data analysis are essential, but data visualization helps viewers begin their journey in understanding why something is happening. Data visualization helps to distill complex information and transform it into\u2026","rel":"","context":"In &quot;How To&quot;","block_context":{"text":"How To","link":"https:\/\/nightingaledvs.com\/.\/how-to\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/09\/datylon-blog-5-inspiring-data-visualization-galleries-featured-image.png?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/09\/datylon-blog-5-inspiring-data-visualization-galleries-featured-image.png?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/09\/datylon-blog-5-inspiring-data-visualization-galleries-featured-image.png?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/09\/datylon-blog-5-inspiring-data-visualization-galleries-featured-image.png?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/09\/datylon-blog-5-inspiring-data-visualization-galleries-featured-image.png?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":8666,"url":"https:\/\/nightingaledvs.com\/what-are-data-visualization-style-guidelines\/","url_meta":{"origin":5013,"position":4},"title":"What Are Data Visualization Style Guidelines?","author":"Amy Cesal","date":"July 10, 2019","format":false,"excerpt":"Organizations like\u00a0Google\u00a0and\u00a0London City Intelligence\u00a0have extended their design systems to include standards specifically for data visualization. This speaks to the growing importance of using data and metrics in an organization\u2019s decision making and the value of branding them appropriately. Examples from the Sunlight Foundation and Consumer Financial Protection Bureau dataviz style\u2026","rel":"","context":"In &quot;Design&quot;","block_context":{"text":"Design","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-28-at-8.44.29-AM-1.png?fit=1200%2C328&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-28-at-8.44.29-AM-1.png?fit=1200%2C328&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-28-at-8.44.29-AM-1.png?fit=1200%2C328&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-28-at-8.44.29-AM-1.png?fit=1200%2C328&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-28-at-8.44.29-AM-1.png?fit=1200%2C328&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6450,"url":"https:\/\/nightingaledvs.com\/review-hands-on-data-visualization\/","url_meta":{"origin":5013,"position":5},"title":"REVIEW: Hands-on Data Visualization","author":"Alexandra Khoo","date":"July 13, 2021","format":false,"excerpt":"As a community-taught dataviz designer, I love digging into the craft of turning data into narrative and finding new ways to combat the dataviz equivalent of a writer\u2019s block. I\u2019m always curious to know: How do different people approach data visualization? What is their design philosophy? How do they organize\u2026","rel":"","context":"In &quot;Community&quot;","block_context":{"text":"Community","link":"https:\/\/nightingaledvs.com\/.\/community\/"},"img":{"alt_text":"Book cover of Hands-On Data Visualization","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/07\/belly-scratcher.gif?fit=600%2C336&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/07\/belly-scratcher.gif?fit=600%2C336&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/07\/belly-scratcher.gif?fit=600%2C336&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_shortlink":"https:\/\/wp.me\/pd2dsI-1iR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/posts\/5013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/comments?post=5013"}],"version-history":[{"count":0,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/posts\/5013\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/media\/5014"}],"wp:attachment":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/media?parent=5013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/categories?post=5013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/tags?post=5013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}