Cyscale

cyscale

When it comes to data visualization, presenting intricate information in a clear and aesthetically pleasing manner is crucial. Scalable Vector Graphics ( ) has become a versatile and powerful tool for producing interactive and dynamic visualizations. SVG This post aims to provide a thorough understanding of SVG and its importance in the field of data visualization. Content Overview Introduction to Scalable Vector Graphics Key Features of SVG for Data Visualization Coordinates and Handling in SVG Creating SVG-based Visualizations Best Practices for SVG-based Data Visualization Introduction to Scalable Vector Graphics Scalable Vector Graphics (SVG) is an XML-based vector image format that defines two-dimensional graphics with precision and adaptability. Unlike raster formats such as JPEG or PNG, SVG images are composed of geometric shapes and curves defined by mathematical equations, ensuring that they remain crisp and clear at any resolution. Raster Graphics vs. Vector Graphics: Raster graphics, also known as bitmap graphics, are a type of digital image format that represents images as a grid of individual pixels. Each pixel contains specific color and brightness information, and when combined together, these pixels form the complete image. Raster graphics are widely used for photographs, digital paintings, and images with complex color gradients or realistic textures. Here are some key characteristics of raster graphics: Raster images have a fixed resolution determined by the number of pixels they contain. Enlarging a raster image beyond its original dimensions can cause pixelation and loss of quality due to the stretching of existing pixels. Resolution-dependent: Raster images can achieve high levels of detail, especially when captured at a high resolution. However, the quality can suffer when the image is resized or zoomed in, as individual pixels become more visible. Image Quality: Common raster image formats include JPEG, PNG, GIF, and BMP. These formats store pixel information, color values, and compression settings. File Formats: Vector graphics, on the other hand, are composed of geometric shapes and mathematical equations rather than pixels. Each element in a vector graphic is defined by attributes such as position, size, color, and shape. Vector graphics are particularly suitable for creating illustrations, logos, icons, and designs that require sharp lines, smooth curves, and easy scalability. Here are some key characteristics of vector graphics: Vector graphics are resolution-independent, meaning they can be scaled to any size without losing quality. This makes them ideal for both small icons and large banners. Resolution-independent: Vector images maintain their sharpness and clarity regardless of size. They are not limited by pixel grids, so they don’t suffer from pixelation. Image Quality: Common vector image formats include SVG (Scalable Vector Graphics), AI (Adobe Illustrator), and EPS (Encapsulated PostScript). These formats store mathematical equations that define the shapes and attributes of the elements in the image. File Formats: Raster graphics are made up of pixels and are suitable for images with complex color gradients and textures, while vector graphics are composed of mathematical shapes and are ideal for designs that require scalability and precision. Here is a more comprehensive categorization of vector and raster graphics, taking into account various aspects of their expected attributes: Aspect Vector Graphics Raster Graphics Composition Composed of geometric shapes defined by equations Composed of individual pixels Resolution Independence Maintain clarity at any resolution Quality degrades when scaled up Scalability Infinitely scalable without loss of quality Limited scalability due to pixelation File Size Generally smaller file size Larger file size due to pixel data Editing Easily editable and resizable Difficult to edit without loss of quality Zooming Zoom in without loss of quality Zooming may lead to pixelation Complexity Suitable for intricate and detailed designs Best for photographs and detailed images Animation Supports animations with CSS/JavaScript Animation capabilities are limited Interactivity Supports interactive elements Limited interactivity beyond clicks/hovers Editing Flexibility Non-destructive editing with layers Destructive editing due to pixel manipulation Print Quality High-quality prints regardless of size Print quality depends on the original resolution Examples Logos, icons, illustrations Photographs, digital paintings, textures Accessibility Supports alt text and ARIA labels Limited accessibility features These inherent scalabilities make SVG an ideal choice for data visualization, as it allows visualizations to be rendered consistently across various devices and screen sizes. Let’s look at a broader perspective on the usage of SVGs for data visualization. Key Features of SVG for Data Visualization Resolution Independence Resolution independence is a cornerstone of SVG’s utility in data visualization. Traditional raster images lose quality as they are scaled up, resulting in pixelation. However, SVG images retain their clarity regardless of size. This is particularly advantageous when presenting data visualizations on various platforms with varying screen sizes and resolutions. This feature ensures that the visualizations maintain their quality and legibility regardless of the device used. Interactivity Interactivity plays a pivotal role in modern data visualization. SVG’s capability to incorporate interactive elements enhances user engagement and understanding. For instance, consider a bar chart where hovering over a bar displays additional information. This dynamic feature aids users in exploring data points without overwhelming them with excessive details. SVG’s interactivity capability allows users to interact with the visualizations, uncovering insights and details as they navigate through the data. Animation Animation is a powerful storytelling tool in data visualization. SVG supports animations through CSS and JavaScript, enabling the creation of fluid transitions and effects. For example, an animated line chart can vividly showcase the evolution of data over time, helping users perceive trends and anomalies. The animation feature in SVG adds a temporal dimension to visualizations, making it easier for users to grasp changes and patterns in the data. Accessibility Creating inclusive data visualizations is gaining prominence. SVG contributes to accessibility through features like alt text and ARIA labels. Screen readers can interpret these attributes, making visualizations comprehensible to individuals with visual impairments. Semantic structuring of SVG elements further enhances accessibility. This feature ensures that data visualizations are accessible to a wider audience, including those with disabilities, promoting inclusivity and equal access to information. Coordinates and Handling in SVG In the standard Cartesian coordinate system, the origin (0,0) is at the lower left corner, with increasing x-values moving points right and increasing y-values moving them up. SVG uses a similar cartesian coordinate system to position elements within the image, but the coordinate system starts from the top-left corner of the SVG canvas, with the X-axis increasing horizontally to the right and the Y-axis increasing vertically downward. This coordinate system enables precise placement of shapes, text, and other visual elements. Coordinates are specified using attributes within SVG elements. For instance, the element's attribute defines the X-coordinate of the circle's centre, while the attribute defines the Y-coordinate. This allows you to position circles, rectangles, paths, and other shapes accurately on the canvas. circle cx cy Furthermore, SVG allows the grouping of elements using the element. This can be particularly useful when you want to apply transformations, animations, or styling to multiple elements as a single unit. <g> Creating SVG-based Visualizations SVG Syntax Understanding SVG’s syntax is fundamental for crafting custom visualizations. SVG uses XML tags to define shapes and elements. For instance, the following code snippet creates a simple circle: <svg>
  <circle cx="50" cy="50" r="30" fill="blue" />
</svg> This snippet illustrates how SVG elements are structured using XML-like syntax, resulting in the following output: Elements like , , and can be combined to create intricate visual representations. circle rect path Data Binding Libraries like D3.js (a JavaScript library) simplify the process of binding data to SVG elements. D3.js facilitates the creation of data-driven visualizations by connecting dataset values to attributes. Consider a bar chart where the height of each bar corresponds to a data value. D3.js enables seamless integration of data and visualization, automating the process of generating visual elements based on data. <html>
<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <svg id="bar-chart"></svg>

    <script>
        const dataset = [10, 25, 15, 30, 20];

        const svgWidth = 400;
        const svgHeight = 300;
        const barPadding = 5;

        const svg = d3.select("#bar-chart")
            .attr("width", svgWidth)
            .attr("height", svgHeight);

        const xScale = d3.scaleBand()
            .domain(d3.range(dataset.length))
            .range([0, svgWidth])
            .paddingInner(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([svgHeight, 0]);

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", (d, i) => xScale(i))
            .attr("y", d => yScale(d))
            .attr("width", xScale.bandwidth())
            .attr("height", d => svgHeight - yScale(d))
            .attr("fill", "steelblue");

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(d => d)
            .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
            .attr("y", d => yScale(d) - 5)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("fill", "white");
    </script>
</body>
</html> The above code snippet generates the following output: Styling and Customization SVG elements can be styled using CSS, offering extensive customization options. For instance, CSS can be used to define colors, gradients, and animations. By applying consistent styles, visualizations can align with branding guidelines or user preferences. This styling versatility enables designers to create visually cohesive and aesthetically pleasing visualizations. Here’s an example of the same: <html>
<head>
<style>

  .custom-svg {
    width: 200px;
    height: 200px;
    fill: #3498db;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

</style>
</head>
<body>

  <svg class="custom-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" />
  </svg>

</body>
</html> The above code snippet produces the following output: Best Practices for SVG-based Data Visualization Optimize for Performance While SVG’s flexibility is an asset, complex visualizations can impact performance. Techniques like grouping elements, simplifying paths, and utilizing CSS animations can enhance the overall performance and responsiveness of SVG-based visualizations. Optimization ensures that visualizations load quickly and provide smooth interactions. Responsiveness Creating responsive visualizations ensures a seamless user experience across devices. Combining SVG’s inherent scalability with responsive design principles allows visualizations to adapt gracefully to various screen sizes. This is particularly crucial in the era of mobile and tablet devices. Responsive design guarantees that visualizations remain usable and engaging on a wide range of devices. Use Cases SVG is suitable for a wide range of data visualization types. Let’s take an example of creating a basic bar chart-like illustration: <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">

  <line x1="50" y1="250" x2="350" y2="250" stroke="black" />

  <line x1="50" y1="250" x2="50" y2="50" stroke="black" />

  <rect x="75" y="200" width="50" height="50" fill="blue" />

  <rect x="150" y="150" width="50" height="100" fill="green" />

  <rect x="225" y="100" width="50" height="150" fill="red" />

  <rect x="300" y="50" width="50" height="200" fill="orange" />

</svg> The above code generates: Another example, for instance, is interactive maps can be created by layering SVG shapes and associating data with geographical regions. This adaptability makes SVG an essential tool for creating diverse and informative visualizations. In conclusion, SVG stands as a powerful asset for crafting compelling data visualizations. SVG empowers storytellers and analysts to present data-driven narratives in an impactful and accessible manner. Thank you for reading this far! Also published . here

Harnessing Scalable Vector Graphics (SVG) for Effective Data Visualization

Charts are widely used in web applications and they are used to make complex data easy to understand and interact with. In this article, I would like to show how to enhance basic chart implementation and make it look better and fancier. I picked a line chart for my showcase, which is one of the most popular. It is widely used in different fintech apps or other data analytical software. The purpose of that particular chart is to display trends and analyze how the data has changed over time. So, I would like to show how to make a basic line chart more dynamic. I've created a simple project with the basic structure and dummy data set. Let's take a look at that: Index <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Line chart animation</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script type="module" src="main.js" defer></script>
</head>
<body>
    <div class="chart-wrapper">
        <div id="line-chart" class="chart"></div>
    </div>
</body>
</html> Chart data const lineData = [{
    values: [
        {date: "2020/01/01", total: 230},
        {date: "2020/02/01", total: 290},
        {date: "2020/03/01", total: 230},
        {date: "2020/04/01", total: 270},
        {date: "2020/05/01", total: 244},
        {date: "2020/06/01", total: 270},
        {date: "2020/07/01", total: 320},
        {date: "2020/08/01", total: 320},
        {date: "2020/09/01", total: 250},
        {date: "2020/10/01", total: 272},
    ]
}]

export default lineData; Styles .chart-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
} All is set, time to create a static line chart with the area. It does not look too simple at first sight and it takes almost 100 lines of code to achieve that representation. So, I wrote comments on the main parts of the code to make it more clear. import lineData from '../data/line-data.js'

// Selecting the element
const element = document.getElementById('line-chart');

// Setting dimensions
const margin = {top: 40, right: 30, bottom: 7, left: 50},
    width = 900 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parsing timestamps
const parseTime = d3.timeParse('%Y/%m/%d');

const parsedData = lineData.map(item => (
    {
        values: item.values.map((val) => ({
            total: val.total,
            date: parseTime(val.date)
        }))
    }));

// Appending svg to a selected element
const svg = d3.select(element)
    .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', 300 + margin.top + margin.bottom)
    .attr("viewBox", `0 40 ${width + 80} ${height}`)
    .append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

// Setting X,Y scale ranges
const xScale = d3.scaleTime()
    .domain([
        d3.min(parsedData, (d) => d3.min(d.values, (v) => v.date)),
        d3.max(parsedData, (d) => d3.max(d.values, (v) => v.date))
    ])
    .range([0, width]);

const yScale = d3.scaleLinear()
    .domain([
        d3.min(parsedData, (d) => d3.min(d.values, (v) => v.total)),
        d3.max(parsedData, (d) => d3.max(d.values, (v) => v.total))
    ])
    .range([height, 0]);

const chartSvg = svg.selectAll('.line')
    .data(parsedData)
    .enter();

// Drawing line with inner gradient and area
// Adding functionality to make line and area curved
const line = d3.line()
    .x(function(d) {
        return xScale(d.date);
    })
    .y(function(d) {
        return yScale(d.total);
    })
    .curve(d3.curveCatmullRom.alpha(0.5));

// Defining the area, which appear after animation ends
const area = d3.area()
    .x(function(d) { return xScale(d.date); })
    .y0(height)
    .y1(function(d) { return yScale(d.total); })
    .curve(d3.curveCatmullRom.alpha(0.5));

// Defining the line path and adding some styles
const path = chartSvg.append('path')
    .attr('d', function(d) {
        return line(d.values)
    })
    .attr('stroke-width', '2')
    .style('fill', 'none')
    .attr('stroke', '#ff6f3c');

// Drawing animated area
chartSvg.append("path")
    .attr("d", function(d) {
        return area(d.values)
    })
    .style('fill', 'rgba(255,111,60,0.15)')

// Adding the x Axis
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale));

// Adding the y Axis
svg.append("g")
    .call(d3.axisLeft(yScale)); Here is how the chart looks: Here is the point when we can add animation. I decided to animate the area and line separately. I would like the area to appear first with smooth animation and then the line to be slowly drawn over the area. To achieve that, I used D3 methods, such as transition and duration. Besides that, I used the delay method to avoid line and area animation overlapping. To make that animation we need to define the initial state of the element. So we need to define starting value of the area. I declared a separate var and called it zeroArea and set Y scale value to 0. const zeroArea = d3.area()
    .x(function(d) { return xScale(d.date); })
    .y0(height)
    .y1(function() { return 0; })
    .curve(d3.curveCatmullRom.alpha(0.5)); After that, I updated the part where we draw an area by tweaking the zeroArea to the area, which is expected to be after the transition. chartSvg.append("path")
    .attr("d", function(d) {
        return zeroArea(d.values)
    })
    .style('fill', 'rgba(255,111,60,0.15)')
    .transition()
    .duration(1500)
    .attr("d", function(d) {
        return area(d.values)
    })
    .style('fill', 'rgba(255,111,60,0.15)'); Let's get back to the line. The idea here is similar to the way we animate the area. But their transition depends on line length, and to be able to get it, we should do the following: const length = path.node().getTotalLength(); // Get line length Then, we should set a transition of that line by using its length path.attr("stroke-dasharray", length + " " + length)
    .attr("stroke-dashoffset", length)
    .transition()
    .ease(d3.easeLinear)
    .attr("stroke-dashoffset", 0)
    .delay(1500)
    .duration(3000) Here is the result of that improvements: Wrapping up I believe that the chart looks much better now and the animation can be easily adjusted with small changes to the initial and transition values to X or Y scales. Similar animation can be also applied to pie and bar charts and it requires just several lines of code to be added to the implementation of the static chart. If you would like to explore and investigate all things implemented altogether, you can find the source code on my . GitHub Thank you for reading, I hope it was helpful!

Animating Line Charts With D3.js

Visualizing data across a set of concentric rings, bullseye charts are widely used in drug pipeline and clinical trials data analysis. This tutorial will explain how to create this type of diagram with JavaScript. What’s more, you’ll see an excellent, typical example of an interactive bullseye chart in action! I collated detailed information about all the COVID-19 vaccine candidates currently undergoing clinical studies from the . Now, join me as I plot it all in an interactive JS-based bullseye chart, by vaccine type and development phase! WHO’s vaccine tracker Bullseye Chart Preview Are you wondering what the resulting chart looks like? Take a sneak peek right below! Then follow along, and you’ll learn how to build this fascinating JavaScript-based bullseye chart showing the COVID-19 vaccine landscape at a glance! Building a JavaScript Bullseye Chart The process of creating a bullseye chart with JavaScript can be split into four fundamental steps: Create an HTML page. Include scripts. Connect data. Do some JavaScript coding. Now, check out how it goes in reality step by step! 1. Create a basic HTML page The first thing I do is create a basic web page with a block-level HTML element ( ) to hold the future bullseye chart. <div> To easily reference the element later in the code, I provide it with an value. <div> id I also set its and parameters as 100%. As a result, my bullseye chart will render across the whole HTML page. height width <html>
  <head>
    <title>JavaScript Bullseye Chart</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>

  <body>
    <div id="container"></div>
  </body>
</html> 2. Include scripts Now, I need to reference all scripts that will be used to create the bullseye chart I have in mind. That goes to the page’s section. <head> There are JavaScript charting libraries out there, collections of pre-written JavaScript code intended to facilitate the development of data visualizations. However, not all of them support bullseye charts. One of those that have this type of graph is , which is free for non-commercial use and pretty simple to get started with, so I decided to use it as an example in this tutorial. many AnyChart To make a bullseye chart, I need the library’s and modules. core polar <html>
  <head>
    <title>JavaScript Bullseye Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-polar.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>

  <body>  
    <div id="container"></div>
    <script>
      // All the JS bullseye chart code goes here.
    </script>
  </body>
</html> 3. Connect data So. I took vaccine data from the section of the World Health Organization’s website and curated it into a JSON . COVID-19 vaccine tracker and landscape file To load the data file, I will use a handy utility. So I reference it together with the other scripts. Then I will simply connect the dataset using the function. Data Adapter data.loadJsonFile Now that we’ve got a holder page, scripts, and data for the visualization, let me show you how to code a lovely interactive JavaScript bullseye chart! 4. Do some JS coding Although bullseye charts may seem quite fancy, it is not very complicated to build such a data visualization using a JavaScript charting library. I am going to explain each move and leave explanatory notes in the code itself. So, to start with, I add a function enclosing all the code, which makes sure that everything inside it will execute only after the page is ready, and then load the data from the JSON file. anychart.onDocumentReady(function () {
  anychart.data.loadJsonFile(
    "https://gist.githubusercontent.com/shacheeswadia/3cc96d8ed792bfa0c04fbd3825816fde/raw/606c2646df568f30bd39dc01fcd4efe6e92b3bac/vaccineData.json",
    function (data) {...}
  );
}); Then, I create a polar chart instance. var chart = anychart.polar(); I want my bullseye chart to have a hole in the center, so I set the inner radius. chart.innerRadius(80); Next, I specify both the Y scale (for clinical research phases) and the X scale (for vaccine types) as ordinal and define the order in which I want the values to show up. // y scale shows phases
// set it as ordinal
chart.yScale("ordinal");

// define the order of values on the scale
chart
  .yScale()
  .values([
    "Phase 4",
    "Phase 3",
    "Phase 2/3",
    "Phase 1/2",
    "Phase 2",
    "Phase 1",
    "NA"
  ]);

// x scale shows vaccine types
// set it as ordinal
chart.xScale("ordinal");

// define the order of values on the scale
chart
  .xScale()
  .values([
    "Bacterial antigen-spore expression vector",
    "DNA based vaccine",
    "Inactivated virus",
    "Live attenuated virus",
    "Protein subunit",
    "RNA based vaccine",
    "Viral vector (Non-replicating)",
    "Viral vector (Non-replicating) + APC",
    "Viral vector (Replicating)",
    "Viral vector (Replicating) + APC",
    "Virus like particle"
  ]); After that, I add a function that will set a series with the given properties, creating a marker series (one marker will stand for one vaccine), beautifying the series name to be shown based on the number of doses, setting the series size, name, id, and finally, returning the series. // set a series with the given properties
function createSeries(seriesId) {
  // create a series
  const series = chart.marker();

  // the name for display is beautified
  const seriesName =
    seriesId +
    (seriesId == "NR" ? "" : seriesId == 1 ? " dose" : " doses");

  // set the size, name, id 
  series.size(2).name(seriesName).id(seriesId);

  return series;
} Next, I create a function that will take care of adding the marker series with the given data. First, I set the number of doses from the data as the series ID. Then, I check if such a series already exists, and if it does not, I create one with the series ID using the function I have configured just before. After that, I add the data into the series and specify the and values so that the type of the vaccine is on the X scale and the clinical trial phase is on the Y scale. Finally, once the function is defined, I loop through the data-set point by point. x y // add a marker series with the given data
function addPoint(item) {
  // the number of doses is a series id
  const seriesId = item["Number of doses"];

  // check if there is a series like we need
  var series = chart.getSeries(seriesId);

  // if there is no such series we create and configure it
  if (series == null) {
    series = createSeries(seriesId);
  }

  // add the data into the series
  series
    .data()
    .getDataSets()[0]
    .append({
      x: item["Vaccine platform description"],
      y: item["Phase"],
      ...item
    });
}

// loop through the dataset
// point by point
data.forEach((vaccine) => addPoint(vaccine)); Since the amount of data I am visualizing in a bullseye chart is large and there will be multiple points in almost every sector of the diagram, I distribute the markers equally to avoid overlap. // spread bullets throughout a sector
chart.spreadValues("valueEqual"); Almost done! The last things I do are add a title and draw the resulting bullseye chart in the container. // set the chart title
chart.title("COVID-19 Vaccine Pipeline");

// set the chart container id
chart.container("container");

// draw the resulting bullseye chart
chart.draw(); That’s it! A stunning interactive JS-based bullseye chart is ready with just a few lines of code! The bullseye chart shows that the vast majority of all COVID-19 vaccines currently in clinical studies belong to the Protein subunit type. Some of them are already in phase 3, and it looks like we can expect a lot of them to become available soon. The interactive version of this (initial) JavaScript bullseye chart is available on and with the full source code. CodePen Playground Customizing a JavaScript Bullseye Chart Now, let me show you how to add some functional and aesthetic changes to make such a JavaScript-based bullseye chart even better-looking and more insightful. 1. Modify the markers I want to tweak the look of the markers first. To reduce the clutter, I make all of them displayed as circles. chart.markerPalette(["circle"]); Then I define a custom color palette. Since all my series are created based on the number of doses, the colors are automatically updated with the defined palette where the color of each marker corresponds to the series type. chart.palette([
  "#dce778",
  "#c8e4fb",
  "#35baf6",
  "#ff8b66",
  "#f55d2c",
  "#e7cbeb"
]); 2. Add a legend I am coloring the markers based on a parameter, so I’d better provide the bullseye chart with a legend indicating what each color represents. I define the legend and specify its position, layout, and alignment. let legend = chart.legend();
legend.enabled(true);
legend.position("right");
legend.itemsLayout("vertical");
legend.align("center"); Additionally, the type and size of the legend items go to the function responsible for setting the series. series.legendItem().iconType("circle").iconSize(8); The newly customized JavaScript bullseye chart with the modified markers and the legend is available on and . CodePen Playground 3. Improve the tooltip There is a lot more information about each vaccine in the data, and I want to show it all in the tool-tip. That will make my bullseye chart even more informative. I make the phase appear in the title of the tool-tip, and using the function, I access the other information associated with each data point and include it. getData chart
  .tooltip()
  .titleFormat("{%y}")
  .format(function () {
    return (
      "Type of Vaccine - " +
      this.getData("Type of candidate vaccine ") +
      "\n Doses - " +
      this.getData("Number of doses") +
      "\n Developers - " +
      this.getData("Developers ") +
      "\n Mode of administration - " +
      this.getData("Route of administration") +
      "\n Schedule - " +
      this.getData("Schedule")
    );
  }); Voila! An enthralling and informative JavaScript bullseye chart is all done! Explore it interactively and play around with its entire code on or . CodePen Playground Conclusion The bullseye chart type is perfect for visualizing such data as clinical studies by phase, and now you see, it can be pretty straightforward to create in JavaScript. Do let me know if you have any questions or suggestions. We wish the world could be free from deadly viruses and other infections. But while we are where we are, let’s get our vaccines and be all healthy for creating some exciting, useful visualizations!

How to Create Bullseye Charts with JS: COVID-19 Vaccine Pipeline

Here I would like to talk about converting large, complex data into an easy visual representation format. For that, I pick the most commonly used charts - line, bar, and pie. Actually, there are plenty of charts, but you can find these three in most of the applications made for data analysis or representation. Next, I will explain how to build them by using the popular library D3.js. I’ve created a small demo application. It is a simple dashboard with those charts. I did not use any framework, just HTML, CSS, and JavaScript. Also, I added 3 separate files with data set for each of the charts. I think it is more than enough to begin drawing the charts. But first, let’s take a look at the HTML structure: D3 charts D3 Dashboard Line chart Bar chart Pie chart <!doctype html> < = > html lang "en" < > head < = /> meta charset "UTF-8" < > title </ > title < = = > link rel "stylesheet" href "styles.css" < = = > link href "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel "stylesheet" < = > script src "https://d3js.org/d3.v7.min.js" </ > script < = = > script type "module" src "charts/bar-chart.js" defer </ > script < = = > script type "module" src "charts/line-chart.js" defer </ > script < = = > script type "module" src "charts/pie-chart.js" defer </ > script </ > head < > body < > header < > span </ > span </ > header < > section < = > div class "bar-line-charts" < = > div class "chart-widget" < = > div class "widget-header" < > span </ > span </ > div < = = > div id "line-chart" class "chart" </ > div </ > div < = > div class "chart-widget" < = > div class "widget-header" < > span </ > span </ > div < = = > div id "bar-chart" class "chart" </ > div </ > div </ > div < = > div class "pie-chart" < = > div class "chart-widget" < = > div class "widget-header" < > span </ > span </ > div < = = = > div id "d3-chart" class "chart" style "padding: 90px" </ > div </ > div </ > div </ > section </ > body </ > html Let’s draw the first chart, it is going to be a pie, then I will continue with the line and bar chart. Pie Chart data element = .getElementById( ); margin = ,
    width = ,
    height = ; radius = .min(width, height) / - margin; svg = d3.select(element)
    .append( )
    .attr( , width)
    .attr( , height)
    .attr( , )
    .append( )
    .attr( , + width / + + height / + ); color = d3.scaleOrdinal()
    .domain(data)
    .range([ , , ]); pie = d3.pie()
    .value( { d[ ].value;
    }); data_ready = pie( .entries(data)); arcGenerator = d3.arc()
    .innerRadius( )
    .outerRadius(radius); svg.selectAll( )
    .data(data_ready)
    .enter()
    .append( )
    .attr( , arcGenerator)
    .attr( , { (color(d.data[ ].name))
    }); svg.selectAll( )
    .data(data_ready)
    .enter()
    .append( )
    .text( { d.data[ ].name
    })
    .attr( , { + arcGenerator.centroid(d) + ;
    })
    .style( , )
    .style( , ); import from '../data/pie-data.js' // Selecting the element const document 'd3-chart' // Setting dimensions const 10 400 400 // Setting the radius of the pie const Math 2 const "svg" "width" "height" "style" "margin-top: -32px !important" "g" "transform" "translate(" 2 "," 2 ")" // Setting the color scale const "#43ab92" "#f75f00" "#512c62" // Setting the position of each group on the pie const ( ) function d return 1 const Object // Building arcs const 0 // Building the pie chart 'slices' 'path' 'd' 'fill' ( ) function d return 1 // Adding titles to pie slices 'slices' 'text' ( ) function d return 1 "transform" ( ) function d return "translate(" ")" "text-anchor" "middle" "font-size" 20 Line Chart lineData element = .getElementById( ); margin = { : , : , : , : },
    width = - margin.left - margin.right,
    height = - margin.top - margin.bottom; createGradient = { gradient = select
        .select( )
        .append( )
        .attr( , )
        .attr( , )
        .attr( , )
        .attr( , )
        .attr( , );

    gradient.append( )
        .attr( , )
        .attr( , );

    gradient.append( )
        .attr( , )
        .attr( , );
} createGlowFilter = { filter = select
        .select( )
        .append( )
        .attr( , )

    filter.append( )
        .attr( , )
        .attr( , ); femerge = filter
        .append( );

    femerge.append( )
        .attr( , );

    femerge.append( )
        .attr( , );
} parseTime = d3.timeParse( ); parsedData = lineData.map( (
    { : item.values.map( ({ : val.total, : parseTime(val.date)
        }))
    })); svg = d3.select(element)
    .append( )
    .attr( , width + margin.left + margin.right)
    .attr( , + margin.top + margin.bottom)
    .attr( , )
    .append( )
    .attr( , ); xScale = d3.scaleTime()
    .domain([
        d3.min(parsedData, (d) => d3.min(d.values, (v) => v.date)),
        d3.max(parsedData, (d) => d3.max(d.values, (v) => v.date))
    ])
    .range([ , width]); yScale = d3.scaleLinear()
    .domain([
        d3.min(parsedData, (d) => d3.min(d.values, (v) => v.total)),
        d3.max(parsedData, (d) => d3.max(d.values, (v) => v.total))
    ])
    .range([height, ]); svg.append( );
svg.call(createGradient);
svg.call(createGlowFilter); line = d3.line()
    .x( { xScale(d.date);
    })
    .y( { yScale(d.total);
    })
    .curve(d3.curveCatmullRom.alpha( )); svg.selectAll( )
    .data(parsedData)
    .enter()
    .append( )
    .attr( , { lineValues = line(d.values).slice( ); splitedValues = lineValues.split( ); })
    .style( , ); svg.selectAll( )
    .data(parsedData)
    .enter()
    .append( )
    .attr( , { line(d.values)
    })
    .attr( , )
    .style( , )
    .style( , )
    .attr( , ); svg.append( )
    .attr( , + height + )
    .call(d3.axisBottom(xScale)); svg.append( )
    .call(d3.axisLeft(yScale)); import from '../data/line-data.js' // Selecting the element const document 'line-chart' // Setting dimensions const top 40 right 30 bottom 7 left 50 900 300 // Adding helper functions to make the line look nice // The <defs> element is used to store graphical objects that will be used at a later time. const ( ) function select const 'defs' 'linearGradient' 'id' 'gradient' 'x1' '0%' 'y1' '100%' 'x2' '0%' 'y2' '0%' 'stop' 'offset' '0%' 'style' 'stop-color:#da6e2a;stop-opacity:0.05' 'stop' 'offset' '100%' 'style' 'stop-color:#da6e2a;stop-opacity:.5' const ( ) function select const 'defs' 'filter' 'id' 'glow' 'feGaussianBlur' 'stdDeviation' '4' 'result' 'coloredBlur' const 'feMerge' 'feMergeNode' 'in' 'coloredBlur' 'feMergeNode' 'in' 'SourceGraphic' // Parsing timestamps const '%Y/%m/%d' const => item values ( ) => val total date // Appending svg to a selected element const 'svg' 'width' 'height' 300 "viewBox" `0 40 ` ${width + } 80 ${height} 'g' 'transform' `translate( , )` ${margin.left} ${margin.top} // Setting X,Y scale ranges const 0 const 0 // Appending <defs> 'defs' // Drawing line with inner gradient // Adding functionality to make line curved const ( ) function d return ( ) function d return 0.5 // Drawing inner part of a line '.line' 'path' 'd' ( ) function d const 1 const ',' return `M0, , ,l0, ` ${height} ${lineValues} ${height - splitedValues[splitedValues.length - ]} 1 'fill' 'url(#gradient)' // Drawing a line '.line' 'path' 'd' ( ) function d return 'stroke-width' '2' 'fill' 'none' 'filter' 'url(#glow)' 'stroke' '#ff6f3c' // Adding the x Axis "g" "transform" "translate(0," ")" // Adding the y Axis "g" Bar Chart barData element = .getElementById( ); margin = { : , : , : , : },
    width = - margin.left - margin.right,
    height = - margin.top - margin.bottom; xScale = d3.scaleBand()
    .range([ , width])
    .padding( ); yScale = d3.scaleLinear()
    .range([height, ]); svg = d3.select(element).append( )
    .attr( , width + margin.left + margin.right)
    .attr( , height + margin.top + margin.bottom)
    .attr( , )
    .append( )
    .attr( , + margin.left + + margin.top + ); barData.forEach( {
    d.value = +d.value;
}); xScale.domain(barData.map( { d.name;
}));
yScale.domain([ , d3.max(barData, { d.value;
})]); svg.selectAll( )
    .data(barData)
    .enter().append( )
    .attr( , { xScale(d.name);
    })
    .attr( , xScale.bandwidth())
    .attr( , { yScale(d.value);
    })
    .attr( , { height - yScale(d.value);
    })
    .style( , ); svg.append( )
    .attr( , + height + )
    .call(d3.axisBottom(xScale)); svg.append( )
    .call(d3.axisLeft(yScale)); import from '../data/bar-data.js' // Selecting the element const document 'bar-chart' // Setting dimensions const top 40 right 20 bottom 50 left 50 900 480 // Setting X,Y scale ranges const 0 0.1 const 0 // Appending svg to a selected element const "svg" "width" "height" "viewBox" `0 40 ` ${width + } 80 ${height} "g" "transform" "translate(" "," ")" // Formatting the data ( ) function d // Scaling the range of the data in the domains ( ) function d return 0 ( ) function d return // Appending the rectangles for the bar chart ".bar" "rect" "x" ( ) function d return "width" "y" ( ) function d return "height" ( ) function d return "fill" "#ff6f3c" // Adding the x Axis "g" "transform" "translate(0," ")" // Adding the y Axis "g" Wrapping up As you can see, all these charts do not have difficult logic. It takes around 70 lines of code to implement it. That is how we can make complex data to be converted in easy visual representation format. Try it yourself! The source code can be found on . I recommend inspecting charts in the DOM to understand how D3 renders the elements. GitHub

Data Visualization for Dummies: 3 Simple Charts with <70 Lines of Code

Since we launched our enterprise Platform9 Managed Kubernetes (PMK) three years ago, we learned a lot about real-world Kubernetes deployments. Large enterprise customers like Juniper have battle-tested our enterprise PMK product at scale running on hundreds of bare metal nodes across data centers. Many customers have benefited from our SaaS management capabilities, including automated deployments, upgrades, security patching, and SLA management. In the last 12 months, we had several successful Kubernetes deployments around the world, highlighting enterprise momentum in Kubernetes and validating our industry-leading SaaS Management model. Operating Kubernetes at scale is extremely challenging However, we also found that a vast majority of companies are struggling with the complexity of operating Kubernetes in production. Kubernetes is complex and notoriously difficult to manage, particularly in on-premises or multi-cloud environments. Day 2 Operations are incredibly challenging: how do you handle upgrades to your clusters when there’s a new version or a security patch? How do you do the monitoring? HA? Scaling? Compliance? And more. The operational pain is compounded by the industry-wide talent scarcity and skills gap. Most companies are struggling to hire the much sought-after Kubernetes experts, and they lack advanced Kubernetes experience to ensure smooth operations at scale. Delivering production-grade Kubernetes in a way that doesn’t make your existing staff run for the hills (or get left holding the bag..) is tough. Many companies are still learning the ropes with Kubernetes Furthermore, not everybody is ready to go into production right away. For many companies, Kubernetes is still new, and they are kicking tires to figure out why, if, and when they want to use it. Companies want the room to start small, learn, test, and then scale to production on their terms. Therefore, we decided to make our enterprise Kubernetes product more accessible across the board no matter where the customer is on their Kubernetes journey. We wanted DevOps teams and developers everywhere to enjoy the freedom of using Kubernetes at their own pace and in any environment of their choice so they can innovate for the business without having to deal with the day-to-day complexities of running Kubernetes in production. Announcing new “Freedom” and “Growth” PMK plans We are excited to announce today the launch of two new PMK plans (“Freedom’ and ‘Growth’) that allow DevOps, ITOps, Platform Engineering, and cloud architects to: Sign up online and instantly create upstream open-source Kubernetes clusters in under 5 minutes Deploy clusters in any environment ranging from developer laptops, on-premises VM’s or bare metal servers to edge infrastructure or public clouds Eliminate the constraints of Kubernetes skills, long implementation times, or management of day-2 operational activities such as upgrades, security patching, or monitoring, etc. Gain the flexibility to start small, learn, test, and scale to production on their terms and pace. Sign-up now to deploy your free cluster: https://www.platform9.com/signup is great for anyone getting started with Kubernetes and allows users to instantly install Kubernetes clusters of up to 20 nodes (800 vCPU’s). The Freedom plan starts , including an option for month-to-month payments, and provides 99.9% SLA and 24×7 support for up to 50 nodes (2000 vCPU’s). The Growth plan under $500/month For more details on these pricing options, check out https://www.platform9.com/pricing An extensive set of core features and support options unmatched anywhere Before we dive into the details, first an important distinction: Those of us who want to leverage Kubernetes in the enterprise know that words like “managed” and “service” (or “as-a-service”) are often thrown around with enterprise Kubernetes solutions. But they describe VERY different levels – and philosophies – of “management,” and of “service.” What we mean is a Kubernetes service, where Platform9 does all of the heavy lifting and ongoing operations. So . Don’t mistake ‘managed service’ to mean a lot of people on keyboards manually managing your environment. Platform9 delivers a public-cloud like service in on-premises, edge, and multi-cloud environments. This service is provided using a SaaS delivery model, developed with thousands of person-years of software automation engineering work. Moreover, the service is backed by our additional layer of Kubernetes certified experts and customer success teams who also monitor and remediate the environment. fully-managed you don’t have to deal with any of the operational complexity Both the Freedom and Growth plans use the same battle-tested and proven enterprise edition of Platform9 Managed Kubernetes (PMK) and provide the following set of core capabilities: A SaaS Management Plane that remotely monitors, optimizes and heals your clusters and underlying infrastructure, across all of your environments Self-service, instant cluster creation (under 5 minutes) with native integrations across private and public clouds 1-click, in-place cluster upgrades to the latest version of Kubernetes Automatic security patches – when a new CVE is discovered and fixed, a patch is automatically applied to all clusters Built-in monitoring and alerts to ensure cluster health, including etcd cluster quorum lost, etcd node down, etcd repair failure, infrastructure resource utilization, node storage issues, network connectivity between nodes, docker daemon down, and more Managed Observability (Prometheus and more) is included by default. Users can configure these tools for their specific needs for each cluster (connect to a different persistent storage or data visualization tool, etc. Grafana dashboard is integrated by default.) Centrally manage all clusters from a single pane of glassControl access to resources with fine-grained Kubernetes RBAC management And much, much more. For a more detailed list of capabilities and comparison of these plans, Check out: https://www.platform9.com/pricing/comparison We believe these plans will make Kubernetes a no-brainer for DevOps, ITOps, and cloud platform teams in any company no matter how large or small, no matter where they are in their Kubernetes journey- providing everyone with a superior experience of the Kubernetes services on their infrastructure (on-prem, or in the cloud or at the edge) Making it easier to migrate your apps into Kubernetes: Partnership with HyScale Getting stable Kubernetes clusters deployed and operational is something that most DevOps and ITOps struggle with, but what about containerization your existing complex apps? This migration can be a long and complicated endeavor in and of itself, which can further be hampered by all the new Kubernetes concepts that developers need to learn. How can we simplify this process? Enter . HyScale HyScale is an application delivery platform that abstracts the complexities of containers and Kubernetes so that your application teams can quickly deliver containers and IT teams get to drive-up Kubernetes adoption. We have partnered with HyScale to help our customers accelerate Kubernetes adoption and get developers excited about containerization and moving their apps to Kubernetes. , including step-by-step instructions on how you can get your apps migrated over to PMK. Read this blog for more details on this partnership Managing your container images in a private registry, for FREE: Partnership with JFrog If you have used or heard of Artifactory, then you know . JFrog has recently introduced the , which is the most comprehensive and advanced container registry in the market today, and it is available for free. JFrog JFrog Container Registry The need for a private registry to store and manage this software is vital whether you are producing containerized software or merely running it. A private registry can protect you from upstream changes, network failures, and generally from third-party sources you have no control over. If you are producing images, you need a private registry to version your software, track its dependencies, and allow for reproducible builds. This is where JFrog’s Container Registry (JCR) comes in. Read the for more details blog So what are you waiting for? Give our “Freedom” plan a spin. It’s free forever, no credit card required. Really! Here’s the link again: https://www.platform9.com/signup/ You can get going with a single node Kubernetes on your laptop. Here are the step-by-step tutorials for deploying on your laptop: Deploy on Apple macOS with VirtualBox Deploy on Windows OS with Virtual Box Once you have deployed your cluster, here are more tutorials for you get started with container applications: Setup your NGINX Ingress Controller Get your first container up and running Deploy a complex microservices app Not ready to sign up yet? Want to learn more about what you are getting for signing up? No worries. Check out this demo video from our co-founder, VP of product, and the brainchild behind these new PMK plans, Madhura Maskasky: Announcing new Platform9 Managed Kubernetes (PMK) plans that start at zero cost and scale as customers grow

Start at Zero Cost and Scale as Customers Grow: An Overview of Platform9 Managed Kubernetes Plans

How to Win a Kaggle Competition: Box Office Prediction Competition

Enterprises around the world are to the containers and Kubernetes trend. There are numerous benefits of delivering an application as container packages to Kubernetes but at the same time, the process of app containerization and the subsequent app deployment to Kubernetes can hit many roadblocks. Since the idea of using Kubernetes and containers for app delivery is fairly recent, the transition from traditional delivery systems to these modern delivery systems is a bumpy ride. waking up To modernize, breaking down large applications into smaller microservices is just a start. The main challenge is in continuously delivering these microservices as containers to Kubernetes. Most enterprise teams sink in a lot of time and effort into this and end up with a delayed delivery process. So, what exactly are these glitches that are causing this delay? Causes of delay in app delivery → In Containerization With the container technology being a newbie in the , not many teams have been able to find a way to simplify the complexity that it brings. The containerization process starts with creating a Docker file. This Docker file is supposed to be read by Docker and get a bunch of instructions about how the Docker image should get built. This is followed by creating a build command that uses the docker file to generate a Docker image. When this Docker image runs, you get a docker container. This process is a bit complicated as well as time-consuming if one has to repeat the same for a large number of containers. For a small-scale application with just a couple of services, containerization is easy. But, for a bulky enterprise application which may have hundreds of microservices, creating and maintaining containers can become very daunting. enterprise software stack Add container orchestration to the process, and you see one more level of complexity that involves setting up the orchestrator and deploying to Kubernetes. → In Delivery to Kubernetes Almost all user-facing components in Kubernetes are designed in YAML files. So, for any enterprise application with a lot of interlinked services, there are potentially multiple YAML files and that requires one to be well-accustomed to white-space syntax failing which, the outcome can be frustratingly error prone with no feedback of when and where things go wrong. If one has that part all worked out, there are several in Kubernetes applications to be handled. Some of those may need upgrading, and depending on the type of app you are working on, knowing what to update can further complicate deployment to Kubernetes. Doing this for a one-time delivery is still feasible but managing the delivery of a large number of containers to Kubernetes and updating them from time to time is an entirely different scenario. With more iterations, the app delivery tends to become error prone. There are also tasks like keeping track of the diff history and managing rollbacks of new and old deployments, adding more layers of complications to the pile. Manually deploying containers at scale different resource types Of course, there are some automation tools to reduce the work required in deploying an application to Kubernetes. There are many options that offer running Kubernetes as a managed or a hosted platform. That again has several complexities. Firstly, getting your updates or new features rolled out to your running cluster is not as simple as it seems to be. As there is no universally agreed way to do this, choosing one out of several methods ensuring that it is the suitable one for the team on hand is difficult. If you consider involving a deployment automation tool in the process to speed it up, the team is faced with several choices to make. As there is an abundance of tools to automate deployment, the wide array of options makes enterprises stay stuck in analysis paralysis and eventually, causing a delay in achieving a standardized way to deliver apps to Kubernetes. This negates the purpose of using a deployment automation tool in the first place. Even after the automation tool is set in place, there is still a major issue of figuring out some parameters of the CD pipeline to get the tool up and running like version control system, CI system, Docker registry, and Kubernetes cluster. Once these components are in place, an enterprise is ready with a continuous delivery pipeline for Kubernetes. Too many Alternatives to enable deployment Containers bring a lot of complexity to the table for the IT operations team as well as developers. As the technology is comparatively new, there is often a lack of adequate understanding of Kubernetes as well as Docker containers. In order to ensure a smooth app delivery process, the has to be efficient. If not, there is bound to be a constant struggle to streamline the process. When developers are required to get involved in the container management and delivery process, they take time to get accustomed to container delivery. If that time is utilized in the coding of the application services instead, it is more productive. Sangeetha Narayanan, the Director of Engineering at Netflix says, “Any time spent fighting the system or tools is time not spent delivering value to the business.” while talking about for a smooth app deployment process. This is applicable to most enterprise app development teams while they try their hand at app delivery to Kubernetes in the process of embracing modernization. The need for context switching for developers while enabling smooth delivery DevOps team improving the developer experience As microservices work well with containers, it is assumed that the same is the case with Kubernetes. Many enterprises keep delaying the app deployment to Kubernetes because their application is still a legacy one, and miss out on reaping the benefits that Kubernetes has to offer like portability, IT cost savings, and scalability. Though microservices based applications are ideal for Kubernetes in most cases, it is not true for all apps. Wrapping a monolith in a container and deploying it through Kubernetes can work wonders too. For those monoliths which cannot be refactored into microservices because of the costs outweighing the benefits, this approach can jumpstart app modernization efforts and at the same time, speed up the application deployment. Microservices architecture considered to be a hard prerequisite to using Kubernetes What is the Solution? The supersede the shortcomings that your team faces, leaving you with no alternative other than figuring out a way to overcome these shortcomings. The key is to automate your complete CI/CD pipeline. But, by just saying that you need an automated CI/CD pipeline, does not make all your app delivery delays vanish. For a smoother and faster delivery to Kubernetes, you need an approach that can streamline the process, keeping in mind these specific considerations. advantages of deploying an enterprise app to Kubernetes Solution Considerations: Automation of the containerization process is the first step towards a smooth app delivery. The need to manually create Docker images for every single app service should be eliminated. Automation: In order to reduce delays caused while trying to accommodate each custom process and tool, there needs to be one process standardized across teams for delivering applications to Kubernetes. Standardization of process: All the delays caused due to the DevOps friction can be eliminated if service-centric delivery is enabled by letting developers handle the DevOps configuration all by themselves. Self-service delivery experience for developers: Having all these considerations fulfilled will offer the level of automation in app delivery that most enterprises hope to achieve. An enterprise can either have a very efficient DevOps team to enable this level of automation or seek the help of an app delivery platform that is purpose-built to offer these for a smooth delivery process to Kubernetes. There are several app delivery platforms designed just for the purpose. Platforms like HyScale, Codefresh, and OpenShift are some of the options worth exploring. features Depending on the landscape of the enterprise application and the capabilities of the team, you need to act fast and make a decision of how you want to smoothly deliver containerized applications to Kubernetes.

Delays in app delivery to Kubernetes

Predicting the price of houses in Brooklyn using Python

Early in my career at Apple, I learned a great deal about building products. I gained exposure to the world-class manufacturing processes that enabled Apple to ship its hardware products on time and at quality, and later transform itself into the most valuable company in the world. My experience at Apple also taught me how the principles behind manufacturing optimization could be applied to software engineering and architecture design. Software development continues to trend toward reusable and interoperable components rather than bespoke engineering for everything. Like optimizing processes in manufacturing, choosing the right frameworks and libraries is the key to fast, efficient development. If you’re building an application with data visualizations, an early decision you have to make is whether to use D3 or a React chart library. If you’re not familiar with D3, it is a Javascript library that provides the necessary building blocks to build data visualizations by manipulating SVG and HTML. It has become the backbone of the most popular reusable data visualization libraries — such as ChartJS, eCharts, C3, NVD3, and Plotly — which make it easier to generate D3-based charts while writing less code. Most of these libraries have a wrapper library for usage in popular frameworks, such as Ember, React, Vue, or Angular. If you want to minimize writing custom code and time, I recommend using a React chart library instead of creating your own charts in D3. But after you decide to use an existing library, the decision to invest time and energy into a new chart library can be overwhelming. Where do you start? React is a relatively new ecosystem and there are perhaps fewer chart library options than there are for Javascript, which might make you feel a bit limited. As a starting point, I would suggest that you look at these React-specific libraries: Recharts Victory React-Vis Nivo VX There are also some great wrappers out there, such as and . But before you weigh the pros and cons of each library, I’ll outline below what I think are the most important criteria for your decision. react-chartjs-2 React Highcharts Top criteria for choosing a library Your first step should be to . It sounds obvious, but knowing what you are looking for is the most important criteria in your decision. clearly define your use cases What chart types does your application require? Depending on the type of application you’re building, you might require simple instead of complex charts. Often, line/area, grouped/stacked bar, and pie/donut charts suffice for most applications. What kind of customization, formatting, and interactivity do you require in your design? Do you need to be able to customize tick marks? What about showing or hiding grids and axes? Will you need to custom tooltips, legends, and margins? Will you need to format and style your charts significantly? These are all important questions you should also ask. After you have concretely defined your requirements, here are the top four questions you should consider: Is the project with examples? well-documented How is the project? active Is the project or ? free commercially-licensed How are chart components, like tooltips and legends? easily customizable Documentation and examples A good chart library should have a dedicated documentation site that is both interactive and includes many examples. Raphaël Benitte did an amazing job building the documentation site for . It allows you to customize attributes and see a live simulation of each chart with randomized data directly in the documentation site UI, which makes prototyping and iterating on design 10x faster. Nivo and React-Vis both use for UI demonstrations of their various examples, which can dramatically shortcut the time to build a chart. Nivo Storybook The documentation site allows you to easily customize attributes from the UI. Nivo Project activity Before you invest too much time, you should check to make sure the library is being actively maintained. Most chart libraries have 1 or 2 active maintainers. You should check how recently and how often the project is being updated. The date of the last commit in GitHub can be a good indicator. Charting libraries built specifically for React are generally updated more frequently than their Javascript counterparts. Chart libraries ranked by the number of days since their last commit during a snapshot in January. Free vs. commercial While there are many great free libraries out there, some would argue that a paid license might be worth the time you save, especially if you’re building a commercial product. Three popular paid charting libraries with a React wrapper are HighCharts (there are several flavors, but is the official wrapper), , and . A license for Highcharts, which is known for its breadth and flexibility, starts at $1,510 for a single developer for the Highcharts Suite. this ZingChart FusionCharts Customizability It’s important that you spend enough time researching the full capabilities of the library. Specifically, be sure to check out the documentation for tooltips, legends, axes, and titles. Readability of the codebase can be important here in case you need to go to GitHub and find the code you’re trying to customize. As I mentioned before, you should pay close attention to the types of charts supported, especially if you need to go beyond line, bar, pie, scatter, and other standard charts. Need a line and bar chart together? Recharts has a . Need a grouped and stacked bar chart? Recharts has a as well. If you are looking to have a visually consistent application and make your code reusable, you will want to choose a chart library that supports all the types of charts you need. composed line and bar chart mixed bar chart is good for charts composed of multiple chart types. Recharts One constraint you might encounter is the number and variety of charts. In my opinion, chord, sankeys, and other complex charts can be confusing and are generally not needed for most applications. If you’re looking for a library that is closer to the metal, I’d recommend VX. Shapes are the core element behind VX (the is ). If you observe the constructs of the code in the package, Harrison Hoff also uses base D3 components like and . main package import @vx/shape xScale yScale Other criteria to consider There are a number of other important criteria to compare when choosing a library. In terms of popularity, you should also check out each library’s stars, forks, and contributors on GitHub. Of the React-specific libraries, Recharts had the most stars (10.7K) as of late January, followed by Victory (6.7K), VX (5.6K), React-Vis (4.9K), and Nivo (4.8K). GitHub stars for popular chart libraries Another good proxy for popularity is package downloads on NPM. Chart generated using NPM Charts I also like to see how quickly pull requests are opened and merged, which is a good indicator of the velocity of new feature requests. Commit frequency in GitHub Insights is a good proxy for activity, though you may find very helpful and responsive maintainers with less frequent updates. is an actively maintained repo with weekly commits VX One benefit of choosing a paid product is that you will have access to support. If you choose a free, open-source library, you’ll have to rely on other people who are willing to help and share examples. While you will generally find more help from a larger community on Stack Overflow, I also consider whether or not the library has an active community forum. Nivo, for instance, has an active Discourse community and Victory has one on Gitter. If you’re working in React, being able to theme your chart library is another big win. Whereas Chartist, for instance, uses a highly customizable Sass file, Nivo let’s you create your own theme constant across all of your charts, like in this example below. using Nivo theming Example You should also investigate whether or not your library supports server-side rendering. Some libraries assume that your code will only be executed in a client-side environment. If you want to produce charts outside of your application’s user interface — such as in an email client or in a blog embed — you need to be able to render your charts server-side. Some libraries support rendering your charts in SVG, HTML, and Canvas which can give you greater flexibility and control over where you display your charts. Don’t forget about browser and device compatibility. If you’re building a desktop app with plans to build a mobile app using React Native, currently is the only library that makes components for React Native. Also, if your app is responsive, then some chart libraries might work better than others. Nivo comes with out-of-the-box responsive components whereas React-Vis, for instance, might require a custom wrapper with breakpoints. Victory One last criteria I like to consider is code splitting, which makes your imports more manageable and maintainable. Some chart libraries (such as VX and Nivo) are bundled into multiple smaller packages that allow you to load individual charts components instead of the entire library, which can result in better performance. If all you need is a line chart, it would be a shame to import an entire library. For instance, Nivo lets you use instead of importing the entire package. import { line } from @nivo/line Choosing Nivo In the project I’m working on ( ), we started with because the documentation was clear and simple. However, we ultimately decided to switch to Nivo because it met all of our use cases and had a thorough documentation site. Code Time React-Chartist The most frustrating part of experimenting with a new library is making an attribute change and being unable to detect if the change is working or not. Nivo allows you to tweak attributes in the UI and quickly see the effect, which helps speed up my development. There are some things that could still be improved, like being able to see your own data in the UI and creating variables for formats, but these are minor details that I am looking forward to seeing improved in the future as the library grows.

Choosing a data visualization library for React

This is part 11 of an N part series detailing how I make . my animations Prev Next So you’ve made a but how do you show it off? data visualisation To do that we need to output the to some sort of video file and then find some site willing to host it. animation I found Processing’s default video creation somewhat underwhelming so I used a slightly more tricky but far superior technique. You will need to download two things, a video creation tool called and a library that plugs into which uses that called . ffmpeg Processing Video Export First download from f . I use windows so merely unzip it somewhere (I have a folder called for such things where I unzipped it and renamed the folder to . Put into the user path — I use for this — and you’re good to go). ffmpeg fmpeg.org c:\tools\ ffmpeg c:\tools\ffmpeg\bin eveditor.com Now install by running and open the by going to the menu. Select the tab and search for . Click install and you’re done. There’s more info on . Video Export Processing Contribution Manager Tools/Add Tool... Libraries Video Export funprogramming.org To use you first need to import it into your sketch so add these lines to the top of the file: Video Export import com.hamoid.*;VideoExport videoExport; is the github user id of the developer (check out his ) so I guess he named all the libraries with that as a prefix. The second line defines a variable called of the type . Looks confusing until you get used to it. hamoid github account videoExport VideoExport Next thing we need to do is tell about our sketch so in add the following: Video Export setup() videoExport = new VideoExport(this);videoExport.setFrameRate(30);videoExport.startMovie(); creates an instance of the type providing the current sketch denoted by so that it can access the frames. new VideoExport(this); VideoExport this We are now ready to save individual frames to the video so at the end of add: draw() videoExport.saveFrame(); It is important to execute when the animation finishes as the video file may get corrupted, if the video doesn’t play then check that this command is executed. videoExport.endMovie() This creates a video file called in your sketch folder which you can play in your favorite video player. processing-movie.mp4 On your first run of a sketch using a window will show asking for where you installed Video Export ffmpeg. Check the end of the post to see the full source code of the Keeling animation including the commands. Video Export So now how do you create a gif? By using of course! ffmpeg You can simply open a dos prompt¹ or terminal and execute: ffmpeg -i processing-movie.mp4 processing-movie.gif This will work most of the time but if you create a video with more than 256 colours you’ll find the quality drops considerably in which case things get a tad more tricky. In this case you need to execute two commands. First is to find out all the colours used in your video and then create the gif using that palette by using these two commands: ffmpeg ffmpeg -i processing-movie.mp4 -vf "palettegen" -y palette.pngffmpeg -i processing-movie.mp4 -i palette.png -lavfi "fps=50,paletteuse" -y out.gif For the full gory details read . I turned the above into a batch script file called : pkh’s blog makegif.bat ffmpeg -i %1 -vf "palettegen" -y palette.pngffmpeg -i %1 -i palette.png -lavfi "fps=50,paletteuse" -y out.gif Simply executed by and it creates a gif called . makegif processing-movie.mp4 out.gif Now we have an and a file! What do we do with it? We need to host it somewhere so it can be shared. So here are your options: mp4 gif : Simply attach your file to a tweet. If it’s longer than a certain amount a trimming dialog appears but if you move the start and stop indicators to the beginning and end of the video twitter will happily host it. Twitter mp4 : Upload and go, can add music from YouTube’s free music library, which is nice. YouTube Simply attach your to a post. FaceBook: mp4 (Pronounced “imager” apparently) is a perfect place to host gifs so you can then post to sites like ², add the link to emails or perhaps write stories on some site called medium.com. I find that sharing with the imgur community is highly worthwhile too. When hosting there you can either link to the gif directly or to a faster loading simply by adding a to the end of the URL. imgur.com : reddit.com gifv v Here’s the complete source code of the Keeling animation using : Video Export import com.hamoid.*;VideoExport videoExport; import java.time.*;import de.looksgood.ani.*;Ani _ani; FloatDict _data = new FloatDict();LocalDate _startDate = LocalDate.of(1958, 3, 29); void setup(){loadData();size(500,500);background(0);stroke(255,255,0);textAlign(CENTER); Ani.init(this);Ani.setDefaultTimeMode(Ani.FRAMES);_ani = new Ani(this, 530, "_change", 6, Ani.EXPO_IN); videoExport = new VideoExport(this);videoExport.setFrameRate(30);videoExport.startMovie();} float yScale = 20.0; boolean _coda = false;int _codaCount = 0; float _change = 1.0;final int MARGIN = 60;final float CO2MIN = 313.04; void draw(){if(_change >= 6.0){if(!_coda){_coda = true;_codaCount = frameCount;}if(frameCount - _codaCount > 120){videoExport.endMovie();exit();}videoExport.saveFrame();return;} background(0);strokeWeight(1); line(MARGIN, 0, MARGIN, height);line(0, height - MARGIN, width, height - MARGIN); drawGraph(MARGIN, height - MARGIN, width - MARGIN, height - MARGIN);videoExport.saveFrame();} void drawGraph(int xPos, int yPos, int graphWidth, int graphHeight){text("Atmospheric CO₂ concentration 1958 - 2017\nR. F. Keeling, S. J. Walker, S. C. Piper and A. F. Bollenbacher\nMauna Loa, Observatory, Hawaii", MARGIN + graphWidth / 2.0, MARGIN);int deltaX = int(frameCount * _change); float xScale = 1.0; int xAxisMaximum = graphWidth; if(deltaX > graphWidth){xAxisMaximum = deltaX;xScale = float(graphWidth) / float(deltaX);} text("Year", MARGIN + graphWidth / 2, height - 20);drawXAxis(xAxisMaximum, xScale); strokeWeight(3); float co2Max = 0.0; for(int dataIndex = 1; dataIndex <= deltaX; dataIndex++){ int daysFromStart = (dataIndex - 1) \* 7;  
LocalDate frameDate = \_startDate.plusDays(daysFromStart);  
     
  
if(\_data.hasKey(frameDate.toString()))  
{  
  float co2 = \_data.get(frameDate.toString());  
    
  if(co2 > co2Max) co2Max = co2;  
          
  float x = dataIndex;  
  float y = (co2 - CO2MIN);  
    
  if(y \* yScale > graphHeight)   
  {  
    yScale = float(graphHeight)/y;  
  }  
    
  point(xPos + x \* xScale, yPos - (y \* yScale));  
} } if((co2Max - CO2MIN) * yScale < graphHeight)co2Max = graphHeight / yScale + CO2MIN; pushMatrix();translate(0, graphWidth / 2);rotate(-PI / 2.0);text("CO₂ concentration (PPM)", 0, 20);popMatrix(); drawYAxis(co2Max, yScale);} void drawYAxis(float co2Max, float yScale){float co2Tick = 320.0;strokeWeight(1); while(co2Tick <= co2Max){float yAxisTickPos = height - MARGIN - (co2Tick - CO2MIN) * yScale; line(MARGIN, yAxisTickPos, MARGIN - 5.0, yAxisTickPos);  
text(int(co2Tick), MARGIN - 15, yAxisTickPos+3);  
  
co2Tick += 10.0; }} void drawXAxis(int xAxisMaximum, float xScale){int yPos = height - MARGIN;float xAxisTick = 279.0 / 7.0;int axisYear = 1959; while(xAxisTick <= xAxisMaximum){int tickLength = 5;int xPos = MARGIN + int(xAxisTick * xScale); if(axisYear % 5 == 0)  
{  
  text(axisYear, xPos, yPos + 22);  
  tickLength = 10;  
}  
      
line(xPos, yPos, xPos, yPos + tickLength);  
  
xAxisTick += 365.25 / 7.0;  
axisYear++; }} void loadData(){String[] lines = loadStrings("weekly_in_situ_co2_mlo.csv"); for (String line : lines){if( line.startsWith("\"") ) continue; String\[\] values = split(line, ',');  
String date = values\[0\];  
float co2 = parseFloat(values\[1\]);  
\_data.set(date, co2); }} To thank you for getting this far here’s a dog wanting more peanut butter ( ): source Yes, this is blatant click-bait. ¹ Tip for windows users is to open Windows Explorer to the location you want, press and replace the contents of the text box with and press enter. This opens a dos prompt for this directory. F4 cmd ² Best places on reddit.com are , , and . r/dataisbeautiful r/visualization r/climate

Stories, News & Mentions about CYSCALE

Cyscale’s Stories on HackerNoon