Data Scientist 1 @ AstranaHealth
Public
Edited
Oct 6, 2023
<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
</svg>
<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
<circle cx="100" cy="75" r="25" fill="red"/>
</svg>
<svg width="500" height="100">
<g transform="translate(100, -25)">
<circle cx="25" cy="50" r="25" fill="blue"/>
<circle cx="100" cy="75" r="25" fill="red"/>
</g>
</svg>
<svg width="500" height="100">
<g transform="translate(100, -25)" fill="green">
<circle cx="25" cy="50" r="25" />
<circle cx="100" cy="75" r="25" />
</g>
</svg>
<svg width="500" height="100"">
<rect x="10" y="10" width="300" height="20" fill="purple"/>
<rect x="10" y="40" width="250" height="20" fill="brown"/>
<rect x="10" y="70" width="200" height="20" fill="orange"/>
</svg>
<svg width="500" height="100">
<line x1="10" y1="10" x2="500" y2="100" stroke="green" stroke-width="3"/>
<line x1="500" y1="10" x2="10" y2="100" stroke="blue" stroke-width="1" />
</svg>
<svg width="190" height="160">
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
<svg width="500" height="100">
<text text-anchor="start" font-family="monospace" x="250" y="15">Hye Sun Kim</text>
<text text-anchor="middle" font-family="sans-serif" x="250" y="50">Hye Sun Kim</text>
<text text-anchor="end" font-family="serif" x="250" y="85">Hye Sun Kim</text>
</svg>
<svg width="300" height="100">
<text dominant-baseline="baseline" y="50" x="0">Hye Sun Kim</text>
<text dominant-baseline="middle" y="50" x="90">Hye Sun Kim</text>
<text dominant-baseline="hanging" y="50" x="180">Hye Sun Kim</text>
</svg>
{
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
svg.append('circle')
.attr('cx', 25)
.attr('cy', 50)
.attr('r', 25)
.attr('fill', 'blue');
return svg.node();
}
{
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// add a group to the svg element and translate it
const g = svg.append('g')
.attr('transform', 'translate(100, -25)')
.attr('fill', 'green');
// add a circle to the group and set its attributes
g.append('circle')
.attr('cx', 25)
.attr('cy', 50)
.attr('r', 25);
// add another circle to the group and set its attributes
g.append('circle')
.attr('cx', 100)
.attr('cy', 75)
.attr('r', 25)
return svg.node();
}
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// add each rectangle
svg.append('rect')
.attr('x', 10)
.attr('y', 10)
.attr('width', 300)
.attr('height', 20)
.attr('fill', 'purple');
svg.append('rect')
.attr('x', 10)
.attr('y', 40)
.attr('width', 250)
.attr('height', 20)
.attr('fill', 'brown');
return svg.node();
}
circleInfo = [
{
x: 25,
y: 50,
radius: 5
},
{
x: 75,
y: 50,
radius: 10
},
{
x: 125,
y: 50,
radius: 15
},
{
x: 175,
y: 50,
radius: 20
},
{
x: 225,
y: 50,
radius: 25
}
]
height = 100
{
// const svg = d3.create('svg')
// .attr('width', 500)
// .attr('height', height);
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('circle')
.data(circleInfo)
.join('circle')
.attr('fill', 'green')
.attr('cx', circ => circ.x)
.attr('cy', circ => circ.y)
.attr('r', function(circ){
return circ.radius;
});
return svg.node();
}
rectInfo = [
{ xPos: 10, yPos: 10, width: 300, height: 20, color: 'purple' },
{ xPos: 10, yPos: 40, width: 250, height: 20, color: 'brown' },
{ xPos: 10, yPos: 70, width: 200, height: 20, color: 'orange' },
]
{
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
svg.selectAll('rect')
.data(rectInfo)
.join('rect')
.attr('fill', rect => rect.color)
.attr('x', rect => rect.xPos)
.attr('y', rect => rect.yPos)
.attr('width', rect => rect.width)
.attr('height', rect => rect.height);
return svg.node();
}
{
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 300);
const rows = svg.selectAll('g')
.data(circleGrid)
.join('g')
.attr('transform', row => `translate(0, ${row.y})`)
.attr('fill', row => row.color);
rows.append('text')
.attr('font-family', 'sans-serif')
.attr('y', -30)
.text(d => d.label)
rows.selectAll('circle')
.data(row => row.circles)
.join('circle')
.attr('fill', circ => circ.color)
.attr('cx', circ => circ.x)
.attr('r', circ => circ.radius);
return svg.node();
}
d3 = require('d3@7')
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.
