[D3] Basic

Posted on | In |

DOM Select

1
2
3
4
5
6
7
8
d3.select(); // Accept CSS selector
d3.selectAll();

d3.select('h1').style('color', 'red')
    .attr('class', 'heading')
    .text('Updated h1 tag')

d3.select('body').append('p').text('First Paragraph')

Data Binding

1
2
3
4
5
6
7
8
9
var data = [30, 86, 168, 281, 303, 365];

d3.select('body')
  .selectAll('p') // if body doesnt have p, return empty selection
  .data(data) // put data into ready state for processing
  .enter() // take data one by one and perform operations
  .append('p') // create a p element for each data entry
//   .text("data here") // edit text on each 'p' element
  .text(d => d) // a

A single bar chart

1
<svg class="bar-chart"> </svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = (svgWidth / data.length);

var svg = d3.select("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight)

var barChart = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", d => svgHeight - d) // Location of svg
  .attr("height", d => d)
  .attr("width", barWidth - barPadding)
  .attr("transform", (d, i) => {
    var translate = [barWidth * i, 0];
    return "translate(" + translate + ")"
  })

var text = svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .text(d => d)
  .attr("y", (d, i) => svgHeight - d - 2)
  .attr("x", (d, i) => barWidth * i)
  .attr("fill", "#A64C38")

Scale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Create better scaled visualization
var data = [1,2,3,4,5];

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, svgHeight])

var barChart = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", d => svgHeight - yScale(d)) // => change to use scale
  .attr("height", d => yScale(d)) //  change to use scale
  .attr("width", barWidth - barPadding)
  .attr("transform", (d, i) => {
    var translate = [barWidth * i, 0];
    return "translate(" + translate + ")"
  })

Axis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var xScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, svgWidth])

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, svgHeight]);

var x_axis = d3.axisBottom()
  .scale(xScale)

var y_axis = d3.axisLeft()
  .scale(yScale)

svg.append("g")
  .attr("transform", "translate(50, 10)")
  .call(y_axis)

var xAxisTranslate = svgHeight - 20;

svg.append("g")
  .attr("transform", "translate(50, " + xAxisTranslate + ")")
  .call(x_axis)