D3 Foundation Knowledge

Shao Zelian, 14 Jun 2025

D3 - Data Driven Document

Example1 - load .csv data.

<div id="container__1"></div>
<script>
	d3.csv('/assets/data/food.csv', function(data){
		return {
			"food": data.Food,
			"deliciousness": data.Deliciousness
		}
	}).then(function(dataset){
		// console.log("dataset", dataset);
		var body = d3.select("#container__1");
		body.selectAll ("p")
			.data(dataset)
			.enter()
			.append("p")
			.text(function(d){
				return d.food;
			}).style("color", function(d){
				return "rgb(0, " + d.deliciousness * 255 + ", 255)";
			})
	});
</script>

Example2 - Draw Circles

<div id="container__2"></div>
<script>
	var dataset2 = [5, 10, 15, 20, 25];
	var w = 500;
	var h= 100;
	var svg = d3.select("#container__2")
		.append("svg")
		.attr("width", w)
		.attr("height", h);
	var circles = svg.selectAll("circle")
		.data(dataset2)
		.enter()
		.append("circle")
		.attr("cx", function(d,i){
			return i * 50 + d * 2;
		}).attr("cy", function(d,i){
			return h/2;
		}).attr("r", function(d,i){
			return d;
		}).attr("fill",function(d){
			return "rgb(" + d*10 + ", 140, 255)"
		})
		.attr("stroke", function(d){
			return "rgb(0, 140, " + d*10 + ")";
		})
		.attr("stroke-width", function(d){
			return d / 5;
		});
</script>

Example3 - Scales functions

Map from an input domain to an output range.

var xScale = d3.scaleLinear()
	.domain([0, d3.max(dataset, function(d){
		return d[0];
	})]).range([0, w]);

Example4 - D3 tree graph