Public
Edited
Oct 14, 2023
Fork of D3 Shapes
Insert cell
Insert cell
## Lines
Insert cell
lineGen = d3.line()
.x((d,i)=>i)
.y(d=>d)
Insert cell
lineGen([5,3,1,10])
Insert cell
{
const margin = {left:40, right:15, top:15, bottom:35};
const width = 500;
const height = 500;
const graphWidth = width - (margin.left + margin.right);
const graphHeight = height - (margin.top + margin.bottom);

const svg = d3.create("svg")
.attr("viewbox", [0, 0, width, height])
.style("height", `${height}px`)
.style("width", `${width}px`);

const innerGraph = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);

const tree1Data = oranges.filter((d)=>d.tree === 1);
const x = d3.scaleLinear()
.domain([0, d3.max(tree1Data, (d)=>+d.age)])
.range([0, graphWidth])
.nice();

const y = d3.scaleLinear()
.domain([0, d3.max(tree1Data, (d)=>+d.circumference)])
.range([graphHeight, 0])
.nice();


const line = d3.line()
.x(d=>x(d.age))
.y(d=>y(d.circumference))
.curve(d3.curveCardinal);

innerGraph.append("path")
.attr("d", line(tree1Data))
.style("fill", "None")
.style("stroke", "steelblue");


// Draw the axes
const xAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
.call(d3.axisBottom(x));

const yAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(y));

// label the axes
const xLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${width/2}, ${height - 5})`)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name X")

const yLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${margin.left - 30}, ${height/2}) rotate(-90) `)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name Y")

return svg.node();
}
Insert cell
d3.groups(oranges, d=>d.tree)
Insert cell
{
const margin = {left:40, right:15, top:15, bottom:35};
const width = 500;
const height = 500;
const graphWidth = width - (margin.left + margin.right);
const graphHeight = height - (margin.top + margin.bottom);

const svg = d3.create("svg")
.attr("viewbox", [0, 0, width, height])
.style("height", `${height}px`)
.style("width", `${width}px`);

const innerGraph = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);


const x = d3.scaleLinear()
.domain([0, d3.max(oranges, (d)=>+d.age)])
.range([0, graphWidth])
.nice();

const y = d3.scaleLinear()
.domain([0, d3.max(oranges, (d)=>+d.circumference)])
.range([graphHeight, 0])
.nice();

const trees = d3.groups(oranges, d=>d.tree);

const color = d3.scaleOrdinal()
.domain(trees.map(d => d[0]))
.range(d3.schemeCategory10)
.unknown("black");

const line = d3.line()
.x(d=>x(d.age))
.y(d=>y(d.circumference))
.curve(d3.curveCardinal);

innerGraph.selectAll("path")
.data(trees)
.join("path")
.attr("d", d=> line(d[1]))
.style("fill", "None")
.style("stroke", d=>color(d[0]));


// Draw the axes
const xAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
.call(d3.axisBottom(x));

const yAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(y));

// label the axes
const xLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${width/2}, ${height - 5})`)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name X")

const yLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${margin.left - 30}, ${height/2}) rotate(-90) `)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name Y")

return svg.node();
}
Insert cell
Insert cell
{
const margin = {left:40, right:15, top:15, bottom:35};
const width = 800;
const height = 500;
const graphWidth = width - (margin.left + margin.right);
const graphHeight = height - (margin.top + margin.bottom);

const svg = d3.create("svg")
.attr("viewbox", [0, 0, width, height])
.style("height", `${height}px`)
.style("width", `${width}px`);

const innerGraph = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);

const googleStock = stocks.filter((d)=>d.symbol === 'GOOG');
googleStock.forEach((d)=>{
d.date = new Date(d.date);
});



const x = d3.scaleTime()
.domain(d3.extent(googleStock, (d)=>d.date))
.range([0, graphWidth]);

const y = d3.scaleLinear()
.domain([0, d3.max(googleStock, (d)=>+d.price)])
.range([graphHeight, 0])
.nice();


const area = d3.area()
.x(d=>x(d.date))
.y1(d=>y(d.price))
.y0(y(0));

innerGraph.append("path")
.attr("d", area(googleStock))
.style("fill", "lightblue")
.style("stroke", "steelblue");


// Draw the axes
const xAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
.call(d3.axisBottom(x));

const yAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(y));

// label the axes
const xLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${width/2}, ${height - 5})`)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name X")

const yLabel = svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", `translate(${margin.left - 30}, ${height/2}) rotate(-90) `)
.style("font-weight", "bold")
.style("font-size","10px")
.text("Name Y")

return svg.node();
}
Insert cell
Insert cell
d3.pie()([50,15,25,10])
Insert cell
d3.rollups(seattleWeather, v=>v.length, d=>d.weather)
Insert cell
{
const width = 600;
const height = 400;
const margin = {left:120, right:10, top:0, bottom:35};
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.style("height", `${height}px`)
.style("width", `${width}px`);


const weatherTypes = ["sun", "fog","drizzle","rain", "snow"];
const weatherColors = ["gold", "darkgray","paleturquoise", "steelblue", "aliceblue"];
const counts = d3.rollups(seattleWeather, v => v.length, d=>d.weather);
const arcs = d3.pie()
.value(d=>d[1])
.sort((a,b)=> weatherTypes.indexOf(a[0]) - weatherTypes.indexOf(b[0]))
(counts);

const arc = d3.arc()
.innerRadius(0)
.outerRadius(height/3);

const color = d3.scaleOrdinal()
.domain(weatherTypes)
.range(weatherColors)
.unknown("black");

svg.append("g")
.selectAll("path")
.data(arcs)
.join("path")
.attr("d", arc)
.attr("fill", d=> color(d.data[0]))
.append("title")
.text(d=>d.data[0])

const legend = svg.append("g")
.attr("transform", "translate(150, -125)")

const entries = legend.selectAll("g")
.data(color.domain())
.join("g")

entries.append("circle")
.attr("cx", 15)
.attr("cy", (d,i)=> i * 25)
.attr("r", 5)
.attr("fill", d => color(d))

entries.append("text")
.attr("x", 35)
.attr("y", (d,i)=> i * 25)
.text(d=>d);
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more