Published
Edited
Sep 11, 2022
D3 Tutorial_w209_week_3
// RETURNS HTML element
{
const target= html`<svg viewBox= "0 0 ${width} ${height}">
${data_arr.map(
d=>
`<circle cx= "${d.age}" cy= "${d.height_a}" fill="blue" r="2"/>`
)}
</svg>`
return target
}
// creating a function which should be wrapped in {}
data_arr= Array.from({ length: 200}).map((d, i) =>({
age: Math.random() * 90,
height_a: Math.random() * 50,
profession: ["Teacher", "Lawyer", "Pilot"][ Math.floor(Math.random() * 3)]
}))
{
const target= html`<svg id="point" viewBox= "0 0 ${width} ${height}"></svg>`;
// D3 selector
const svg= d3.select(target);
// now creat attributes for the svg
for (let d of data_arr){
svg.append("circle")
.attr("cx", d.age * 5)
.attr("cy", d.height_a * 5)
.attr("r", 6)
.style("fill", "green");
//adding text
svg.append("text")
.attr("x", d.age *5)
.attr("y", d.height_a *5)
.style("fill", "red");
}
return target;
}
data_a= Array.from({ length: 40}).map( d => ({
x: Math.random() * 30,
y: Math.random() * 40
}))
BINDING data with D3 selector for ALL CIRCLEs
using term selectAll and selecting all terms
join will append all circles together by SEARCHING any circle
Using the function d to get the attributes
{
const target= html`<svg viewBox= "0 0 ${width} ${height}"></svg>`
// select the TARGET with SVG element applying
const svg= d3.select(target);
//SCALE LINEAR
const x= d3.scaleLinear()
.domain( [0, 90])
.range([0, width]);
const y= d3.scaleLinear()
.domain([0, 50])
.range([0, height]);
// select all circles and pass DATA
const circles= svg.selectAll("circle")
.data(data_arr)
.join("circle")
.attr("cx", d => x(d.age))
.attr("cy", d => y(d.height_a))
.attr("r", 3);
return target;
}
{
const target= html`<svg viewBox= "0 0 ${width} ${height}"></svg>`
// select the TARGET with SVG element applying
const svg= d3.select(target);
// SVG margin which will be Move around by 'group' element
const margin= { left: 30, right: 40, top: 10, bottom: 20},
iwidth= width - margin.left -margin.right,
iheight= height- margin.top -margin.bottom;
// SVG drawing where we group by element
// PUT all elements inside this CRITERIA
const gDrawing= svg.append("g")
.attr("transform" , `translate( ${margin.left}, ${margin.top})`);
//SCALE LINEAR for x-axis and y-axis
const x= d3.scaleLinear()
.domain( [0, d3.max(data_arr, d=> d.age)])
.range([0, iwidth]);
const y= d3.scaleLinear()
.domain([0, d3.max( data_arr, d => d.height_a)])
.range([iheight, 0]);
// X-axis and Y-axis FEATURES appending inside x and y variables
gDrawing.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${iheight})`)
.call(d3.axisBottom(x));
// Y-axis range using margin
gDrawing.append("g")
.attr("class", "y-axis")
// .attr("transform", `translate( ${margin.left}, 0)`)
.call(d3.axisLeft(y));
// BACKGROUND color by adding RECT as new element
gDrawing.append("rect")
.attr("width", iwidth)
.attr("height", iheight)
.attr("fill", "grey");
// select all circles and pass DATA
const circles= gDrawing.selectAll("circle")
.data(data_arr)
.join("circle")
.attr("cx", d => x(d.age))
.attr("cy", d => y(d.height_a))
.attr("r", 3);
return target;
}
{
const target= html`<svg viewBox= "0 0 ${width} ${height}"></svg>`
// select the TARGET with SVG element applying
const svg= d3.select(target);
////////////////////////////////////
// SVG margin which will be Move around by 'group' element
const margin= { left: 30, right: 40, top: 10, bottom: 20},
iwidth= width - margin.left -margin.right,
iheight= height- margin.top -margin.bottom;
////////////////////////////////////
// SVG drawing where we group by element
// PUT all elements inside this CRITERIA
const gDrawing= svg.append("g")
.attr("transform" , `translate( ${margin.left}, ${margin.top})`);
////////////////////////////////////
//SCALE LINEAR for x-axis and y-axis
const x= d3.scaleLinear()
.domain( [0, d3.max(data_arr, d=> d.age)])
.range([0, iwidth]);
const y= d3.scaleLinear()
.domain([0, d3.max( data_arr, d => d.height_a)])
.range([iheight, 0]);
////////////////////////////////////
// COLOR for CATEOGORICAL attributes
const color= d3.scaleOrdinal()
.domain( Array.from( new Set( data_arr.map( d=> d.profession)).values()))
.range(["steelblue", "salmon", "cyan"]);
////////////////////////////////////
// X-axis and Y-axis FEATURES appending inside x and y variables
gDrawing.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${iheight})`)
.call(d3.axisBottom(x));
// Y-axis range using margin
gDrawing.append("g")
.attr("class", "y-axis")
// .attr("transform", `translate( ${margin.left}, 0)`)
.call(d3.axisLeft(y));
// BACKGROUND color by adding RECT as new element
gDrawing.append("rect")
.attr("width", iwidth)
.attr("height", iheight)
.attr("fill", "grey");
// select all circles and pass DATA
const circles= gDrawing.selectAll("circle")
.data(data_arr)
.join("circle")
.attr("cx", d => x(d.age))
.attr("cy", d => y(d.height_a))
// use color function
.attr("fill", d => color( d.profession))
.attr("r", 3);
return target;
}
// CREATE a new array
colorKeys= Array.from( new Set(data_arr.map( d=> d.profession)).values())
height= 200
d3= require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
