svg`<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
</svg>`
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`<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`<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`<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`<svg width="500" height="100">
<line x1="10" y1="10" x2="500" y2="100" stroke="green" />
<line x1="500" y1="10" x2="10" y2="100" stroke="blue" />
</svg>`
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`<svg width="500" height="100">
<text font-family="monospace" text-anchor="start" x="250" y="15">align start</text>
<text font-family="sans-serif" text-anchor="middle" x="250" y="50">align middle</text>
<text font-family="serif" text-anchor="end" x="250" y="85">align end</text>
</svg>`
svg`<svg width="500" height="100">
<text font-family="monospace" y="50">
<tspan dominant-baseline="baseline" fill="red">baseline</tspan>
<tspan dominant-baseline="middle" fill="blue">middle</tspan>
<tspan dominant-baseline="hanging" fill="green">hanging</tspan>
</text>
</svg>`
// write your answer here
// write your answer here
// write your answer here
{
// 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 circle and set its attributes
svg.append('circle')
.attr('cx', 25)
.attr('cy', 50)
.attr('r', 25)
.attr('fill', 'blue');
// return the outer SVG element to render it
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);
// create our group and position 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 to render it
return svg.node();
}
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>`
// write your answer here
{
// 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
const circles = svg.selectAll('circle')
.data(circleInfo)
.join('circle')
// set the attributes for the circles
.attr('fill', 'green')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', function (d) {
return d.radius;
});
// return the outer SVG element in order to render it
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' },
]
// write your answer here
linearScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 100])
linearScale(0)
linearScale(2.5)
linearScale(7.5)
linearScale(10)
fahrenheitToCelsius = d3.scaleLinear()
.domain([32, 212])
.range([0, 100])
fahrenheitToCelsius(32)
fahrenheitToCelsius(75)
fahrenheitToCelsius(212)
y = d3.scaleBand()
.domain(names)
.range([0, height])
.padding(0.2)
y("Brian")
y("Kelly")
y("Joe")
y.bandwidth()
maxScore = d3.max(scores, d => d.score)
x = d3.scaleLinear()
.domain([0, maxScore])
.range([0, width])
{
// 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', 0) // EDIT THIS LINE
.attr('width', 0) // EDIT THIS LINE
.attr('height', 0) // EDIT THIS LINE
// return the outer SVG element in order to render it
return svg.node();
}
ordinalScale = d3.scaleOrdinal()
.domain(['one', 'two', 'three'])
.range([1, 2, 3])
ordinalScale('one')
ordinalScale('two')
ordinalScale('three')
names
color = d3.scaleOrdinal()
.domain(names)
.range(['red', 'blue', 'green', 'pink', 'purple'])
{
// 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', '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();
}
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.
