SVG and D3 Basics / Jiyuan Lu

Jiyuan Lu

Workspace

Published

Edited

May 23, 2021

Fork of SVG and D3 Basics

svg`<svg width="500" height="100">

</svg>`

svg`<svg width="500" height="100">

</svg>`

svg`<svg width="500" height="100">

</g>

</svg>`

svg`<svg width="500" height="100">

</g>

</svg>`

svg`<svg width="500" height="100">

</svg>`

svg`<svg width="500" height="100">

</svg>`

svg`<svg width="190" height="160">

</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">

<tspan fill="blue">green</tspan>

</text>

</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);

// 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">

</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')

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