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="300" height="100">
<text y="50" x="0" dominant-baseline="baseline">baseline</text>
<text y="50" x="90" dominant-baseline="middle">middle</text>
<text y="50" x="180" dominant-baseline="hanging">hanging</text>
</svg>`
svg`<svg width="200" height="100">
<text font-family="monospace" y="50">
<tspan fill="red">red</tspan>
<tspan fill="blue">green</tspan>
<tspan fill="green">blue</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 for Observable 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
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();
}
{
// create our outer SVG element with a size of 500x330 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 330);
// create one group for each row
const rows = svg.selectAll('g')
.data(shapeInfo.rows)
.join('g')
// position each row at the right y-coordinate
.attr('transform', row => `translate(0,${row.y})`);
// add one rectangle to each row
// by default, x and y will be set to 0,
// which is the top left corner of each group.
rows.append('rect')
.attr('width', shapeInfo.rectWidth)
.attr('height', shapeInfo.rectHeight)
.attr('fill', row => row.color);
// add the circles to each row
rows.selectAll('circle')
// do another data join for the circles
.data(row => row.circles)
.join('circle')
.attr('r', shapeInfo.circleRadius)
.attr('cy', shapeInfo.rectHeight / 2)
// now the data passed to each attribute function
// is the data for a circle instead of a row
.attr('cx', circle => circle.x)
.attr('fill', circle => circle.color);
// 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', 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();
}
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', 'brown', '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', 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();
}
d3 = require('d3@6')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.