[D3.js learning record] - Introduction to SVG, use D3 to draw basic graphics

2021.07.29 [Note1] Introduction to SVG

  • Start learning D3 today JS, organize your notes into a blog to record your learning process.
  • The video resource comes from master Xiaokui, the Up Master of station B. He is a senior of Tsinghua University. He seems to use D3 version 5 +, which is very suitable for beginners.
  • At present, the learning strategy is to go through the video (because it is often not long), then go through the official teaching documents, and start doing some visualization projects
  • All reference resources are attached at the end of the article

Introduction to SVG

The difference between svg and jpeg, png

  • Due to the limited pixel expression ability of jpeg and png, distortion will appear after magnification of 100 times.
  • svg operates on a vector graph. No matter how large it is, it will redraw the graph according to the corresponding scale. So whatever the resolution, use D3 JS drawn image will not be distorted

The difference between SVG and Canvas

  • Canvas is based on bitmap. Zooming in will affect the display effect of the picture, while SVG will not.
    SVG is often used in map and other application scenarios that need to be zoomed in / out frequently
  • The images drawn by Canvas are all part of Canvas. You can't use js to obtain the drawn graphic elements. If you want to * * change the position of an element or change, you need to redraw it** In SVG drawing, each graph is inserted into the page in the form of DOM node, which can be operated directly by JS or other methods.

DOM

Document Object Model: operations on parent labels affect child labels

Functional programming

let f = function(a,b){return a+b}  
Equivalent to: const myFunction = (a,b) => a+b

Convert string to numeric value

+('3.14')

Operation on SVG

Tag selection (select() select Id, selectAll() select class and tag)

Hierarchical query (filter child tags by parent tags)

Coordinate system

In d3, the coordinate system used is not a plane rectangular coordinate system, but a Canvas coordinate system

  • Normal graphics: x, y
  • Prototype: cx, cy

Query and assignment of attributes

select().attr('key') // query
select().attr('key','value') // assignment

Scale bar (Essential)

  • The scale bar is used to map the actual data space to the space of the screen
  • Scale bar is very important and will often be transmitted to coordinate axis and data at the same time

How much of real data does a pixel correspond to

Application of scale

const myscale = d3.scaleLinear().domain([data_min,data_max]).range([map_min,map,max]) //  Linear scale
myscale(value)
const myscale2 = d3.scaleBand().domain().range

be careful:

  • The parameter values in domain and range are an array, not two values
  • The array in domain stores the maximum and minimum values in the dataset
  • The array in range stores the maximum and minimum values we want to map

Sample code of this lesson (demo1 basic graphics. html)

<!DOCTYPE html>
<html>
<head>
	<title>firstDemo</title>
	<script src="./js/d3.min.js"></script>
</head>
<body>
	<svg width="1500" height="800" id="mainsvg" class="svgs"></svg>
	<script>
		const data = [
		{name:"AAA",value:56},
		{name:"BBB",value:20},
		{name:"CCC",value:43},
		{name:"DDD",value:15},
		{name:"EEE",value:67},
		{name:"FFF",value:45},
		{name:"GGG",value:31},
		{name:"HHH",value:24},
		{name:"I I I",value:78}
		]

		const svg = d3.select('#mainsvg');

		const width = +svg.attr('width');
		const height = +svg.attr('height');
		const margin = {top:180 ,left:100, right:60, bottom:100};

		const innerWidth = width - margin.left - margin.right; //drawing area 
		const innerHeight = height - margin.top - margin.bottom; // drawing area 

		const xScale = d3.scaleLinear()
		.domain([0,d3.max(data,d => d.value)])
		.range([0,innerWidth]);

		const yScale = d3.scaleBand()
		.domain(data.map( d => d.name ))
		.range([0,innerHeight])
		.padding(0.1);
		//padding: interval

		const yAxis = d3.axisLeft(yScale);
		const xAxis = d3.axisBottom(xScale);

		const g = svg.append('g')
		.attr('id', 'maingroup')
		.attr('transform', `translate(${margin.left} , ${margin.top})`);//``This backquote is a new template string in ES6, not a single quote!
		
		/*
		//The simplest coordinate axis setting method:
		g.append('g').call(yAxis);
		g.append('g').call(xAxis).attr('transform', `translate(0,${innerHeight})`);
		*/

		// General axis settings	
		const yAxisGroup = g.append('g').call(yAxis)
        .attr('id', 'yaxis')
        .append('text')
        .text('Name')
        .attr('font-size', '3em')
        .attr('transform', 'rotate(-90)') // y-axis label needs an additional transform; 
        .attr('x', -innerHeight / 2)
        .attr('y', -50)
        .attr('fill', 'blue')
        const xAxisGroup = g.append('g').call(xAxis)
        .attr('id', 'xaxis')
        .attr('transform', `translate(${0}, ${innerHeight})`)
        .append('text')
        .text('Value')
        .attr('font-size', '3em')
        .attr('x', innerWidth / 2)
        .attr('y', 50)
        .attr('fill', 'blue');


		data.forEach(d => {
			g.append('rect')
			.attr('width',xScale(d.value))
			.attr('height',yScale.bandwidth())
			.attr('fill','green')
			.attr('y', yScale(d.name))
			.attr('opacity',0.8 );
		});
		/**
			width:  Width of rectangle
			height:  Height of rectangle
			fill	: fill color
			y 		: Rectangle position, if not set, the default value is 0; This is equivalent to the y value in maingroup
			x The value does not need to be set. The default value is 0
		*/


		//Sets the axis text size
		d3.selectAll('.tick text').attr('font-size', '2em');

		//Add title
		g.append('text').text('This is my first D3.js demo').attr('font-size','3em')
		.attr('transform', `translate(${innerWidth/2},-10)`)
		.attr('text-anchor', 'middle');

	</script>
</body>
</html>

Visualization effect

Reference

Keywords: html data visualization svg

Added by lupes on Mon, 03 Jan 2022 08:13:45 +0200