Introduction to D3 (Day 1) / Jasmine Shih

Jasmine Shih

Workspace

Public

Edited

Jan 15

x = 100

// print the variable you created in the previous 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!")

}

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

}

// your code here

pet = ({

})

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: /* add code here */, number: /* add code here */});

});

/****

"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="5" y="20">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(/* add code here */);

//violetCircle.attr(/* add code here */, /* add code here */);

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

//circles.attr(/* add code here */, /* add code here */);

let svg = d3.select(/* add code here */);

//svg.style(/* add code here */, /* add code here */);

let str = d3.select(/* add code here */); // try printing the text first by returning it in the block

//str.text(/* add code here */);

}

//d3.select("#rainbowCirclesSvg")

// .append(/* add code here */)

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(1955) // 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(0)

{

// 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(/* add string here */);

// add x-axis title

/*barChart.append("text")

.attr("x", ?)

.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 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

}

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

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