score:1
if you don't set your domain (i'm assuming you don't), d3 will create the ordinal scale's domain based on the usage:
setting the domain on an ordinal scale is optional if the unknown value is implicit (the default). in this case, the domain will be inferred implicitly from usage by assigning each unique value passed to the scale a new value from the range. (source)
therefore, it's a good idea to explicitly set the domain. since you want that...
the first colours in the array are assigned to the largest x-axis values
...we can sort the data and create a brand
array:
.domain(data.sort((a, b) => b.x1 - a.x1).map(d => d.brand))
pay attention to the fact that sort()
will change your data array in place.
Source: stackoverflow.com
Related Query
- In D3 I'm assigning a colour to a data category using d3.scale.ordinal(). How can I assign it based on value of x-axis?
- Using d3.js, how can I display data faster on my chart?
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How can I apply a time scale and show my data in intervals of "n" years?
- In d3.js, while importing csv files using a row conversion, how can I "slice" the data to only include a range of rows?
- How can I specify a d3.js selector using values from a data object?
- How can I scale my map to fit my svg size with d3 and geojson path data
- How can I group data to be filtered without losing crossfilter functionality using dc.js?
- How can we Sum the data of .csv file columnwise using d3.js
- How can one scale GIS data in d3.js?
- How can i use the data from Hbase to visualize using d3.js
- How much data can be visualized by a brower using JSON file?
- How can create a table with using filter on csv data
- How can I program a line chart using D3.js to visualise a data which is received from a server side ?
- How can I position rotated x-axis labels on column chart using nvd3?
- How can I generate as many colors as I want using d3?
- Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart
- How to import XML data using d3.js?
- How do I create a tree layout using JSON data in d3.v4 - without stratify()
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- how to create labels for data in donut chart using d3.js
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- How can I get "call" to execute for each data element in D3?
- How can I dispatch a 'zoom' event after setting scale (d3, zoom.behavior)
- How can I construct a tree using d3 and its force layout?
- How to update elements of an HTML that the elements are created using data from a CSV file?
- How can I achieve the R kernel density estimate plot using D3.js?
- How to use ordinal scale in d3 to return month names
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How can I connect coordinate points on a map using d3js?
More Query from same tag
- D3 - Transition Arcs in Sunburst Chart
- How can I pass a very long string from one page to another?
- How do I write a forEach statement as a Promise.all
- Creating a swim lane chart using d3
- Integrate Datatables plugin with the help of D3.js
- What is the difference between require('d3') and require('d3-selection')
- How to render dates on x axis prior to 1900 with d3 .js scatter plot
- Does Python has a Scale function like D3?
- Not able to use d3.max
- Avoid unzooming/zooming transition while updating zoom on d3
- d3, updating multiple paths
- c3js, X Axis crushed and badly formated
- create values instead of random data in d3.js
- What is a good way to convert %H:%M:%S strings to timespan?
- Tooltip not working nor displaying on D3 scatter plot
- Formatting data for use with JSON and D3.js
- How does path.bounds() work?
- Cannot import ES6 NPM module directly in to Ember CLI
- Getting d3.js to label "00 02 04..." as "12AM 2AM 4AM..." in d3.scale.linear()
- D3 bubble chart - 'cannot read property 'map' of undefined'
- Data not populating in d3
- d3.js pack layout circles are overlapping
- Selection not updating data
- d3.select.reverse() has no effect
- How to pass key/values to multi-line C3.JS Chart with automated timeseries x-axis?
- Unable to create Manhattan plot with d3
- Why is the vertical scrollbar always visible
- D3.js Brush Controls: getting extent width, coordinates
- How to use log scale to show proper stacked bar chart using d3 JS?
- D3.js use d3.create element can't show in svg tag