SVG and D3 Basics Practice - Solutions / EBVL

EBVL

Enrico Bertini's Visualization Lab

Workspace

Public

Practice Exercises

Edited

Feb 6

Fork of SVG and D3 Basics Practice

•

1 fork

Importers

</g>

</svg>

{

const svg = d3.create('svg')

.attr('width', 100)

.attr('height', 100);

const g = svg.append('g')

.attr('transform', 'translate(50, 50)');

g.append('circle')

.attr('r', 50)

.attr('fill', 'steelblue');

g.append('text')

.attr('fill', 'white')

.attr('font-size', 50)

.attr('dominant-baseline', 'middle')

.attr('text-anchor', 'middle')

.text('vis');

return svg.node();

}

segments = [

{ x1: 5, y1: 5, x2: 5, y2: 95 },

{ x1: 45, y1: 5, x2: 45, y2: 95 },

{ x1: 5, y1: 50, x2: 45, y2: 50 },

{ x1: 55, y1: 5, x2: 95, y2: 5 },

{ x1: 55, y1: 95, x2: 95, y2: 95 },

{ x1: 75, y1: 5, x2: 75, y2: 95 },

]

{

const svg = d3.create('svg')

.attr('width', 100)

.attr('height', 100);

svg.selectAll('line')

.data(segments)

.join('line')

.attr('x1', d => d.x1)

.attr('x2', d => d.x2)

.attr('y1', d => d.y1)

.attr('y2', d => d.y2)

.attr('stroke', 'black')

return svg.node();

}

widthIris = 640

heightIris = 500

marginIris = ({top: 50, right: 120, bottom: 50, left: 120})

sepalLengthExtent = d3.extent(iris, d => d.sepalLength)

xIris = d3.scaleLinear()

.domain(sepalLengthExtent).nice()

.range([marginIris.left, widthIris - marginIris.right])

sepalWidthExtent = d3.extent(iris, d => d.sepalWidth)

yIris = d3.scaleLinear()

.domain(sepalWidthExtent).nice()

.range([heightIris - marginIris.bottom, marginIris.top])

species = new Set(iris.map(d => d.species))

colorIris = d3.scaleOrdinal()

.domain(species)

.range(d3.schemeCategory10)

xAxisIris = d3.axisBottom(xIris)

yAxisIris = d3.axisLeft(yIris)

scatterplot = {

const svg = d3.create('svg')

.attr('width', widthIris)

.attr('height', heightIris);

// draw the circles in circlesGroup

const circlesGroup = svg.append('g');

circlesGroup.selectAll('circle')

.data(iris)

.join('circle')

.attr('cx', d => xIris(d.sepalLength))

.attr('cy', d => yIris(d.sepalWidth))

.attr('fill', d => colorIris(d.species))

.attr('r', 3);

// create and add axes and axis labels

// for the x-axis, we'll do it in three steps

// first we create a group for the axis and move it to the bottom of the visualization

const xAxisGroup = svg.append('g')

.attr("transform", `translate(0, ${heightIris - marginIris.bottom})`);

// next we use the axis generator to draw the axis in the group

xAxisGroup.call(xAxisIris);

// finally we add an axis label

xAxisGroup.append("text")

.attr("x", widthIris / 2)

.attr("y", 40)

.attr("fill", "black")

.attr("text-anchor", "middle")

.text("sepal length (cm)");

// for the y-axis, we'll do it all together:

svg.append('g')

.attr("transform", `translate(${marginIris.left})`)

.call(yAxisIris)

.append("text")

.attr("x", -40)

.attr("y", heightIris / 2)

.attr("fill", "black")

.attr("dominant-baseline", "middle")

.text("sepal width (cm)");

return svg.node();

}

sites = d3.groupSort(

barley,

group => d3.sum(group, d => d.yield),

d => d.site

).reverse()

varities = d3.groupSort(

barley,

group => d3.sum(group, d => d.yield),

d => d.variety

).reverse()

varietySiteYields = d3.flatRollup(

barley,

group => d3.sum(group, d => d.yield),

d => d.variety,

d => d.site

).map(([variety, site, amount]) => ({variety, site, yield: amount}))

maxYield = d3.max(varietySiteYields, d => d.yield)

cellSize = 60

marginsBarley = ({top: 0, right: 130, bottom: 50, left: 120})

barleyWidth = varities.length * cellSize + marginsBarley.left + marginsBarley.right

barleyHeight = sites.length * cellSize + + marginsBarley.top + marginsBarley.bottom

xBarley = d3.scalePoint()

.domain(varities)

.range([marginsBarley.left, barleyWidth - marginsBarley.right])

.padding(0.5)

yBarley = d3.scalePoint()

.domain(sites)

.range([marginsBarley.top, barleyHeight - marginsBarley.bottom])

.padding(0.5)

maxRadius = cellSize / 2 - 2

radius = d3.scaleSqrt()

.domain([0, maxYield]).nice()

.range([0, maxRadius])

xAxisBarley = d3.axisBottom(xBarley)

yAxisBarley = d3.axisLeft(yBarley)

matrix = {

// set up

const svg = d3.create('svg')

.attr('width', barleyWidth)

.attr('height', barleyHeight);

// draw circles

const matrix = svg.append('g');

// create one circle for each element in varietySiteYields

// set the cx, cy, r, and fill attributes for each circle

matrix.selectAll('circle')

.data(varietySiteYields)

.join('circle')

.attr('cx', d => xBarley(d.variety))

.attr('cy', d => yBarley(d.site))

.attr('r', d => radius(d.yield))

.attr('fill', 'steelblue');

// draw the axes

svg.append('g')

.attr("transform", `translate(0, ${barleyHeight - marginsBarley.bottom})`)

.call(xAxisBarley)

// remove baseline from the axis

.call(g => g.select(".domain").remove())

// add axis label

.append("text")

.attr("x", barleyWidth / 2)

.attr("y", 40)

.attr("fill", "black")

.attr("text-anchor", "middle")

.attr('font-weight', 'bold')

.text("Variety");

svg.append('g')

.attr("transform", `translate(${marginsBarley.left})`)

.call(yAxisBarley)

// remove baseline from axis

.call(g => g.select(".domain").remove())

// add axis label

.append("text")

.attr("x", -marginsBarley.left)

.attr("y", barleyHeight / 2)

.attr("fill", "black")

.attr("dominant-baseline", "middle")

.attr("text-anchor", "start")

.attr('font-weight', 'bold')

.text("Site")

// draw the size legend

svg.append("g").call(sizeLegend);

return svg.node();

}

sizeLegend = g => {

g.attr("transform", `translate(${barleyWidth - marginsBarley.right + 2 * maxRadius},20)`)

.attr("font-family", "sans-serif")

.attr("font-size", 12);

g.append('text')

.attr('font-weight', 'bold')

.text('Yield');

const legend = g.selectAll("g")

.data([40, 80, 120])

.join("g")

.attr("transform", (d, i) => `translate(0, ${(i + 1) * 2 * radius(d)})`);

legend.append("circle")

.attr("r", d => radius(d))

.attr("fill", "steelblue");

legend.append("text")

.attr("x", maxRadius + 5)

.attr("dominant-baseline", "middle")

.text(d => d);

}

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