Selections

You can select elements using D3's select and selectAll functions to apply changes or bind data.

d3.select('body').style('background-color', 'mintcream');
d3.selectAll('p').style('color', 'blue');

Data Binding

One of D3's core functionalities is its ability to bind data to the DOM. This means you can attach data to DOM elements and then apply data-driven transformations to the visual elements.

let data = [1, 2, 3, 4, 5];
d3.select('ul')
  .selectAll('li')
  .data(data)
  .enter()
  .append('li')
  .text(function (d) {
    return 'Value: ' + d;
  });

Enter, Update, Exit

To handle the data more granularly, D3 provides three key methods for entering, updating, and exiting nodes:

Enter: To add new nodes for additional data items.
Update: To modify nodes that have data.
Exit: To remove nodes that no longer have data.

d3.selectAll('circle')
  .data([10, 20, 30])
  .enter()
  .append('circle')
  .attr('r', function (d) {
    return d;
  })
  .attr('cx', function (d, i) {
    return i * 100 + 30;
  })
  .attr('cy', 50);

// Updating existing circles
d3.selectAll('circle')
  .data([15, 25])
  .attr('r', function (d) {
    return d;
  });

// Exiting circles
d3.selectAll('circle').data([15]).exit().remove();

Transitions

D3 can animate transitions smoothly by interpolating numbers, colors, sizes, etc., over time, making your visualizations more dynamic and interactive.

d3.selectAll('circle')
  .transition()
  .duration(750)
  .attr('r', 30)
  .style('fill', 'blue');

X Scale

This creates a scale for the horizontal dimension of your chart. It maps the smallest data value (0) to the left edge of the SVG and the largest value (max in your data) to the right edge.

const xScale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, width]);

Y Scale

This creates a scale for the vertical spacing of bars. It divides the SVG into equal parts vertically for each data point, adding some padding between bars for clarity.

const yScale = d3
  .scaleBand()
  .domain(d3.range(data.length))
  .range([0, height])
  .padding(0.1);

SVG

SVG, or Scalable Vector Graphics, is a widely used format for creating two-dimensional graphics.

SVG is favored for its scalability—graphics can be scaled to different sizes without losing quality.

1. SVG Container

SVG graphics are contained within an tag. This tag acts as a container for all SVG elements.

<svg width="500" height="500">
  <!-- SVG elements like circles, rectangles, etc., will go here -->
</svg>

2. Creating Basic Shapes

Circles

To draw a circle, use the element. It requires three attributes: cx, cy, and r.

cx and cy denote the coordinates of the center of the circle relative to the SVG canvas. r is the radius of the circle.

<circle cx="100" cy="100" r="50" fill="red" />

Rectangles

To draw a rectangle, use the element. It requires x, y, width, and height.

x and y specify the top-left corner of the rectangle.
width and height control the size of the rectangle.

Lines

To draw a line, use the element. It requires x1, y1, x2, and y2.

x1 and y1 set the start point of the line. x2 and y2 set the end point.

stroke: Sets the color of the line.
stroke-width: Sets the thickness of the line.

Text

To add text, use the element. It requires x and y attributes to position the text.

<text x="200" y="250" font-family="Arial" font-size="20" fill="black"
  >Hello SVG</text
>

font-family and font-size: Control the styling of the text.
fill: Sets the text color.

rabi-siddique/d3-experiments