How to use the d3.scaleOrdinal function in d3
To help you get started, we’ve selected a few d3 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ft-interactive / visual-vocabulary-templates / line-vertical / lineChart.js View on Github 
export function draw() {
let yScale = d3.scaleLinear();
let xScale = d3.scaleTime();
let seriesNames = [];
let highlightNames = [];
let yAxisAlign = 'right';
let markers = false;
let invertScale = false;
const includeAnnotations = d => (d.annotate !== '' && d.annotate !== undefined); // eslint-disable-line
let annotate = false; // eslint-disable-line
let interpolation = d3.curveLinear;
const colourScale = d3.scaleOrdinal()
// .range(gChartcolour.lineWeb)
.domain(seriesNames);
function chart(parent) {
const lineData = d3.line()
.defined(d => d)
.curve(interpolation)
.y(d => yScale(d.date))
.x(d => xScale(d.value));
parent.append('path')
.attr('stroke', (d) => {
if (highlightNames.length > 0) {
if (highlightNames.indexOf(d.name) !== -1) {
return colourScale(d.name);
}export function draw() {
let yScale = d3.scaleLinear();
let xScale = d3.scaleBand();
let seriesNames = [];
let yAxisAlign = 'right';
let rem = 16;
let markers = false; // eslint-disable-line
let includeMarker = undefined; // eslint-disable-line
let interpolation = d3.curveLinear;
const colourScale = d3.scaleOrdinal()
.domain(seriesNames);
function chart(parent) {
parent.attr('transform', d => `translate(${xScale(d.name)},0)`)
.attr('width', xScale.bandwidth());
parent.selectAll('rect')
.data(d => d.bands)
.enter()
.append('rect')
.attr('width', xScale.bandwidth())
.attr('x', d => xScale(d.name))
.attr('y', d => yScale(Math.max(d.y, d.y1)))
.attr('height', d => Math.abs(yScale(0) - yScale(d.value)))
.attr('fill', d => colourScale(d.name));
}export function draw() {
let yScale = d3.scaleLinear();
let xScale = d3.scaleTime();
let seriesNames = [];
let highlightNames = [];
let yAxisAlign = 'right';
let markers = false;
const includeAnnotations = d => (d.annotate !== '' && d.annotate !== undefined); // eslint-disable-line
let annotate = false; // eslint-disable-line
let interpolation = d3.curveLinear;
let colourScale = d3.scaleOrdinal()
// .range(gChartcolour.lineWeb)
.domain(seriesNames);
function chart(parent) {
const lineData = d3.line()
.defined(d => d)
.curve(interpolation)
.x(d => xScale(d.date))
.y(d => yScale(d.value));
parent.append('path')
.attr('stroke', (d) => {
if (highlightNames.length > 0 && d.highlightLine === false) {
return colourScale.range()[0];
}
if (highlightNames.length > 0 && d.highlightLine === true) {// chart plot area
this.chart = svg.append('g')
.attr('class', 'bars')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
// define X & Y domains
const xDomain = this.data.map(d => d.index);
const yDomain = [0, d3.max(this.data, d => d.value)];
// create scales
this.xScale = d3.scaleBand().padding(0.1).domain(xDomain).rangeRound([0, this.width]);
this.yScale = d3.scaleLinear().domain(yDomain).range([this.height, 0]);
// bar colors
this.colors = d3.scaleOrdinal(d3.schemeCategory20);
// x & y axis
this.xAxis = svg.append('g')
.attr('class', 'axis axis-x')
.attr('transform', `translate(${this.margin.left}, ${this.height + this.margin.top})`)
.call(d3.axisBottom(this.xScale));
this.yAxis = svg.append('g')
.attr('class', 'axis axis-y')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
.call(d3.axisLeft(this.yScale));
// update scales & axis
this.xScale.domain(this.data.map(d => d.index));
this.yScale.domain([0, d3.max(this.data, d => d.value)]);function init(data) {
const { columnKeys, rowTotalsMax } = dataTransform(data).summary();
const valueExtent = [0, rowTotalsMax];
if (typeof colorScale === "undefined") {
colorScale = d3.scaleOrdinal()
.domain(columnKeys)
.range(colors);
}
if (typeof yScale === "undefined") {
yScale = d3.scaleLinear()
.domain(valueExtent)
.range([0, height])
.nice();
}
}function init(data) {
chartW = width - (margin.left + margin.right);
chartH = height - (margin.top + margin.bottom);
const { columnKeys } = dataTransform(data).summary();
if (typeof radius === "undefined") {
radius = Math.min(chartW, chartH) / 2;
}
if (typeof innerRadius === "undefined") {
innerRadius = radius / 2;
}
if (typeof colorScale === "undefined") {
colorScale = d3.scaleOrdinal()
.domain(columnKeys)
.range(colors);
}
}componentDidMount() {
const containerWidth = this.chartRef.parentElement.offsetWidth
const margin = { top: 80, right: 80, bottom: 30, left: 60 }
const width = containerWidth - margin.left - margin.right
const height = 1000 - margin.top - margin.bottom
let chart = d3
.select(this.chartRef)
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
let z = d3.scaleOrdinal().range(d3.schemeCategory20)
const data = this.props.data
let g = [
chart.append('g').attr('transform', 'translate(150,100)'),
chart
.append('g')
.attr('transform', 'translate(' + (width / 2 + 150) + ', 100)')
]
chart
.append('text')
.attr('x', 250)
.attr('y', 70)
.attr('class', 'vbp-header')
.attr('font-size', '14px').attr( "d", line );
const points = seriesGroup.selectAll( "circle" ).data( seriesData )
.enter().append( "circle" )
.attr( "cx", d => x( d.date ) )
.attr( "cy", d => y( d.value ) )
.attr( "r", 2 )
.attr( "fill", "white" )
.style( "stroke", ( ) => this.colorForSeries( seriesName ) )
.on( "mouseover", tip.show )
.on( "mouseout", tip.hide );
if ( onClick ) {
points.on( "click", onClick ).style( "cursor", "pointer" );
}
}
} );
const legendScale = d3.scaleOrdinal( )
.domain( _.keys( localSeries ) )
.range( _.map( localSeries, ( v, k ) => this.colorForSeries( k ) ) );
const legendOrdinal = legend.legendColor( )
.labels( _.map( series, ( v, k ) => ( v.title || k ) ) )
.classPrefix( "legend" )
.shape( "path", d3.symbol( ).type( d3.symbolCircle ).size( 100 )( ) )
.shapePadding( 5 )
.scale( legendScale );
svg.select( ".legendOrdinal" )
.call( legendOrdinal );
focus.select( ".axis--y" )
.call( d3.axisLeft( y ) )
.select( ".domain" )
.remove( );
this.setState( { x, y } );
}.domain(zDomain)
.range([0, this.props.style.dimensions.depth]);
let strokeColorScale, strokeColorDomain = this.props.mark.position.z.field;
if (this.props.mark.style.stroke)
if (this.props.mark.style.stroke.scaleType) {
if (!this.props.mark.style.stroke.domain) {
strokeColorDomain = GetDomain(this.state.data, this.props.mark.style.stroke.field, this.props.mark.style.stroke.scaleType, this.props.mark.style.stroke.startFromZero)
} else
strokeColorDomain = this.props.mark.style.stroke.domain
let strokeColorRange = d3.schemeCategory10;
if (this.props.mark.style.stroke.color)
strokeColorRange = this.props.mark.style.stroke.color;
if (this.props.mark.style.stroke.scaleType === 'ordinal')
strokeColorScale = d3.scaleOrdinal()
.domain(strokeColorDomain)
.range(strokeColorRange)
else {
strokeColorScale = d3.scaleLinear()
.domain(strokeColorDomain)
.range(strokeColorRange)
}
}
let fillColorScale, fillColorDomain = this.props.mark.position.z.field;
if (this.props.mark.style.fill)
if (this.props.mark.style.fill.scaleType) {
if (!this.props.mark.style.fill.domain) {
fillColorDomain = GetDomain(this.state.data, this.props.mark.style.fill.field, this.props.mark.style.fill.scaleType, this.props.mark.style.fill.startFromZero)createColors() {
return d3.scaleOrdinal(d3.schemeCategory10).domain(this.state.data.map(d => d.type));
}
