DEV Community: Sujit Mali

Scatter Plots: The "By Hand" Method vs. The 30-Second Shortcut

Sujit Mali — Mon, 08 Dec 2025 06:14:29 +0000

If you work with data in Python, matplotlib is basically muscle memory at this point. It is the grandfather of Python visualization libraries - powerful, flexible, and capable of doing almost anything if you have enough patience.

But let’s be honest: sometimes you don't want to write 20 lines of code just to see if two columns of data are correlated.

I wanted to share a quick refresher on the "standard" way to build a production-ready scatter plot in Matplotlib, and then share a quick browser-based utility I found for when you just need the chart now without firing up a Jupyter Notebook.

Part 1: The Matplotlib Way

If you are building a pipeline or need something highly reproducible, you have to code it. Here is the boilerplate I use to get a scatter plot that doesn't look like it was made in 1995.

We need to handle the data, the labels, the alpha (transparency), and the grid manually.

import matplotlib.pyplot as plt
import numpy as np

# 1. Generate some dummy data
# Let's pretend this is "Page Load Time" vs "User Bounce Rate"
np.random.seed(42)
x = np.random.rand(50) * 10
y = 2 * x + 1 + np.random.randn(50) * 2  # Positive correlation with noise

# 2. Create the figure
plt.figure(figsize=(10, 6))

# 3. The Scatter Plot command
# We add 'alpha' because overlapping points are misleading
# We add 'edgecolors' to make the dots pop
plt.scatter(x, y, color='dodgerblue', alpha=0.7, edgecolors='k', s=100)

# 4. The Styling (The part we always forget)
plt.title('Page Load Time vs. Bounce Rate', fontsize=16)
plt.xlabel('Load Time (seconds)', fontsize=12)
plt.ylabel('Bounce Rate (%)', fontsize=12)
plt.grid(True, linestyle='--', alpha=0.5)

# 5. Show it
plt.show()

It works perfectly. But, to get that image, I had to:

Spin up my environment.
Remember the syntax for figsize (is it width, height or height, width?).
Google how to set the transparency of the grid lines again.

Part 2: The "I Just Need a PNG" Way

Sometimes, I’m just chatting with a PM or a client, and I have a CSV file. I don't want to open VS Code. I just want to visualize the relationship instantly.

For those moments, I stopped coding it.

I started using this Scatter Plot Maker

It’s effectively a wrapper for the visualization process but without the coding overhead.

You paste your data.
It handles the axis scaling automatically.
You get the downloadable image.

I timed it: The Python script took me about 4 minutes to write and debug (mostly formatting the axis labels). The online tool took about 45 seconds.

The Verdict?

If you are building a dashboard for a client? Stick to Python. If you just need to visualize a dataset for a presentation, a Slack message, or a quick sanity check? Save your brain cells and use the generator.

Do you guys have any other "no-code" tools you use to skip the boilerplate? Let me know in the comments.

How to import and export functions in JavaScript ?

Sujit Mali — Wed, 15 Feb 2023 06:34:00 +0000

In this blog, we will discuss how to import and export functions in JavaScript.

In JavaScript, there are different ways to import and export functions. Here are 2 common ways:

Default Export
Named Exports

1. Default Export

// greet.js 
export default function greet(name) {  // EXPORT
  console.log(`Hello, ${name}!`);
}

// app.js
import greet from './greet.js';  // IMPORT
greet('Sam');

In this example, we're exporting a function using the export default syntax. This allows us to import the function using any name we want in the importing file, and it doesn't require us to use curly braces when importing.

NOTE: The export default syntax allows you to export only a single value from a module as the default export.

2. Named Exports

// math.js
export function add(a, b) {            // EXPORT
  return a + b;
}

export function subtract(a, b) {      // EXPORT
  return a - b;
}

// app.js
import { add, subtract } from './math.js'; // IMPORTS
console.log(add(3, 4));
console.log(subtract(5, 2));

In this example, we're exporting two functions (add and subtract) using the named exports syntax. To import these functions, we need to use curly braces and specify the names of the functions we want to import.

NOTE: While importing, the Name of the function should be the same as defined.

OR
Export all function in one line.

// math.js
function add(a, b) { 
  return a + b;
}

function subtract(a, b) {      
  return a - b;
}

export { add, subtract };      // EXPORT ALL FUNTION IN ONE LINE

// app.js
import { add, subtract } from './math.js'; // IMPORT

console.log(add(2, 3));
console.log(subtract(5, 3));

How to make a line graph in google sheets?

Sujit Mali — Fri, 20 Jan 2023 09:59:28 +0000

To make a line graph in Google Sheets, follow these steps:

Step 1: Enter the data

Enter your data in your sheets.
E.g

Step 2: Select the data

The second step after the step 1 is to selecting the data.

Step 3: Click on Insert Chart

Click on "Insert Chart" at top toolbar.

Step 4: Select the line chart.

Select the chart you want to create.

Step 5: Customize

Final step customize your chart such as Color, Point, Legend, Axis and Text.

Step 6: Download

First select your graph and click on three dots.

Finally download your graph as png, svg or pdf format.

OR
You can try line graph maker to create graph easily.

How to read a histogram?

Sujit Mali — Fri, 20 Jan 2023 06:55:24 +0000

A histogram is a graphical representation of the distribution of a dataset. It is an estimate of the probability distribution of a continuous variable. To read a histogram in detail, you should pay attention to the following elements:

The x-axis represents the variable of interest, while the y-axis represents the frequency of that variable.
The bars of the histogram show the frequency of observations within each class or bin. The height of each bar corresponds to the number of observations that fall within the corresponding class.
The shape of the histogram can reveal information about the distribution of the data. For example, a symmetric histogram with a bell-shaped curve indicates a normal distribution, while a histogram with a long tail to the right or left indicates a skewed distribution.
The number of classes or bins can also be important. A histogram with too few classes can make the data appear more variable than it really is, while a histogram with too many classes can make the data appear less variable than it really is.
The histogram can also be used to identify patterns or outliers in the data by looking for gaps or clusters in the distribution.

Finally, it is important to keep in mind that histograms are just one way of visualizing data, and other types of plots such as box plots, scatter plots, etc might be better suited depending on the context and the question you want to answer.
You can create histogram easily using histogram maker.