The resulting maps are quite varied and absolutely stunning. 🤩

HN as tech trend? The results seem conclusive, but drop a comment below to share your thoughts on what James shared, his methodology, etc.

There’s a general belief in the tech circles I inhabit that Hacker News is a useful indicator for up-and-coming technologies that will hit the mainstream within the next few years. So I picked some of the major tech topics of the past fifteen years to see if that’s really true. Can I convince myself that checking the HN front page multiple times a day is a useful and productive exercise?

For the past year, my friend, Ole Kröger, and I have been developing a native animation package in Julia called, Javis.jl. Through our development process, we have been able to build a nearly 70 person developer community, sponsor Google summer of code students, and help new Julia programmers create powerful visuals! We recently presented the tool at JuliaCon, and were able to show its use for educational outreach and beyond.

Our hope is that this open source tool can be used by programmers, educators, professionals and researchers from across the globe to convey their ideas in winsome and understandable ways!

It’s fun seeing the proliferation of TODO comments over time on these bastions of open source. One not-surprising (but still unfortunate) trend: they all pretty much move up and to the right 📈, but a few have had some dramatic reversals 📉 at certain points in time. Go had a crazy month in April 2018 & TypeScript’s TODOs exploded in the Spring of 2018.

This comes from Mike Bostock (D3.js) who knows a thing or two about visualizing data in the browser.

It has a concise and (hopefully) memorable API to foster fluency — and plenty of examples to learn from and copy-paste.

April Fool’s may be over, but once we set up a system to react every time someone typed Command+C, we realized there was also an opportunity to learn about how people use our site. Here’s what we found.

TLDR; one in four users copy something within five minutes of hitting a page. But this blog post (and accompanying podcast episode) goes deep into the details and lays it all out for you with pretty charts.

Synthesized insights from Stack Overflow’s 2020 survey data:

The dataset has 33,447 salary data points which probably isn’t that many given that there are probably around 25 million software developers in the world. You have been warned.

Despite Petr’s warnings, he did go through some trouble to make the data as good as possible (short of, you know, finding or creating more data sources 😉).

Visualization help end-users understand data. Charts.css help frontend developers turn data into beautiful charts and graphs using simple CSS classes.

Utility classes are so hot right now.

Mike Bostock celebrates D3’s 10th by reflecting on what he’s learned over the years. There’s a lot to glean from Mike’s reflections. I really enjoyed this sentiment under the “Don’t go it alone” section:

To avoid entrusting your emotional wellbeing to internet randos (see #8), you must develop relationships with a small, stable group of people that you respect. In other words, find a team (or community) that can provide validation, feedback, support, and mentorship. Maybe this is obvious to everyone but me — yes, Mike, friends are good — but I feel like it’s worth repeating today when so much human interaction happens at a distance.

Superset can query data from any SQL-speaking datastore or data engine (e.g. Presto or Athena) that has a Python DB-API driver and a SQLAlchemy dialect.

This has been around long enough to be picked up by the Apache Foundation, but somehow it’s avoided my radar until today. The visualizations you can achieve with it are impressive, to say the least.

I love posts like these from startups/projects that share how they’re doing over time:

Excalidraw started as a way to procrastinate on January 1st, 2020, and ended up being a fully fledged whiteboard product only one year later! In this post, we’ll go over the most important features that made Excalidraw great at being a virtual whiteboard for sketching hand-drawn like diagrams.

They detail their open source tech stack, new features the team shipped last year, cool things people are doing with the tool, and more.

(The tool itself, btw, looks totally rad and is definitely something I’ll be toying with over the coming weeks.)

Track and vizualize your followers/notifications, your repo’s stars/forks/watchers/commits, issue states/assignees/labels, and more.

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:

• Edit .drawio or .dio files in the Draw.io editor, as xml or both.
• Edit .drawio.svg files with embedded Draw.io diagrams
• Use an offline version of Draw.io by default
• Configure an online Draw.io URL
• Select a Draw.io theme

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, GCP and Kubernetes.

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.

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.

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.

Built with RoughJS and (or at least inspired by) viz.js.