Diagram Maker is a framework & data format agnostic library that is fully customizable in terms of look & feel as well as behavior. It also exposes a declarative interface to reduce the code required to integrate the library in any application and comes with many interactive features built in.
See it in action on their interactive demo.
At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React.
The library boasts small bundle sizes due to package splitting, is un-opinionated about integrations like state management and animations (if that’s a feature for you), and is explicitly not a charting library.
As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.
This looks pretty rad. You can:
.drawio or .dio files in the Draw.io editor, as xml or both..drawio.svg files with embedded Draw.io diagrams
Saul Pwanson is the creator and maintainer of VisiData, a terminal interface for exploring and arranging tabular data. On this Maintainer Spotlight episode, Saul joins Jerod for a wide-ranging discussion on crossword puzzles, biographs, and Saul’s open source gift to the world. Thanks to AJ for the suggestion!
In the midst of the COVID-19 pandemic, Daniel and Chris have a timely conversation with Lucy Lu Wang of the Allen Institute for Artificial Intelligence about COVID-19 Open Research Dataset (CORD-19). She relates how CORD-19 was created and organized, and how researchers around the world are currently using the data to answer important COVID-19 questions that will help the world through this ongoing crisis.
Harry Stevens is a Graphics Reporter at The Washington Post and the author of “Why outbreaks like coronavirus spread exponentially, and how to ‘flatten the curve’” — the most popular post in The Washington Post’s online history.
We cover the necessary details of this global pandemic, the journalist, coding, and design skills required to be a graphics reporter, the backstory on visualizing this outbreak, why Harry chooses R over Python, advice for aspiring graphics reporters, and how all of this came together at the perfect time in history to give Harry a chance to catch lightning in a bottle.
A fun walkthrough of creating a mini data viz component in React, which teaches useful concepts like drawing with SVG and d3.js scales.
Jack builds on this post from Harry Stevens on The Washington Post to create an interactive virus outbreak simulator with JavaScript, HTML5, and Canvas. It simulates the effectiveness of lockdowns, social distancing, PPE, and more. Jack shares the code too.
This post will simulate how viruses can spread throughout a community and implement a variety of different parameters to see how these affect the simulation.
This library provides easy, componentized access to 20+ d3-based visualizations. If this (impressive) work looks familiar at all, it’s because nivo’s author also pitches in on the State of JS and CSS survey results.
This calculator lets you tweak things like R0, incubation time, and hospitalization rate to see how affect the results. From the author:
At the time of writing, the coronavirus disease of 2019 remains a global health crisis of grave and uncertain magnitude. To the non-expert (such as myself), contextualizing the numbers, forecasts and epidemiological parameters described in the media and literature can be challenging. I created this calculator as an attempt to address this gap in understanding.
Graphics reporter Harry Stevens from The Washington Post helps us see the impact of “social distancing” with this coronavirus simulator. He shows the effects of four simulations — a free-for-all, an attempted quarantine, moderate social distancing, and extensive social distancing.
Harry goes on to say, “moderate social distancing will usually outperform the attempted quarantine, and extensive social distancing usually works best of all.”
To simulate more social distancing, instead of allowing a quarter of the population to move, we will see what happens when we let just one of every eight people move.
This interactive dashboard was created by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University to visualize and track reported cases of coronavirus disease 2019 (COVID-19) in real time. The data collected and displayed are freely available on GitHub.
Below are a few notable pull-quotes from this correspondence on The Lancet’s Infectious Diseases journal.
The dashboard, first shared publicly on Jan 22, illustrates the location and number of confirmed COVID-19 cases, deaths, and recoveries for all affected countries. It was developed to provide researchers, public health authorities, and the general public with a user-friendly tool to track the outbreak as it unfolds.
The dashboard reports cases at the province level in China; at the city level in the USA, Australia, and Canada; and at the country level otherwise. During Jan 22–31, all data collection and processing were done manually, and updates were typically done twice a day, morning and night (US Eastern Time). As the outbreak evolved, the manual reporting process became unsustainable…
Given the popularity and impact of the dashboard to date, we plan to continue hosting and managing the tool throughout the entirety of the COVID-19 outbreak and to build out its capabilities to establish a standing tool to monitor and report on future outbreaks.
For more updates and resources follow Lauren Gardner on Twitter or read the readme.
Diagrams lets you draw the cloud system architecture in Python code. It was born for prototyping a new system architecture design without any design tools. You can also describe or visualize the existing system architecture as well. Diagrams currently supports four major providers:
AWS,Azure,GCPandKubernetes.
I’ve never found a diagramming tool I’ve enjoyed using. The idea of just writing some code and letting a tool do the drawing might be just what the doctor ordered. Start with the quick start.
The State of JS 2019 survey left many in awe of the beautifully rendered line graph created by Amelia Wattenberger. So we’ve brought her on JS Party to discuss how she built it!
We’ll chat about all things D3, a JavaScript library for creating data visualizations, and even learn a bit about the CSS cascade.
This isn’t the most practical item in our feed this week, but it’s definitely neat and the how is it made section of the README (and related code) shows how you might accomplish something similar.
In this episode we’re shining our maintainer spotlight on Ovilia. Hailing from Shanghai, China, Ovilia is an up-and-coming developer who contributes to Apache ECharts, maintains Polyvia, which does very cool low-poly image and video processing, and has a sweet personal website, too.
This episode with Ovilia continues our maintainer spotlight series where we dig deep into the life of an open source software maintainer. We’re producing this series in partnership with Tidelift. Huge thanks to Tidelift for making this series possible.
Move over, Hansel. Hand-drawn is so hot right now.
Collin Dellow:
If you love Graphviz but hate its 1990s aesthetics, you might find this tool handy. It’s great for documenting workflows and designs in a way that prompts people to consider it a work-in-progress that’s open for collaboration and discussion.
Excellent work coming from Microsoft’s VIDA research group
This new version of SandDance has been rebuilt from scratch with the goal of being modular, extensible, and embeddable into your custom applications.
I do love the hand-drawn style for charts like these. It almost feels like you worked harder on them for some reason.
There are some fascinating results in this study put out by HackerRank where they surveyed 10,351 student developers. One example that shows a growing trend in developer ed:
University students today seem to be showing less interest in Stack Overflow compared to professional developers. Instead, YouTube is starting to become more favorable as a learning tool for the next generation of developers. We found that 73% of students use YouTube, compared to only 64% of professional developers (where the majority of professional developers were aged 25-34, and the majority of student developers were aged 18-24).
A little less surprising, but still good to know for those breaking in to the scene:
There’s a big opportunity for student developers to learn JavaScript and JavaScript-focused frameworks. Employers need it more than any other skill. As the direction for web applications have moved from static to dynamic, JavaScript has become increasingly dominant in the industry. In fact, 95% of web applications are built on JavaScript—so it’s hard to ignore the disconnect.
This is a really well done report. 👌
Love it! Go here for more examples.
Within this interactive map, vocal bursts are plotted along the 24 dimensions of emotion they can reliably convey. Each letter corresponds to a vocal burst. Fascinating little web demo!
Renders a time histogram with a preview of the whole data below it, that can be used both to pan and zoom in on specific intervals as well as to see an overview of the distribution of the data (demo).
Feature-rich and easy on the eyes. Read the intro post on Medium for the backstory and motivation behind this.
A diagramming model which uses a set of typing characters to approximate the intended shape.
