At Cyscale, we believe that a safer Cloud means a safer World

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

Putting it out there

This is part 10 of an N part series detailing how I make . my animations Prev Next Last week I managed to show you how to render the x-axis which took a bit more effort than I was expecting so hopefully the y-axis won’t be so challenging especially seeing as it is a simple scalar value. The y-axis is the concentration of in PPM (parts per million) with a range of about 310–400 PPM. CO2 measured As an aside; to comprehend those figures here’s an image of what 400 PPM looks like: First thing I’ve noticed about working out the y-axis is that unlike the x-axis where we know the maximum x value ahead of rendering as it’s simply a time variable we don’t know the maximum y value until it’s been extracted from the data and scaled. Not a problem, we simply draw the y-axis after the values have been plotted. First of all we need a variable to record the maximum CO2 value: float co2Max = 0.0; Pop that just before the loop in . for drawGraph() Just after where the CO2 value is extracted in the loop add: for if(co2 > co2Max) co2Max = co2; After the loop add: for drawYAxis(co2Max, yScale); That’ll get red squigglies underneath it as we haven’t created yet. So let’s do that just after : drawYAxis() drawGraph() void drawYAxis(float co2Max, float yScale){ } I think a tick mark starting at 320PPM showing every 10PPM should suffice so let’s set the start value: float co2Tick = 320.0; Now while is less than we want to draw a line for the tick mark and label it with the value, then increase it by 10: co2Tick co2Max while(co2Tick <= co2Max){float yAxisTickPos = height - MARGIN - (co2Tick - 313.04) * yScale; line(MARGIN, yAxisTickPos, MARGIN - 5.0, yAxisTickPos);text(int(co2Tick), MARGIN - 15, yAxisTickPos+3); co2Tick += 10.0;} Remember as the y axis is flipped for computers we need to subtract values from the . Hmm, is the minimum CO2 level from the data, perhaps should make that obvious by creating a global constant: height 313.04 final float CO2MIN = 313.04; That’s better: float yAxisTickPos = height - MARGIN - (co2Tick - CO2MIN) * yScale; The line is a shorthand way of incrementing a variable by 10. Equivalent to . co2Tick += 10.0 co2Tick = co2Tick + 10.0 Let’s give that a whirl: That’s pretty good, but, it looks like we need to set the initial max CO2 so we get some tick marks to start with. The initial max CO2 will have to be the CO2 value that would be at the top of the graph. Pop this code just before we call : drawYAxis() if((co2Max - CO2MIN) * yScale < graphHeight)co2Max = graphHeight / yScale + CO2MIN; Resulting in: Much better. Now we need to label the axes. The x axis is straight forward: text("Year", MARGIN + graphWidth / 2, height - 20); But the y axis needs to be rotated. Brace yourself as this involves some Don’t worry, we aren’t going to be multiplying matrices or doing dot products (although that would be fun). We are simply going to use these two functions: and . matrix manipulation. translate() rotate() If you imagine a grid overlaying our drawing space with the origin sitting in the top left corner then calling shifts the origin along with the whole grid to your new location while rotates the whole grid about the origin. After calling these matrix manipulation functions all following drawing functions will plot their points on the modified grid. translate(x,y) rotate(radian) This means that when we draw some rotated text we have to rotate the grid back again. Ugh. Thankfully Processing has a simple solution to that; it’s the matrix stack. (Not sure what a is? .) It has two commands; and . Basically remembers the current orientation of the grid so you can manipulate it how you want and then restores it. Because it’s a stack you can call those methods repeatedly as long as a call is paired with a preceding . stack Here we go pushMatrix() popMatrix() pushMatrix() popMatrix() popMatrix() pushMatrix() So just before add: drawYAxis() pushMatrix();translate(0, graphWidth / 2);rotate(-PI / 2.0);text("CO₂ concentration (PPM)", 0, 20);popMatrix(); When working with radians (the best unit of angles of course) I like to work with fractions of as it’s easier to comprehend as all you need to remember is that 180° is , 90° is , 45° is etc. PI PI PI / 2 PI / 4 After titling the main graph we get: And the now rather long and complete code: 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);} 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(){// The following pauses the animation before exitingif(_change >= 6.0){if(!_coda){_coda = true;_codaCount = frameCount;}if(frameCount - _codaCount > 120){exit();}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);} 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); }} Next week I’ll show you how to record videos and generate gifs along with hosting them on the internet.

More polish

This is part 9 of an N part series detailing how I make . my animations Prev Next I have discovered that there is a in to plot a point instead of drawing a small ellipse like I have done! I had looked to see how Processing sets pixels which it does with the command but the pixels were too small. Processing also has a command which I disregarded as it looked the same. The difference is that plots a circle using as the size! command Processing [set()](https://processing.org/reference/set_.html) [point()](https://processing.org/reference/point_.html) point() strokeWeight() strokeWeight(10);stroke(255,255,0);point(50,50); Produces: Woohoo, now back to our regularly scheduled program… My maths teacher drummed into my head “always label your axes” so let’s do that along with the actual axes themselves. Oh, but our scale is continuously changing. This makes it trickier but not impossible… First we had better make some room for them, currently our plot is shown hard up against the edges of the window. I was going to just create a variable and then simply add it to the and values but that turned out to be trickier than I thought as I then had to modify the scale algorithms in a non intuitive manner (what actually happened is that I failed to scale it correctly at all and gave up in disgust). margin x y So a far simpler way is to pull out the code into a function and pass in the new position and the width and height. Sounds like a lot of work but it isn’t. First rename the function to . Create a new function and put in the body like so: draw() drawGraph() draw() drawGraph(); void draw(){drawGraph();} void drawGraph(){...} Now add , , , integers to . xPos yPos graphWidth graphHeight drawGraph() void drawGraph(int xPos, int yPos, int graphWidth, int graphHeight) I think that a margin of 60 pixels is a good starting point. So let’s make a global constant with that value. Add this line just before : draw() final int MARGIN = 60; Marking something as means it cannot be modified and by convention these variables are named using all caps. final Now all we do is to call from with the following: drawGraph() draw() drawGraph(MARGIN, height - MARGIN, width - MARGIN, height - MARGIN); So let’s start using those values in : drawGraph() First replace all uses of and with and respectively. width height graphWidth graphHeight Then replace the function with the newly discovered function: ellipse() point() point(xPos + x * xScale, yPos - (y * yScale)); And you’re done. Drawing with also seems a lot faster! Oh yeah, add to otherwise your points will be 1 pixel in size. point() strokeWeight(3) setup() Ok, let’s draw some axes. Simple lines from top to bottom using so in the function: MARGIN draw() line(MARGIN, 0, MARGIN, height);line(0, height - MARGIN, width, height - MARGIN); Hmm, that didn’t work first time for me. This was due to leaving in the function which was clearing the drawn lines. Move that to the first line of and it will all work. background(0) drawGraph() draw() Result should look like this: The line thickness is inherited from the command in . So let’s move that to the first line of and add to the first line of . That will make a thin line for the axes and heavy points for the graph. strokeWeight setup() drawGraph() strokeWeight(1) draw() So now we need to add tick marks. As the tick marks need to be scaled to the same as the graph then they’ll need to be drawn from inside the function. Let’s do the x axis first by marking each year. drawGraph() Yikes. This isn’t as easy as I thought it would be. Because each data point is recorded on a Saturday and we are simply multiplying our by 7 to get the number of days from the start date to find the date to get the data it makes working out the tick marks non trivial. dataIndex After a fair bit of experimentation I was able to reduce the complexity to the following function: void drawXAxis(int xAxisMaximum, float xScale){int yPos = height - MARGIN;float xAxisTick = 279.0 / 7.0;int axisYear = 1958; 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++; }} Where the starts off as the width of the plot and then as the scale increases the scaled max x value. The initial value of the is the number of days left in the year after 29/3/1958 (279) converted to weeks by dividing by 7. xAxisMaximum xAxisTick Here I am introducing a loop. This type of loop keeps executing while the contents of the parenthesis is true. In this case while the current position of the tick is less than the maximum x value on the axis. while The line makes use of the modulus operator to make a longer tick mark and display the year every fifth year. We then simply draw a line for the tick followed by incrementing the tick position by the average number of weeks in a year. if(axisYear % 5 == 0) % This results in: Which I’m rather pleased with. Here’s the complete code: 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, 1032, "_change", 3, Ani.EXPO_IN);} float yScale = 20.0; boolean _coda = false;int _codaCount = 0; float _change = 1.0;final int MARGIN = 60; void draw(){background(0);strokeWeight(1); line(MARGIN, 0, MARGIN, height);line(0, height - MARGIN, width, height - MARGIN); drawGraph(MARGIN, height - MARGIN, width - MARGIN, height - MARGIN);} void drawGraph(int xPos, int yPos, int graphWidth, int graphHeight){int deltaX = int(frameCount * _change); float xScale = 1.0; int xAxisMaximum = graphWidth; if(deltaX > graphWidth){xAxisMaximum = deltaX;xScale = float(graphWidth) / float(deltaX);} drawXAxis(xAxisMaximum, xScale); strokeWeight(3); 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());  
          
  float x = dataIndex;  
  float y = (co2 - 313.04) ;  
    
  if(y \* yScale > graphHeight)   
  {  
    yScale = float(graphHeight)/y;  
  }  
    
  point(xPos + x \* xScale, yPos - (y \* yScale));  
} }} void drawXAxis(int xAxisMaximum, float xScale){int yPos = height - MARGIN;float xAxisTick = 279.0 / 7.0;int axisYear = 1958; 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); }} That was a whole lot more complicated than I was expecting. I intended this post to cover both the x and y axis along with titles etc! I guess that’ll be next week then…

Some polish

This is part 8 of an N part series detailing how I make . my animations Prev Next We don’t want to bore our audience with a long slow so let’s speed things up a bit. Currently we are drawing one dot per frame so the simplest way to go is multiple dots per frame by creating a variable called, say, and setting it to five times the frame count: animation deltaX int deltaX = frameCount * 5; Then replace all references of to resulting in: frameCount deltaX Just like that. Here’s the whole code: import java.time.*; FloatDict _data = new FloatDict();LocalDate _startDate = LocalDate.of(1958, 3, 29); void setup(){loadData();size(500,500);background(0);stroke(255,255,0);} float yScale = 20.0; void draw(){background(0);float xScale = 1.0; int deltaX = frameCount * 5; if(deltaX > width){xScale = float(width) / float(deltaX);} 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());  
          
  float x = dataIndex;  
  float y = (co2 - 313.04) ;  
    
  if(y \* yScale > height)   
  {  
    yScale = float(height)/y;  
  }  
    
  ellipse(x \* xScale, height - (y \* yScale), 1, 1);  
} }} 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); }} But, I feel it’s too fast at the start yet not fast enough at the end. This means we should vary the during the animation. One approach would be to use the to vary the rate but this gets complicated very quickly. rate frameCount This sort of thing is very common in animations and conveniently clever types have made libraries that simplify this. These libraries are called “easing libraries” and we will be using one called written by Benedikt Groß. Ani To install go to Processing’s menu and select In the Libraries tab search for and click install. Ani Tools Add Tool... Ani What this library does is to change the value of a particular variable over the course of an animation using a chosen algorithm. We would like to change the speed of the animation from slow to fast in a steady fashion. To do this we replace the constant value in the code above with a variable. I’m calling this variable and setting its initial value to . 5 _change 1.0 float _change = 1.0; void draw(){int deltaX = int(frameCount * _change); Clearly this doesn’t do much by itself. Now let’s activate . First we import it: Ani import de.looksgood.ani.*;Ani _ani; is the variable that will be containing the object. _ani Ani Then we set it up in : setup() Ani.init(this);Ani.setDefaultTimeMode(Ani.FRAMES);_ani = new Ani(this, 1032, "_change", 3.0, Ani.EXPO_IN); is a reference to our Keeling animation letting the library know where to find things. By default the TimeMode is based on seconds but I find it to be more accurate to use frames as we can be dealing with many thousands of data points and each frame can take a while to render. this Ani So the meat and potatoes of the library is contained in the line: Ani _ani = new Ani(this, 1032, "_change", 3.0, Ani.EXPO_IN); What this is saying is over 1,032 frames¹ modify the value in the variable to end up with the value 3 exponentially. Remember we defined to start with the value above so this slowly increases this value until it reaches after 1,032 frames. _change _change 1.0 3.0 The full documentation is available . here Running this we get: As you can see it starts of nice, slow and easy then rapidly increases in speed. Here is the full code: 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);frameRate(30); Ani.init(this);Ani.setDefaultTimeMode(Ani.FRAMES);_ani = new Ani(this, 1032, "_change", 3.0, Ani.EXPO_IN);} float yScale = 20.0;float _change = 1.0; void draw(){int deltaX = int(frameCount * _change); background(0);float xScale = 1.0; if(deltaX > width){xScale = float(width) / float(deltaX);} 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());  
          
  float x = dataIndex;  
  float y = (co2 - 313.04) ;  
    
  if(y \* yScale > height)   
  {  
    yScale = float(height)/y;  
  }  
    
  ellipse(x \* xScale, height - (y \* yScale), 1, 1);  
} }} 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); }} Next week we’ll be adding text and a bit of polish! ¹ I came up with 1,032 through trial and error. I’m sure there was a way of calculating it but life’s too short. is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Rates of change

This is part 7 of an N part series detailing how I make . my animations Prev Next Now we have reached the limits of what we can display in our 500x500 so we will need to change the to fit the plot for the full 58 years of data. animation scale So once x is greater than 500 we can start reducing the x scale along with the y. Let’s do that: float xScale = 1.0;  
float yScale = 40.0;  
  
if(frameCount > width)  
{  
  xScale = float(width) / float(frameCount);  
}  
  
float x = frameCount \* xScale;  
float y = (co2 - 313.04) \* yScale;  
  
ellipse(x, height - y, 1, 1); What’s with the ? Because and are integers when you divide them the result is an integer. Unfortunately 500/501 as an integer results in 0, not 0.998 so we have to convert the integer values into floats. You’ll also note that when I am using a constant value, like I include the decimal point, this causes the computer to do floating point arithmetic and not integer arithmetic. For example the result of 1/10 would equal 0 while the result of 1.0/10.0 would be 0.1 as expected. Be aware that 1.0/10 would also result in 0! float() width framcCount 40.0 Huh? Oh, I forgot to clear the frame for each draw! Simply add to the first line of . Now we get: background(0); draw() Lovely. Now let’s do the same to the y axis. This’ll be a tad different as the y value doesn’t increase linearly so we’ll keep a running maximum value and scale according to that. As we already multiply our y-axis by 40 already it naturally leads to us setting: float yScale = 40.0; Place that line just before the definition so that is remembered between executions. void draw() yScale draw() Now each time we calculate a new y value we need to check if this exceeds the previous value, if so then calculate the new : height yScale if(y * yScale > height){yScale = float(height)/y;} Resulting in: Here’s the entire code: import java.time.*; FloatDict _data = new FloatDict();LocalDate _startDate = LocalDate.of(1958, 3, 29); void setup(){loadData();size(500,500);background(0);stroke(255,255,0);} float yScale = 40.0; void draw(){background(0);float xScale = 1.0; if(frameCount > width){xScale = float(width) / float(frameCount);} for(int dataIndex = 1; dataIndex <= frameCount; dataIndex++){int daysFromStart = (dataIndex - 1) * 7;LocalDate frameDate = _startDate.plusDays(daysFromStart); if(\_data.hasKey(frameDate.toString()))  
{  
  float co2 = \_data.get(frameDate.toString());  
          
  float x = dataIndex;  
  float y = (co2 - 313.04) ;  
    
  if(y \* yScale > height)   
  {  
    yScale = float(height)/y;  
  }  
    
  ellipse(x \* xScale, height - (y \* yScale), 1, 1);  
} }} 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); }} Join me next week when we play with speed and add some text and axis and stuff… Edit: When I first published this I had a more complicated way of calculating , this is now simpler. yScale

Change your scales

As Kubernetes turns five, we explore the changing face of DevOps in the k8s world. DevOps Inception and Shortcomings In the pre-Kubernetes era, infrastructure and app development were inescapably intertwined. As complexities grew and teams evolved, we saw “DevOps” emerge as a bridge between development and operations in an attempt to resolve the age-old delivery trouble arising from developers throwing things over the wall to ops and then ops having to deal with production issues on the other side. DevOps rose to be a new subculture within existing teams, sometimes yielding new “DevOps teams” and even leading to a new class of tools and methodologies. In reality, though, bridging skills and evolving an operational culture was not enough. Issues arise in the correct functioning of an application without proper configuration management in place. Application configuration would often conflict with IT’s own configuration goals towards security, scalability and availability. Inevitably, every time the pager went off — except for trivial issues — both roles would get pulled in to uncover the mysteries of running software in production. The challenge of agile delivery was that application configuration and infrastructure configuration had to be achieved collaboratively yet have well-defined ownership and clear role separation. In the absence of such a model, there were too many heads still involved in delivery, resulting in a lot of friction and spilled energies. On top of that was the classic case of ‘it-works-for-me’ syndrome wherein developers would often complain that their software worked fine in their own configured development environments but behaved differently once pushed to an IT configured environment. Configuration hell reigned, even as the culture of DevOps seemed to be finding its way. Configuration-Driven DevOps: From Idempotency to Immutability To address these challenges, the industry turned to the principle of idempotency. Most of us understand idempotency simply as “ In the case of configuration management, this end-result would be the desired configuration of an app’s environment. an operation that produces the same end-result no matter how many times it is performed.” When an environment deviates from its desired configuration we could use this principle to ensure that the drift is corrected and the environment is brought back to the desired state. Tools such as Puppet and Chef were born out of this idea and seemed to be the most suitable solution for a while. While the idempotency theory solved some issues, it came with its challenges. We had a way of knowing when things changed and only updating things that needed to be updated. However, it did not solve all the problems as we still had to cater to a seemingly large number of cases. This complexity became avoidable with the advent of containers. Instead of changing things in place, we could now deploy immutable fully-configured container images and simply replace older containers with new updated ones. Thus the focus shifted from idempotency to another important principle: immutability. As Wikipedia says, “ ” So once an application has been packaged into a container image along with its dependencies and configurations, any number of containers can be spawned from it. an immutable object is an object whose state cannot be modified after it is created. identical Enter Kubernetes: Immutability + Infra Abstraction With the popularity of containers becoming a DevOps game-changer, Kubernetes came to be the most sought after container orchestration platform. Application teams could now be sure that their applications packaged as containers can be deployed onto any k8s environment running anywhere, and that the application would behave the same thanks to immutability. In addition to that, Kubernetes’ excellent abstraction over the infrastructure meant that infrastructure and development teams could cleanly and separately focus on their own areas of expertise, taking away the massive configuration and collaboration challenges. This seemed to put an end to the configuration hell mentioned earlier, as we witnessed a fundamental shift emerge with the clean separation of concerns between runtime infrastructure ops and application deployment. So IT can focus on things like cluster infrastructure, capacity management, infrastructure monitoring, cluster level disaster recovery, networking and network security, storage redundancy, etc. On the other hand, application teams can focus their energies on building container images, writing scripts (Kubernetes manifest YAML) for deployment and configuration, externalizing configuration and secrets, and so on. Application teams no longer need to go back and forth between different skill sets, seeking information and coordinating with different teams to get the job done, nor waiting for hours/days to have tickets addressed. Suddenly, there are ways to and lift the weight of collaboration. The actual infrastructure doesn’t matter so much anymore for delivery as it got nicely abstracted by k8s. eliminate friction The Road Ahead for DevOps With all the abstraction and clean separation that k8s brings, it also adds another layer on top of the VMs/machines on which it runs. This means additional overhead for IT with regard to cluster management, networking, storage, etc. In recent times, there has been a lot of industry focus on how to simplify K8s setup and management for enterprise teams to access all the intended benefits. For an app team, containerizing a typical medium-sized, microservices-based app would require several thousands of lines of k8s manifest files to be written and managed. Each new deployment would need a rebuild of container images and potential modifications of several manifest files. Clearly, DevOps in today’s world will be different from DevOps in the pre-Kubernetes era. These new-world DevOps teams may do well with an automation process for delivery to Kubernetes so that efficiency gains and economic benefits can be realized sooner while also maintaining reliability and speed. Such automation along with a standardized process will further enable a clean hand-off interface between the IT teams managing the infrastructure and the app teams delivering apps to k8s. For enterprises pursuing agility and frictionless delivery at scale, finding will be at the heart of DevOps in times to come. the shortest path to Kubernetes Originally in The Newstack . appeared

5 Years of K8s: DevOps Before and After Kubernetes

The last two decades have seen a sea change in the way software is written and delivered. Waterfall to iterative to agile, native to hybrid to responsive interfaces, monoliths to microservices, installed to pay-as-you-go SaaS, data centers to private and hybrid clouds, and virtual machines to containers.  As the market constantly evolves, enterprises are facing a ton of choices with increasing complexity. When microservices came along to break up huge monoliths into manageable parts, it meant teams still had to manage those individual parts, each with their own life cycle. Containers (you know where that metaphor came from) solved some of that complexity by packaging each part and all dependent information into self-contained, repeatable units. This is where our story begins. With the advent of containers as an economical portable solution, software began to be packaged along with its stack dependencies as an immutable “container image.” Once you have an image, you can launch any number of identical containers. This guarantees outcomes that are predictable and consistent overcoming the familiar software challenge — the “works for me” syndrome. The Rising Need for Automation Microservices and containers are typically hand in glove. With container images being “immutable,” any change to the service code or its dependencies entails building a new image. This means refreshing images built from the new code and replacing the relevant containers. In an enterprise with hundreds of apps, each containing multiple services, this means hundreds of new images & container replacements in a cycle of change. This demands a massive collaborative effort among developers and IT/DevOps. The situation is in desperate need for automation and process standardization. Automation would help enterprises auto-containerize hundreds of services without having to write manual scripts, custom code or lots of configuration files. It would also lead to process standardization in order to prevent a proliferation of custom methodologies across teams and to reduce dependence on specific people for know-how. With Kubernetes (k8s) emerging as the de facto container orchestration platform for hosting containers, a good process and automation would also facilitate a clean hand-off interface between those managing the k8s cluster/infrastructure and the app teams who are doing app delivery to the cluster. Only then can app teams develop, test & deliver apps with the least amount of friction enabling rapid updates of enterprise applications while also helping the enterprise realize the benefits of containers and k8s. The Cause of Friction in Enterprises Container DevOps is becoming all about ensuring Frictionless delivery. Here are a few overarching goals for this to become a reality. Foremost is speed. If a dev team’s need for a new test environment involves putting a ticket and waiting a day or two, that’s friction. The lack of a well-defined hand-off interface between application & IT teams, for information to be shared and collated in an error-free way, also leads to friction. If making changes to a couple of services and deploying them to staging or production environment involves manual intervention and takes a couple of hours or a day, making it an event, then that’s friction too. Eliminating Friction for a Seamless Delivery An enterprise’s best bet at eliminating friction is to adopt an automated self-service experience that enables app development teams to input service-related information and trigger delivery on demand. Such a delivery platform must combine pieces of information from the various owners in a reliable way. At the same time, black box automation may not win the confidence of app development teams who want to track changes made to service configurations and dependencies, visualize & identify configuration changes between different environments of an app. Most teams are already using CI scripting mechanisms and tools. It would be ideal if the automation leverages as many existing investments around CI as possible with minimal disruption to the roles and workflows in the organization. Enterprises today would, therefore, be well served by moving away from a script-based & people dependent approach to delivery, and towards a platform-based approach. Such a delivery automation platform would provide a frictionless and continuous delivery experience to Kubernetes allowing them to tap into all the intended benefits of containers: improved cost economics, speed, and reliability of deployments, and app portability across multiple clouds.

Stories, News & Mentions about CYSCALE

Cyscale’s Stories on HackerNoon