From df8d623f26cb2e98be492227d79f1a86aa89a2f3 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Thu, 7 Jun 2018 10:44:55 -0700 Subject: [PATCH] Replace orange with sinebow color scheme This is way more legible at the outer edges. --- addon/components/simple-chart-bar.js | 4 ++-- addon/components/simple-chart-cluster.js | 4 ++-- addon/components/simple-chart-donut.js | 4 ++-- addon/components/simple-chart-horz-bar.js | 4 ++-- addon/components/simple-chart-pie.js | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/addon/components/simple-chart-bar.js b/addon/components/simple-chart-bar.js index d019342a..51d55d43 100644 --- a/addon/components/simple-chart-bar.js +++ b/addon/components/simple-chart-bar.js @@ -8,7 +8,7 @@ import { scaleLinear, scaleSequential } from 'd3-scale'; -import { interpolateOranges } from 'd3-scale-chromatic'; +import { interpolateSinebow } from 'd3-scale-chromatic'; import { A } from '@ember/array'; export default Component.extend(ChartProperties, { @@ -23,7 +23,7 @@ export default Component.extend(ChartProperties, { const dataOrArray = data?data:[{data: 1, label: '', empty: true}]; const svg = select(this.element); const values = A(dataOrArray).mapBy('data'); - const color = scaleSequential(interpolateOranges).domain([0, Math.max(...values)]); + const color = scaleSequential(interpolateSinebow).domain([0, Math.max(...values)]); const yScale = scaleLinear() .domain([0, Math.max(...dataOrArray.map(d => d.data))]) diff --git a/addon/components/simple-chart-cluster.js b/addon/components/simple-chart-cluster.js index 79e76327..7be64a7d 100644 --- a/addon/components/simple-chart-cluster.js +++ b/addon/components/simple-chart-cluster.js @@ -6,7 +6,7 @@ import ChartProperties from 'ember-simple-charts/mixins/chart-properties'; import { select } from 'd3-selection'; import { hierarchy, cluster } from 'd3-hierarchy'; -import { interpolateOranges } from 'd3-scale-chromatic'; +import { interpolateSinebow } from 'd3-scale-chromatic'; import { scaleSequential } from 'd3-scale'; export default Component.extend(ChartProperties, { classNames: ['simple-chart-cluster'], @@ -25,7 +25,7 @@ export default Component.extend(ChartProperties, { const clusterLayout = cluster().size([height - 15, width - 15]); const root = hierarchy(data); clusterLayout(root); - const color = scaleSequential(interpolateOranges).domain([0, Math.max(root.height)]); + const color = scaleSequential(interpolateSinebow).domain([0, Math.max(root.height)]); svg.selectAll('.chart').remove(); const chart = svg.append('g') diff --git a/addon/components/simple-chart-donut.js b/addon/components/simple-chart-donut.js index ebaa479d..e0275d4b 100644 --- a/addon/components/simple-chart-donut.js +++ b/addon/components/simple-chart-donut.js @@ -6,7 +6,7 @@ import ChartProperties from 'ember-simple-charts/mixins/chart-properties'; import { select } from 'd3-selection'; import { scaleSequential } from 'd3-scale'; -import { interpolateOranges } from 'd3-scale-chromatic'; +import { interpolateSinebow } from 'd3-scale-chromatic'; import { arc, pie } from 'd3-shape'; import { easeLinear } from 'd3-ease'; import { interpolate } from 'd3-interpolate'; @@ -27,7 +27,7 @@ export default Component.extend(ChartProperties, { const click = get(this, 'click'); const isClickable = get(this, 'isClickable'); const values = A(dataOrArray).mapBy('data'); - const color = scaleSequential(interpolateOranges).domain([0, Math.max(...values)]); + const color = scaleSequential(interpolateSinebow).domain([0, Math.max(...values)]); const donutWidth = width * .2; let createArc = arc().innerRadius(radius - donutWidth).outerRadius(radius); diff --git a/addon/components/simple-chart-horz-bar.js b/addon/components/simple-chart-horz-bar.js index cae30189..3c172c5e 100644 --- a/addon/components/simple-chart-horz-bar.js +++ b/addon/components/simple-chart-horz-bar.js @@ -8,7 +8,7 @@ import { scaleLinear, scaleSequential } from 'd3-scale'; -import { interpolateOranges } from 'd3-scale-chromatic'; +import { interpolateSinebow } from 'd3-scale-chromatic'; import { A } from '@ember/array'; export default Component.extend(ChartProperties, { @@ -23,7 +23,7 @@ export default Component.extend(ChartProperties, { const dataOrArray = data?data:[{data: 1, label: '', empty: true}]; const svg = select(this.element); const values = A(dataOrArray).mapBy('data'); - const color = scaleSequential(interpolateOranges).domain([0, Math.max(...values)]); + const color = scaleSequential(interpolateSinebow).domain([0, Math.max(...values)]); const xScale = scaleLinear() .domain([0, Math.max(...dataOrArray.map(d => d.data))]) diff --git a/addon/components/simple-chart-pie.js b/addon/components/simple-chart-pie.js index d0fa3069..4d4fc12d 100644 --- a/addon/components/simple-chart-pie.js +++ b/addon/components/simple-chart-pie.js @@ -6,7 +6,7 @@ import ChartProperties from 'ember-simple-charts/mixins/chart-properties'; import { select } from 'd3-selection'; import { scaleSequential } from 'd3-scale'; -import { interpolateOranges } from 'd3-scale-chromatic'; +import { interpolateSinebow } from 'd3-scale-chromatic'; import { arc, pie } from 'd3-shape'; import { easeLinear } from 'd3-ease'; import { interpolate } from 'd3-interpolate'; @@ -27,7 +27,7 @@ export default Component.extend(ChartProperties, { const click = get(this, 'click'); const isClickable = get(this, 'isClickable'); const values = A(dataOrArray).mapBy('data'); - const color = scaleSequential(interpolateOranges).domain([0, Math.max(...values)]); + const color = scaleSequential(interpolateSinebow).domain([0, Math.max(...values)]); let createArc = arc().innerRadius(0).outerRadius(radius); let createPie = pie().value(d => d.data).sort(null);