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

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

then use as

letchart=d3.scatterplot()

or if you are using Node.js/CommonJS

importscatterplotfrom"pathToTheFile/d3.scatterplot.js"

Usage example

letdata=[{x: 10,y: 10},{x: 20,y: 15},{x: 30,y: 0}]letchart=d3.scatterplot()letsvg=d3.select('body').append('svg').datum(data).call(chart)

How to customize

// create a scatterplot closureletchart=d3.scatterplot()// set widthchart.width(800)// get widthletwidth=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