{"size": 1672, "ext": "js", "max_stars_repo_path": "f/d3.js/basic.js", "max_stars_repo_name": "m-ahmadi/exref", "max_stars_repo_stars_event_min_datetime": "2019-08-28T16:06:21.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-31T10:36:08.000Z", "max_issues_repo_path": "f/d3.js/basic.js", "max_issues_repo_name": "m-ahmadi/exref", "max_issues_repo_issues_event_min_datetime": "2022-02-23T05:50:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-25T16:56:02.000Z", "max_forks_repo_path": "f/d3.js/basic.js", "max_forks_repo_name": "m-ahmadi/exref", "max_forks_repo_forks_event_min_datetime": "2019-08-28T16:06:23.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-19T20:24:41.000Z"}
{"max_stars_count": 9, "max_issues_count": 1, "max_forks_count": 5, "avg_line_length": 33.44, "max_line_length": 121, "alphanum_fraction": 0.6333732057}
d3.select(selector='body #id .class [attr=value] par>child ...') // prettymuch like jquery

d3.selectAll('p').style('color', 'blue')

d3.select('body').style('background-color', 'black')

var svg = d3.select('#box')

var svg = d3.select('body').append('svg')

var svg = d3.select('body').append('svg')
	.attr('width', 960)
	.attr('height', 500)
	.append('text')
	.attr('y', 10)
	.text('salam olaghe aziz')
	.style('color', 'red')
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// selection function
/*
when data is bound to a selection, each element in the data array is paired with the corresponding node in the selection.
(d, i)
d:  an item from data array bound to the element
i:  index of the element in the selection

data is specified as an array of values
each value is passed as the first argument (d) to selection functions
1st element in data array passed to 1st node in the selection (2nd element to 2nd node & so on)
*/

// randomly color paragraphs:
d3.selectAll('p').style('color', () => `hsl(${Math.random() * 360},100%,50%)`)

// shades of gray for even and odd nodes:
d3.selectAll('p').style('color', (d, i) => i % 2 ? '#fff' : '#eee')

// binding numbers array to paragraphs to set font sizes:
d3.selectAll('p')
  .data([4, 8, 15, 16, 23, 42])
    .style('font-size', d => d + 'px')

// enter and exit selections
// fewer nodes than data: (selection should correspond to data)
// instantiate extra nodes by appending to the enter selection
// 5 paragraphs, 6 data elements (adding 1 paragraph):
d3.select('body')
  .selectAll('p')
  .data([4, 8, 15, 16, 23, 42])
  .enter().append('p')
    .text(d => `I’m number ${d}!`);