Introduction to D3 (Day 1) / Clara Everett

Clara Everett

Workspace

Public

Edited

Feb 4, 2023

x = 100

// print the variable you created in the previoxus cell by typing its name here and running the cell

{

// declare and initialize one or more variables here (e.g. let y = 10, const str = "Hello, World!")

let y = 100

}

// what happens if you try to print a variable you created in the block above?

{

// create an array that contains more than one string (e.g. let strArr = ["Jan", "Feb", "Mar", "Apr", "May"])

// print the element in the middle of the array (e.g. return strArr[2])

let strArr = ["Jan", "Feb", "Mar", "Apr", "May"]

return strArr[2]

}

// your code here

pet = ({

name: "Sawyer",

age: 10,

type: "Dog",

breed: "Golden Retriever"

})

function generateRandomNumber(){

return Math.floor(Math.random() * 100); // Math.random() returns a float between 0 and 1

}

function generateNameNumberPairs (names) {

// add code here: initialize an empty array

let data = [];

names.forEach(function (name) {

// add code here: get a random number, store the name and the number in an object,

// and push object into array

data.push({name:name, number: generateRandomNumber()});

});

/****

"Array.forEach" is an iterative method for iterating through the elements of an array

Alternatively, you can use a for loop to iterate through the array

for (let i = 0; i < names.length; i++) {

data.push({name: names[i], number: generateRandomNumber()});

}

****/

return data;

}

// call the above function with a list of names

generateNameNumberPairs(["Kelly", "Jim", "John", "Sam", "Mike"]);

</svg>

</svg>

</svg>

<text x="80" y="20" text-anchor="middle" fill="red">Hello, World!</text>

</svg>

</g>

</svg>

// import D3, version 7

d3 = require('d3@7')

<div id="rainbowCirclesText" style="font-family: Lato, sans-serif">Here's a line of circles</div>

</svg>

</div>

{

let violetCircle = d3.select("#violet");

violetCircle.attr("fill", "purple");

let circles = d3.selectAll(".rainbowCircles"); // what happens if we instead selected using "circle"?

circles.attr("r", 5);

let svg = d3.select("#rainbowCirclesSvg");

svg.style("border", "none");

let str = d3.select("#rainbowCirclesText"); // try printing the text first by returning it in the block

str.text(str.text()+ " in rainbow colors");

}

d3.select("#rainbowCirclesSvg")

.append("circle")

.attr("cx",200)

.attr("cy",15)

.attr("class","rainbowCircles")

.attr("fill","black")

.attr("r",5)

dataset = d3.json("https://raw.githubusercontent.com/vega/vega-datasets/next/data/gapminder.json");

list = {

const ol = d3.create('ol');

ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)

.data(topTenList) // provides the backing data

.join('li') // joins data with the selection, creating 'li' elements as needed

.text(d => `${d.country}: ${d.pop}`) // add formatted text to 'li' elements

return ol.node(); // return the DOM element node of the 'ol' elemenet

}

totalPopData = d3.rollups(dataset, groupedEntries => d3.sum(groupedEntries, d => d.pop), d => d.year);

/* Arrow functions are used here to make the code more concise

The arrow function {d => d.year} is equivalent to writing the following

function (d) {

return d.year;

}

// this step is not necessary, but makes the data more readable

totalPopDataEntries = totalPopData.map(([year, pop]) => {

return {year: year, pop: pop}

});

margin = ({top: 40, right: 20, bottom: 40, left: 100}) // save room for axis labels

svgWidth = 400

svgHeight = 300

width = svgWidth - margin.left - margin.right

height = svgHeight - margin.top - margin.bottom

xScale = d3.scaleBand()

.domain(totalPopDataEntries.map(d => d.year))

.range([0, width])

.padding(0.1); // 0.1 means 10% of the entire band width

xScale(1965) // change this to a different value

yScale = d3.scaleLinear()

.domain([0, d3.max(totalPopDataEntries, d => d.pop)]) // d3.max returns the maximum population value here

.range([height, 0]); // why do we have 0 mapped to height and max population mapped to 0?

yScale(78)

{

// give this svg an id so we can select it outside this cell

const barChart = d3.select(html`<svg id="total-population-bar-chart"></svg>`);

barChart.attr("width", svgWidth);

barChart.attr("height", svgHeight);

// add x-axis

barChart.append("g")

.attr('transform', `translate(${margin.left}, ${height + margin.top})`)

.call(d3.axisBottom(xScale));

// add add y-axis

barChart.append("g")

.attr('transform', `translate(${margin.left}, ${margin.top})`)

.call(d3.axisLeft(yScale));

// add chart title

barChart.append("text")

.attr("x", svgWidth / 2)

.attr("y", 20)

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

.text("Total Population from 1955-2005");

// add x-axis title

barChart.append("text")

.attr("x", (width / 2)+margin.left)

.attr("y", svgHeight - 5)

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

.attr("font-size", "14px")

.text("Year");

// add y-axis title, remember that all transformations are around the (0, 0) origin

barChart.append("text")

.attr("x", -(margin.top + height / 2))

.attr("y", 15)

.attr("transform", "rotate(-90)") // rotate it by -90 degrees

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

.attr("font-size", "14px")

.text("Population");

return barChart.node();

}

{

const barChart = d3.select("#total-population-bar-chart");

// you can ignore the following, it's only done to allow redrawing elements in the Observable notebook

if (!barChart.select(".barGroup").empty()) {

barChart.select(".barGroup").remove()

}

const barGroup = barChart.append("g") // create a group to keep the bars

.attr("class", "barGroup")

.attr("transform", `translate(${margin.left}, ${margin.top})`); // shift all bars by the margin offset

// Add rectangles here by binding the totalPopDataEntries array with rect elements

barGroup.selectAll("rect")

.data(totalPopDataEntries)

.join("rect")

.attr("x", d => xScale(d.year))

.attr("y", d => yScale(d.pop))

.attr("width", xScale.bandwidth())

.attr("height", d => height - yScale(d.pop))

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

}

function drawBarChart (inputArray, chartTitle) {

const barChart = d3.create("svg");

barChart.attr("width", svgWidth);

barChart.attr("height", svgHeight);

// add the x and y axes and their titles here

// add chart title here using the chartTitle parameter

// draw the rectangles here

barChart.append("g")

.attr('transform', `translate(${margin.left}, ${height + margin.top})`)

.call(d3.axisBottom(xScale));

// add add y-axis

barChart.append("g")

.attr('transform', `translate(${margin.left}, ${margin.top})`)

.call(d3.axisLeft(yScale));

// add chart title

barChart.append("text")

.attr("x", svgWidth / 2)

.attr("y", 20)

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

.text(chartTitle);

// add x-axis title

barChart.append("text")

.attr("x", (width / 2)+margin.left)

.attr("y", svgHeight - 5)

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

.attr("font-size", "14px")

.text("Year");

// add y-axis title, remember that all transformations are around the (0, 0) origin

barChart.append("text")

.attr("x", -(margin.top + height / 2))

.attr("y", 15)

.attr("transform", "rotate(-90)") // rotate it by -90 degrees

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

.attr("font-size", "14px")

.text("Population");

const barGroup = barChart.append("g") // create a group to keep the bars

.attr("class", "barGroup")

.attr("transform", `translate(${margin.left}, ${margin.top})`); // shift all bars by the margin offset

barGroup.selectAll("rect")

.data(inputArray)

.join("rect")

.attr("x", d => xScale(d.year))

.attr("y", d => yScale(d.pop))

.attr("width", xScale.bandwidth())

.attr("height", d => height - yScale(d.pop))

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

return barChart.node();

}

drawBarChart(dataset.filter(d => d.country == "United States"), "United States");

yScaleAmerica = d3.scaleLinear()

.domain([0, d3.max(americaData, v => d3.max(v.values, d => d.pop))])

.range([height, 0]);

{

const smallMultiple = d3.select(html`<div id="america-small-multiple"></svg>`);

americaData.forEach(countryEntry => {

drawBarChartAmerica(smallMultiple, /* add code here */, /* add code here */);

})

return smallMultiple.node();

}

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