<svg width=250 height=250>
<g>
<circle r=30 cx=45 cy=45 fill='#e033f2' stroke='gray' stroke-width = 5></circle>
<line x1=35 x2=95 y1=95 y2=45 stroke='blue' stroke-width = 8></line>
<rect width = 30 height =30 x=65 y=65> </rect>
</g>
</svg>
<svg width=250 height=250>
<g transform=' translate(125, 125) rotate(33, 62.5, 62.5)' >
<circle r=30 cx=45 cy=45 fill='#e033f2' stroke='gray' stroke-width = 5></circle>
<line x1=35 x2=95 y1=95 y2=45 stroke='blue' stroke-width = 8></line>
<rect width = 30 height =30 x=65 y=65> </rect>
</g>
</svg>
<svg width=150 height= 150 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
<svg width=300 height= 300 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
<svg width=150 height= 150 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
<svg width=75 height= 75 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
<svg width=150 height= 150 viewBox="15 15 50 50" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
circle = {
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 100)
svg.append('circle')
.attr('r', 15)
.attr('cx', 50)
.attr('cy', 50)
return svg.node()
}
//draw the line here
line = {
const svg = d3.create("svg")
.attr('width', 100)
.attr('height', 100)
svg.append("line")
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', 100)
.attr('y2', 100)
.attr('stroke','black')
return svg.node()
}
circleRectLine = {
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 100)
svg.append('circle')
.attr('r', 15)
.attr('cx', 50)
.attr('cy', 50)
svg.append('rect')
.attr('width', 30)
.attr('height', 15)
.attr('x', 10)
.attr('y', 20)
svg.append('line')
.attr('x1', 20)
.attr('y1', 55)
.attr('x2', 60)
.attr('y2', 15)
.attr('stroke','black')
return svg.node()
}
circleRectLineG = {
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 100)
const g = svg.append('g')
.attr('transform','translate(30,30)')
.attr('fill', '#4682b4')
g.append('circle')
.attr('r', 15)
.attr('cx', 50)
.attr('cy', 50)
g.append('rect')
.attr('width', 30)
.attr('height', 15)
.attr('x', 10)
.attr('y', 20)
g.append('line')
.attr('x1', 20)
.attr('y1', 55)
.attr('x2', 60)
.attr('y2', 15)
.attr('stroke','black')
return svg.node()
}
//Draw here
triforce = {
const svg = d3.create("svg")
.attr('width', 100)
.attr('height', 100)
svg.append("polygon")
.attr("points", "100,100 0,100 25,50 50,100 75,50 50,0 25,50 75,50")
.attr("fill", "yellow")
.attr("stroke", "brown")
return svg.node()
}
rectArray = [
{val: 40, color: "red"},
{val: 130, color: "blue"},
{val: 75, color: "orange"},
{val: 90, color: "teal"},
{val: 110, color: "purple"}
]
rects = {
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 150)
svg.selectAll('rect')
.data(rectArray)
.join('rect')
.attr('fill', d => d.color)
.attr('width', 20)
.attr('height', d => d.val)
.attr('y', d => 150 - d.val)
.attr('x', (_d,i) => i * (20 +5))
return svg.node()
}
circleArray = [
{r: 5, x: 15, y: 9, color: "springGreen"},
{r: 12, x: 60, y: 16, color: "lightSkyBlue"},
{r: 7, x: 30, y: 68, color: "fuchsia"},
{r: 14, x: 15, y: 120, color: "coral"},
{r: 15, x: 87, y: 100, color: "orange"},
{r: 3, x: 13, y: 27, color: "teal"}
]
// add the bubbles here
bubbles = {
const svg = d3.create('svg')
.attr('width', 120)
.attr('height', 150)
svg.selectAll('circle')
.data(circleArray)
.join('circle')
.attr('fill', d => d.color)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.r)
return svg.node()
}
//use d3 to draw the tri force here
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.
