The avatar for @sz-makes-things
Stephanie Zeil
Public
Edited
Feb 6, 2023
Fork of SVG and D3 Basics
Insert cell
Insert cell
Insert cell
svg`<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
</svg>`
Insert cell
Insert cell
Insert cell
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>`
Insert cell
Insert cell
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>`
Insert cell
Insert cell
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>`
Insert cell
Insert cell
Insert cell
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>`
Insert cell
Insert cell
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>`
Insert cell
Insert cell
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>`
Insert cell
Insert cell
Insert cell
Insert cell
svg`<svg width="500" height="100">
<text text-anchor="start" font-family="monospace" x="250" y="15">align start</text>
<text text-anchor="middle" font-family="sans-serif" x="250" y="50">align middle</text>
<text text-anchor="end" font-family="serif" x="250" y="85">align end</text>
</svg>`
Insert cell
Insert cell
svg`<svg width="300" height="100">
<text dominant-baseline="baseline" y="50" x="0">baseline</text>
<text dominant-baseline="middle" y="50" x="90">middle</text>
<text dominant-baseline="hanging" y="50" x="180">hanging</text>
</svg>`
Insert cell
Insert cell
svg`<svg width="200" height="100">
<text font-family="monospace" y="50">
<tspan fill="red">one</tspan>
<tspan fill="blue">two</tspan>
<tspan fill="green">three</tspan>
</text>
</svg>`
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
svg`<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
</svg>`
Insert cell
{
// 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 one circle to the svg element and set its attributes
svg.append('circle')
.attr('cx', 25)
.attr('cy', 50)
.attr('r', 25)
.attr('fill', 'blue');
// return the outer SVG element for Observable to render it
return svg.node();
}
Insert cell
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>`
Insert cell
{
// 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 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 the outer SVG element for Observable to render it
return svg.node();
}
Insert cell
Insert cell
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>`
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// create one circle for each element in circleInfo
svg.selectAll('circle')
.data(circleInfo)
.join('circle')
// set the attributes for the circles based on the data
.attr('fill', 'green')
.attr('cx', circ => circ.x)
.attr('cy', circ => circ.y)
// this function syntax works too
// it behaves the same as the above arrow functions
.attr('r', function (circ) {
return circ.radius;
});
// return the outer SVG element in order to render it
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
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' },
]
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// create our outer SVG element and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 300);
// create one group for each row of circles
const rows = svg.selectAll('g')
.data(circleGrid)
.join('g')
// set the y position and color for each row
.attr('transform', row => `translate(0,${row.y})`)
.attr('fill', row => row.color);
// add one text label to each row
rows.append('text')
.attr('font-family', 'sans-serif')
.attr('y', -30)
.text(d => d.label)
// we need to do another data join to add the circles for each row
rows.selectAll('circle')
// row.circles contains the array circles for the row
.data(row => row.circles)
.join('circle')
.attr('fill', circ => circ.color)
.attr('cx', circ => circ.x)
.attr('r', circ => circ.radius);
// return the outer SVG element in order to render it
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
linearScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 100])
Insert cell
linearScale(0)
Insert cell
linearScale(2.5)
Insert cell
linearScale(7.5)
Insert cell
linearScale(10)
Insert cell
Insert cell
fahrenheitToCelsius = d3.scaleLinear()
.domain([32, 212])
.range([0, 100])
Insert cell
fahrenheitToCelsius(32)
Insert cell
fahrenheitToCelsius(75)
Insert cell
fahrenheitToCelsius(212)
Insert cell
Insert cell
scores = [
{name: 'Brian', score: 90},
{name: 'Taylor', score: 80},
{name: 'Kelly', score: 70},
{name: 'Jane', score: 45},
{name: 'Joe', score: 30},
]
Insert cell
Insert cell
Insert cell
Insert cell
maxScore = d3.max(scores, d => d.score)
Insert cell
Insert cell
x = d3.scaleLinear()
.domain([0, maxScore])
.range([0, width])
Insert cell
x(0)
Insert cell
x(maxScore / 2)
Insert cell
x(maxScore)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
y = d3.scaleBand()
.domain(names)
.range([0, height])
.padding(0.2)
Insert cell
Insert cell
y("Brian")
Insert cell
y("Kelly")
Insert cell
y("Joe")
Insert cell
Insert cell
y.bandwidth()
Insert cell
Insert cell
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);

// create one bar for each element in scores
const bars = svg.selectAll('rect')
.data(scores)
.join('rect')
// set the attributes for the rects
.attr('fill', 'steelblue')
.attr('x', 0)
.attr('y', d => 0) // EDIT THIS LINE
.attr('width', d => 0) // EDIT THIS LINE
.attr('height', 0); // EDIT THIS LINE

// return the outer SVG element in order to render it
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ordinalScale = d3.scaleOrdinal()
.domain(['one', 'two', 'three'])
.range([1, 2, 3])
Insert cell
ordinalScale('one')
Insert cell
ordinalScale('two')
Insert cell
ordinalScale('three')
Insert cell
Insert cell
names
Insert cell
d3.schemeCategory10
Insert cell
ordinalColor = d3.scaleOrdinal()
.domain(names)
.range(d3.schemeCategory10)
Insert cell
Insert cell
import {swatches} from "@d3/color-legend"
Insert cell
swatches({ color: ordinalColor})
Insert cell
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);

// create one bar for each element in scores
const circles = svg.selectAll('rect')
.data(scores)
.join('rect')
// set the attributes for the rects
.attr('fill', d => 'steelblue') // EDIT THIS LINE
.attr('x', 0)
.attr('y', d => y(d.name))
.attr('width', d => x(d.score))
.attr('height', y.bandwidth())

// return the outer SVG element in order to render it
return svg.node();
}
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