Creating a Dynamic Scatterplot with D3.js: A Visual Analytics Guide

Learn to create a scatterplot with D3.js by plotting random circles and triangles with axes and dynamic styling. A step-by-step guide to mastering D3.js for visual analytics.

D3.js (Data-Driven Documents) is a powerful JavaScript library for creating dynamic and interactive visualizations in the browser. In this guide, we’ll walk you through the process of building a scatterplot featuring circles and triangles with dynamic axes, styling, and interactivity using D3.js v3.
By the end of this tutorial, you'll have a functional scatterplot that meets the following specifications:
<ul>
<li>50 randomly placed objects (25 circles, 25 triangles).</li>
<li>Objects are sized dynamically based on their X-coordinate.</li>
<li>Dynamic X and Y axes scaling with automatic ticks.</li>
<li>Visual differentiation between objects based on their size.</li>
</ul>
<hr>
<h3><img src="https://files-storage-l.nyc3.digitaloceanspaces.com/epic-essay/2oBBVcXMhZBtvYoWlH8cTFlcSluZ5AdyWUEgqDRL.png" width="324" height="120"></h3>
<h3>1. Prerequisites</h3>
Before starting, ensure you:
<ol>
<li>Familiarize yourself with the D3 tutorial through <a href="http://alignedleft.com/tutorials/d3/" target="_new" rel="noopener">Aligned Left</a> (steps 1–16).</li>
<li>Download D3.js v3 from <a href="https://d3js.org/d3.v3.min.js" target="_new" rel="noopener">this link</a>.</li>
<li>Use a modern browser like Firefox or Chrome for robust developer tools.</li>
</ol>
<hr>
<h3>2. Setting Up Your Project</h3>
Create a folder structure for your project:
<ul>
<li>Folder Name: <code>[your name-hw3]</code></li>
<li>Subfolders and Files:
<ul>
<li><code>d3/</code>: Contains <code>d3.v3.min.js</code></li>
<li><code>index.html</code>: Main HTML file.</li>
</ul>
</li>
</ul>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre hljs language-html"><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>[YOUR NAME]</title>
 <script src="d3/d3.v3.min.js"></script>
 <style>
 svg { border: 1px solid black; }
 </style>
</head>
<body>
 <h1 style="text-align: center;">[YOUR NAME]</h1>
 <div id="scatterplot"></div>
 <script src="script.js"></script>
</body>
</html>
</code></div>
</div>
<hr>
<h3>3. Creating the Scatterplot with D3.js</h3>
<h4>Step 1: Initialize the SVG Canvas</h4>
Set up the canvas for the scatterplot.
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre hljs language-javascript">const width = 500, height = 500, padding = 50;
const svg = d3.select("#scatterplot")
 .append("svg")
 .attr("width", width + padding * 2)
 .attr("height", height + padding * 2)
 .append("g")
 .attr("transform", `translate(${padding}, ${padding})`);
</code></div>
</div>
<hr>
<h4>Step 2: Generate Random Data</h4>
Generate 50 random objects (25 circles, 25 triangles) with random positions and sizes.<button class="flex gap-1 items-center select-none py-1"></button>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre hljs language-javascript">const data = Array.from({ length: 50 }, (_, i) => ({
 x: Math.random() * 100,
 y: Math.random() * 100,
 size: Math.random() * (50 - 5) + 5,
 type: i < 25 ? "circle" : "triangle"
}));

const avgSize = d3.mean(data, d => d.size);
</code></div>
</div>
<hr>
<h4>Step 3: Set Up Scales</h4>
Define scales for mapping data values to screen coordinates and object sizes.
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre hljs language-javascript">const xScale = d3.scale.linear().domain([0, 100]).range([0, width]);
const yScale = d3.scale.linear().domain([0, 100]).range([height, 0]);
const sizeScale = d3.scale.linear().domain([0, 100]).range([5, 50]);
</code></div>
</div>
<hr>
<h4>Step 4: Add Axes</h4>
Create dynamic axes that adjust to the data.
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre hljs language-javascript">const xAxis = d3.svg.axis().scale(xScale).orient("bottom");
const yAxis = d3.svg.axis().scale(yScale).orient("left");

svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

svg.append("g")
 .call(yAxis);
</code></div>
</div>
<hr>
<h4>Step 5: Render Objects</h4>
Plot circles and triangles on the scatterplot, applying colors based on their size.
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre hljs language-javascript">svg.selectAll(".object")
 .data(data)
 .enter()
 .append("path")
 .attr("d", d3.svg.symbol().type(d => d.type === "circle" ? "circle" : "triangle-up").size(d => sizeScale(d.size)))
 .attr("transform", d => `translate(${xScale(d.x)}, ${yScale(d.y)})`)
 .attr("stroke", d => d.size > avgSize ? "blue" : "green")
 .attr("fill", "none");
</code></div>
</div>
<hr>
<h3>4. Enhancements and Best Practices</h3>
<ul>
<li>Code Organization: Use separate files for HTML, CSS, and JavaScript for modularity.</li>
<li>Testing: Test with different random datasets to ensure consistent behavior.</li>
<li>Interactivity: Add hover effects or tooltips to display data values.</li>
</ul>
<hr>
<h3>5. Deliverables</h3>
Package your project as <code>[your name-hw3].zip</code> containing:
<ol>
<li>d3/ folder with <code>d3.v3.min.js</code>.</li>
<li><code>index.html</code>: Displays the scatterplot as specified.</li>
</ol>

Place an order like this

Creating a Dynamic Scatterplot with D3.js: A Visual Analytics Guide

Learn to create a scatterplot with D3.js by plotting random circles and triangles with axes and dynamic styling. A step-by-step guide to mastering D3.js for visual analytics.

Stay Connected with Epic Essay on Social Media

Get Assignment Tips and Updates on Twitter