d3.js - How to customize the color scale in a D3 line chart? -

apologies super-basic question, i'm grappling simplest thing: how change color of lines, in mike bostock's simple multi-series d3 line chart.

(i know – i'm idiot.) i've spent hours fiddling different solutions, rummaging through d3 documentation , googling furiously, i'm failing horribly. in example chart, mike bostock uses d3's built-in "category10" color scale, per line of code:

var color = d3.scale.category10(); 

but suppose, instead of built-in scale, wanted line austin blue, line new york red, , line san francisco green. should simple enough, right? define custom color scale:

var color = d3.scale.ordinal()     .domain(["new york", "san francisco", "austin"])     .range("#ff0000", "#009933" , "#0000ff"); 

i thought might trick – but turns series black. so... total failure. i'm sure i'm missing obvious here – i'm stuck. i've tried css styling each series appending classes them, didn't work.

apologies lack of jsfiddle query, way, mike bostock's example uses .tsv dataset (as own code based on his), , have no idea @ how create jsfiddle external dataset.

any hugely appreciated.

you're missing square brackets around values in .range() -- takes array argument. code should be

var color = d3.scaleordinal() #d3 version 4   .domain(["new york", "san francisco", "austin"])   .range(["#ff0000", "#009933" , "#0000ff"]); 

complete example here.