Charts

donut

  • name string = ([x]) => x given d in data, returns the (ordinal) label

  • value string = ([, y]) => y given d in data, returns the (quantitative) value

  • title string given d in data, returns the title text

  • width string = 640 outer width, in pixels

  • height string = 400 outer height, in pixels

  • innerRadius string = 0 inner radius of pie, in pixels (non-zero for donut)

  • outerRadius string = Math.min(width, height) / 2 outer radius of pie, in pixels

  • labelRadius string = (innerRadius * 0.2 + outerRadius * 0.8) center radius of labels

  • format string = ',' a format specifier for values (in the label)

  • names string array of names (the domain of the color scale)

  • colors string array of colors for names

  • stroke string = innerRadius > 0 ? 'none' : 'white' stroke separating widths

  • strokeWidth string = 1 width of stroke separating wedges

  • strokeLinejoin string = 'round' line join of stroke separating wedges

  • padAngle string = stroke === 'none' ? 1 / outerRadius : 0 angular separation between wedges

chart.donut.png

🗀 ISC LicenseAdapted from Observable 🔗

grouped-bar

  • x string = (d, i) => i given d in data, returns the (ordinal) x-value

  • y string = d => d given d in data, returns the (quantitative) y-value

  • z string = () => 1 given d in data, returns the (categorical) z-value

  • title string given d in data, returns the title text

  • marginTop string = 30 top margin, in pixels

  • marginRight string = 0 right margin, in pixels

  • marginBottom string = 30 bottom margin, in pixels

  • marginLeft string = 40 left margin, in pixels

  • width string = 640 outer width, in pixels

  • height string = 400 outer height, in pixels

  • xDomain string = d3.groupSort(data, g => d3.median(g, ${x}), ${x}) the x domain [xmin, xmax]

  • xRange string = [marginLeft, width - marginRight]

  • xPadding string = 0.1 amount of x-range to reserve to separate groups

  • yType string = d3.scaleLinear type of y-scale

  • yDomain string

  • yRange string = [height - marginBottom, marginTop]

  • zDomain string = d3.groupSort(data, g => -d3.median(g, ${y}), ${z}) the z domain

  • zPadding string = 0.05 amount of x-range to reserve to separate bars

  • yFormat string a format specifier string for the y-axis

  • yLabel string a label for the y-axis

  • filterZ string = false other way

  • separatorWidth string = 0

  • separatorOffset string = 0

  • separatorColor string = 'gainsboro'

  • colors string array of colors

chart.grouped-bar.png

🗀 ISC LicenseAdapted from Observable 🔗

horizontal-bar

  • x string = d => d given d in data, returns the (quantitative) x-value

  • y string = (d, i) => i given d in data, returns the (ordinal) y-value

  • title string given d in data, returns the title text

  • marginTop string = 30 the top margin, in pixels

  • marginRight string = 0 the right margin, in pixels

  • marginBottom string = 10 the bottom margin, in pixels

  • marginLeft string = 80 the left margin, in pixels

  • width string = 640 the outer width of the chart, in pixels

  • height string outer height, in pixels

  • xType string = d3.scaleLinear type of x-scale

  • xDomain string

  • xRange string = [marginLeft, width - marginRight]

  • xFormat string a format specifier string for the x-axis

  • xLabel string a label for the x-axis

  • yPadding string = 0.1 amount of y-range to reserve to separate bars

  • yDomain string an array of (ordinal) y-values

  • yRange string

  • colors string array of colors

  • titleColor string = "white" title fill color when atop bar

  • titleAltColor string = "currentColor" title fill color when atop background

chart.horizontal-bar.png

🗀 ISC LicenseAdapted from Observable 🔗

inline

  • x string = ([x]) => x given d in data, returns the (temporal) x-value

  • y string = ([, y]) => y given d in data, returns the (quantitative) y-value

  • z string = () => 1 given d in data, returns the (categorical) z-value

  • defined string for gaps in data

  • curve string = d3.curveLinear method of interpolation between points

  • marginTop string = 30 top margin, in pixels

  • marginRight string = 50 right margin, in pixels

  • marginBottom string = 30 bottom margin, in pixels

  • marginLeft string = 30 left margin, in pixels

  • width string = 640 outer width, in pixels

  • height string = 400 outer height, in pixels

  • xType string = d3.scaleOrdinal type of x-scale

  • xDomain string = d3.groupSort(data, g => d3.median(g, ${x}), ${x}) the x domain [xmin, xmax]

  • xRange string

  • yType string = d3.scaleLinear type of y-scale

  • yDomain string

  • yRange string = [height - marginBottom, marginTop]

  • zDomain string array of z-values

  • yFormat string a format specifier string for the labels

  • colors string = d3.schemeCategory10 stroke color of line

  • strokeLinecap string = 'round' stroke line cap of the line

  • strokeLinejoin string = 'round' stroke line join of the line

  • strokeWidth string = 2 stroke width of line, in pixels

  • strokeOpacity string = 1 stroke opacity of line

  • halo string = '#fff' color of label halo

  • haloWidth string = 6 padding around the labels

chart.inline.png

🗀 ISC LicenseAdapted from Observable 🔗

pie

  • name string = ([x]) => x given d in data, returns the (ordinal) label

  • value string = ([, y]) => y given d in data, returns the (quantitative) value

  • title string given d in data, returns the title text

  • width string = 640 outer width, in pixels

  • height string = 400 outer height, in pixels

  • innerRadius string = 0 inner radius of pie, in pixels (non-zero for donut)

  • outerRadius string = Math.min(width, height) / 2 outer radius of pie, in pixels

  • labelRadius string = (innerRadius * 0.2 + outerRadius * 0.8) center radius of labels

  • format string = ',' a format specifier for values (in the label)

  • names string array of names (the domain of the color scale)

  • colors string array of colors for names

  • stroke string = innerRadius > 0 ? 'none' : 'white' stroke separating widths

  • strokeWidth string = 1 width of stroke separating wedges

  • strokeLinejoin string = 'round' line join of stroke separating wedges

  • padAngle string = stroke === 'none' ? 1 / outerRadius : 0 angular separation between wedges

chart.pie.png

🗀 ISC LicenseAdapted from Observable 🔗