d3-scatterplot

a reusable D3.js scatterplot plugin that supports easy customization

this plugin is implemented as a closure that supports method chaining

why implement the plugin as a closure (by Mike Bostock)

Dependency

• D3.js (5.x version)

Installing

first, download d3.scatterplot.js in the libs folder

d3.scatterplot.js can be loaded directly as

<script src="pathToTheFile/d3.scatterplot.js"></script>

then use as

let chart = d3.scatterplot()

or if you are using Node.js/CommonJS

import scatterplot from "pathToTheFile/d3.scatterplot.js"

Usage example

let data = [{x: 10, y: 10}, {x: 20, y: 15}, {x: 30, y: 0}]

let chart = d3.scatterplot()

let svg = d3.select('body').append('svg')
    .datum(data)
    .call(chart)

How to customize

// create a scatterplot closure
let chart = d3.scatterplot()

// set width
chart.width(800)

// get width
let width = chart.width() /* width = 800 */

// other attributes in the API can be get/set similarly

API Reference

• width: [Number]
  • get/set the width of the whole chart
  • default = 400
• height: [Number]
  • get/set the height of the whole chart
  • default = 400
• margin: [{left: Number, right: Number, top: Number, bottom: Number}]
  • get/set the margin
  • default = {left: 50, right: 50, top: 50, bottom: 50})
• duration: [Number]
  • get/set the transition duration (ms)
  • default = 500
• xLabel: [String]
  • get/set the x axis label
  • default = "x"
• yLabel: [String]
  • get/set the y axis label
  • default = "y"
• xValueMapper: [Function]
  • get/set the access method to x value
  • default = d => d.x
• yValueMapper: [Function]
  • get/set the access method to y value
  • default = d => d.y
• colorValueMapper: [Function]
  • get/set the access method to the value that has a one-to-one mapping with the filling color
  • default = d => d.label
• rValueMapper: [Function]
  • get/set the access method to point radius
  • default = _ => 3
  • by default radius = 3 for all the points
• strokeValueMapper: [Function]
  • get/set the access method to point stroke color
  • default = _ => "black"
  • by default stroke_color = "black" for all the points
• enableBrush: [Boolean]
  • get/set whether brushing should be enabled
  • default = true
• drawLegend: [Boolean]
  • get/set whether legend should be drawn
  • default = false