0.1.0 • Public • Published


Codemods to upgrade d3 from version 3.x.

This repository contains a collection of codemod scripts for use with JSCodeshift to upgrade code using d3 version 3.x to the version 4.x.

Note that this codemods are not comprehensive of all the changes of d3 version 4.x but covers only the changes I needed to apply to my codebase. Please feel free to contribute with additional codemods to increase the change's coverage.

Setup & Run

$ yarn global add jscodeshift
$ git clone https://github.com/expobrain/d3-upgrade-codemods.git
$ jscodeshift -t <codemod-script> <file_or_directory>

Use the -d option for a dry-run and use -p to print the output for comparison.

Note that if you code uses Flow annotations you must change the default parser with the --parser flow switch


To run the unit tests:

$ yarn test

Included Scripts


Apply changes relative to d3-axis:

  • d3.svg.axis().scale(x).orient("bottom") â�¦ d3.axisBottom(x)
  • d3.svg.axis().scale(x).orient("top") â�¦ d3.axisTop(x)
  • d3.svg.axis().scale(x).orient("right") â�¦ d3.axisRight(x)
  • d3.svg.axis().scale(x).orient("left") â�¦ d3.axisLeft(x)
$ jscodeshift --extensions=js,jsx -t d3-upgrade-codemods/transforms/d3-axis.js <file>


Apply changes relative to d3-axis:

  • d3.scale.linear â�¦ d3.scaleLinear
  • d3.scale.sqrt â�¦ d3.scaleSqrt
  • d3.scale.pow â�¦ d3.scalePow
  • d3.scale.log â�¦ d3.scaleLog
  • d3.scale.quantize â�¦ d3.scaleQuantize
  • d3.scale.threshold â�¦ d3.scaleThreshold
  • d3.scale.quantile â�¦ d3.scaleQuantile
  • d3.scale.identity â�¦ d3.scaleIdentity
  • d3.scale.ordinal â�¦ d3.scaleOrdinal
  • d3.time.scale â�¦ d3.scaleTime
  • d3.time.scale.utc â�¦ d3.scaleUtc
  • d3.scale.category10 â�¦ d3.schemeCategory10
  • d3.scale.category20 â�¦ d3.schemeCategory20
  • d3.scale.category20b â�¦ d3.schemeCategory20b
  • d3.scale.category20c â�¦ d3.schemeCategory20c
  • d3.time.format â�¦ d3.timeFormat
  • d3.time.format.utc â�¦ d3.utcFormat
  • d3.time.format.iso â�¦ d3.isoFormat
$ jscodeshift --extensions=js,jsx -t d3-upgrade-codemods/transforms/d3-scale.js <file>


Transforms code which uses d3.timeFormat().parse() function into d3.timeParse().

To be applied after d3-scale

  • d3.timeFormat().parse â�¦ d3.timeParse()
$ jscodeshift --extensions=js,jsx -t d3-upgrade-codemods/transforms/d3-scale-parse-to-timeParse.js <file>


Apply changes relative to d3-axis:

  • d3.svg.line â�¦ d3.line
  • d3.svg.line.radial â�¦ d3.radialLine
  • d3.svg.area â�¦ d3.area
  • d3.svg.area.radial â�¦ d3.radialArea
  • d3.svg.arc â�¦ d3.arc
  • d3.svg.symbol â�¦ d3.symbol
  • d3.svg.symbolTypes â�¦ d3.symbolTypes
  • d3.layout.pie â�¦ d3.pie
  • d3.layout.stack â�¦ d3.stack
  • d3.svg.diagonal â�¦ REMOVED (see d3/d3-shape#27)
  • d3.svg.diagonal.radial â�¦ REMOVED
$ jscodeshift --extensions=js,jsx -t d3-upgrade-codemods/transforms/d3-shape.js <file>


Transforms interpolate() calls into curve().

  • d3.[line|area].interpolate() â�¦ d3.[line|area].curve()

line.curve and area.curve now take a function which instantiates a curve for a given context, rather than a string. The full list of equivalents:

  • linear â�¦ d3.curveLinear
  • linear-closed â�¦ d3.curveLinearClosed
  • step â�¦ d3.curveStep
  • step-before â�¦ d3.curveStepBefore
  • step-after â�¦ d3.curveStepAfter
  • basis â�¦ d3.curveBasis
  • basis-open â�¦ d3.curveBasisOpen
  • basis-closed â�¦ d3.curveBasisClosed
  • bundle â�¦ d3.curveBundle
  • cardinal â�¦ d3.curveCardinal
  • cardinal-open â�¦ d3.curveCardinalOpen
  • cardinal-closed â�¦ d3.curveCardinalClosed
  • monotone â�¦ d3.curveMonotoneX
$ jscodeshift --extensions=js,jsx -t d3-upgrade-codemods/transforms/d3-shape-line-area-interpolate.js <file>


Transforms time intervals in the new format.

  • d3.time.second â�¦ d3.timeSecond
  • d3.time.minute â�¦ d3.timeMinute
  • d3.time.hour â�¦ d3.timeHour
  • d3.time.day â�¦ d3.timeDay
  • d3.time.sunday â�¦ d3.timeSunday
  • d3.time.monday â�¦ d3.timeMonday
  • d3.time.tuesday â�¦ d3.timeTuesday
  • d3.time.wednesday â�¦ d3.timeWednesday
  • d3.time.thursday â�¦ d3.timeThursday
  • d3.time.friday â�¦ d3.timeFriday
  • d3.time.saturday â�¦ d3.timeSaturday
  • d3.time.week â�¦ d3.timeWeek
  • d3.time.month â�¦ d3.timeMonth
  • d3.time.year â�¦ d3.timeYear

The UTC time intervals have likewise been renamed:

  • d3.time.second.utc â�¦ d3.utcSecond
  • d3.time.minute.utc â�¦ d3.utcMinute
  • d3.time.hour.utc â�¦ d3.utcHour
  • d3.time.day.utc â�¦ d3.utcDay
  • d3.time.sunday.utc â�¦ d3.utcSunday
  • d3.time.monday.utc â�¦ d3.utcMonday
  • d3.time.tuesday.utc â�¦ d3.utcTuesday
  • d3.time.wednesday.utc â�¦ d3.utcWednesday
  • d3.time.thursday.utc â�¦ d3.utcThursday
  • d3.time.friday.utc â�¦ d3.utcFriday
  • d3.time.saturday.utc â�¦ d3.utcSaturday
  • d3.time.week.utc â�¦ d3.utcWeek
  • d3.time.month.utc â�¦ d3.utcMonth
  • d3.time.year.utc â�¦ d3.utcYear

The local time range aliases have been renamed:

  • d3.time.seconds â�¦ d3.timeSeconds
  • d3.time.minutes â�¦ d3.timeMinutes
  • d3.time.hours â�¦ d3.timeHours
  • d3.time.days â�¦ d3.timeDays
  • d3.time.sundays â�¦ d3.timeSundays
  • d3.time.mondays â�¦ d3.timeMondays
  • d3.time.tuesdays â�¦ d3.timeTuesdays
  • d3.time.wednesdays â�¦ d3.timeWednesdays
  • d3.time.thursdays â�¦ d3.timeThursdays
  • d3.time.fridays â�¦ d3.timeFridays
  • d3.time.saturdays â�¦ d3.timeSaturdays
  • d3.time.weeks â�¦ d3.timeWeeks
  • d3.time.months â�¦ d3.timeMonths
  • d3.time.years â�¦ d3.timeYears

The UTC time range aliases have been renamed:

  • d3.time.seconds.utc â�¦ d3.utcSeconds
  • d3.time.minutes.utc â�¦ d3.utcMinutes
  • d3.time.hours.utc â�¦ d3.utcHours
  • d3.time.days.utc â�¦ d3.utcDays
  • d3.time.sundays.utc â�¦ d3.utcSundays
  • d3.time.mondays.utc â�¦ d3.utcMondays
  • d3.time.tuesdays.utc â�¦ d3.utcTuesdays
  • d3.time.wednesdays.utc â�¦ d3.utcWednesdays
  • d3.time.thursdays.utc â�¦ d3.utcThursdays
  • d3.time.fridays.utc â�¦ d3.utcFridays
  • d3.time.saturdays.utc â�¦ d3.utcSaturdays
  • d3.time.weeks.utc â�¦ d3.utcWeeks
  • d3.time.months.utc â�¦ d3.utcMonths
  • d3.time.years.utc â�¦ d3.utcYears
$ jscodeshift --extensions=js,jsx -t d3-upgrade-codemods/transforms/d3-time.js <file>



Package Sidebar


npm i d3-upgrade-codemod

Weekly Downloads






Last publish


  • expobrain