Published
Edited
Oct 11, 2022
1 fork
D3 Review, Generators, and Layouts
{
const 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", 400).attr("height", 100);
// write your javascript here.
// you should use exactly one .join() to draw the segments
return svg.node();
}
{
const svg = d3.create("svg").attr("width", 400).attr("height", 100);
const group = svg.append("g").attr("transform", "translate(50, 50)");
const data = [
{ x: 0, y: 10 },
{ x: 50, y: 30 },
{ x: 100, y: 10 },
{ x: 150, y: -30 },
{ x: 200, y: 10 }
];
// Write your javascript here.
// It should use single "path" element to draw the line.
// You'll need to use a d3 line generator
return svg.node();
}
{
const data = [
{ os: "Android", share: 82.8 },
{ os: "iOS", share: 13.9 },
{ os: "Win", share: 2.6 },
{ os: "BB", share: 2.6 },
{ os: "", share: 0.3 }
];
const width = 400;
const height = 400;
const radius = Math.min(width, height) / 2 - 10;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const group = svg
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// A color scale for each of the slices
const color = d3
.scaleOrdinal()
.range(["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9"]);
// This creates a pie layout generator.
// It computes the angles to draw a pie chart.
// The .value function tells the generator which attribute to use for the layout.
const pie = d3.pie().value((d) => d.share);
// You can customize the generator further..
// After you get it working, try to change some of the pie's properties.
// pie.padAngle(0.05);
// pie.startAngle(-Math.PI/2)
// pie.endAngle(Math.PI/2);
// Now that we've set up our generator, let's give it our data.
const pieData = pie(data);
// Take a look at the pieData that we'll use to draw the pie chart.
// d3 has computed the necessary info that we can pass to d3.arc()
// See the results of this cell: they have info like startAngle and endAngle
return pieData;
// To draw the slices, we need an arc generator.
// const arc = d3.arc().outerRadius(radius).innerRadius(0);
// Let's test the arc generator, by giving it the first pie slice:
// return arc(pieData[0]);
// With the pie data generator, and the arc path generator, we're
// finally ready to start drawing!
// We'll want a path and a text label for each slice, so first, we'll
// create a group element:
// const groups = group.selectAll("g").data(pieData).join("g");
// Add the path, and use the arc generator to convert the pie data to
// an SVG shape.
//
// groups
// .append("path")
// .attr("d", arc)
// .style("fill", (d) => color(d.data.os)); // While we're at it, let's set the color of the slice using our color scale
// Now let's add a label
// groups
// .append("text")
// .text((d) => d.data.os)
// // We need to move the label to the middle of the slice. Our arc generator
// // is smart enough to know how to do this. Notice that arc.centroid gives us the center of the visible wedge.
// .attr("transform", (d) => "translate(" + arc.centroid(d) + ")")
// .attr("dy", ".35em") // Finally some extra text styling to make it look nice:
// .style("text-anchor", "middle")
// .style("font-size", "10px");
return svg.node();
}
{
// Note: this code currently draws all of the circles on top of each other.
// Fill in the spots below to apply a force-directed layout to the code.
const width = 600;
const height = 600;
const svg = d3.create("svg").attr("width", width).attr("height", height);
// Filter a bit the data -> more than 1 million inhabitants
const data = populations.filter((d) => d.value > 10000000);
// Color palette for continents.
const color = d3
.scaleOrdinal()
.domain(["Asia", "Europe", "Africa", "Oceania", "Americas"])
.range(d3.schemeSet1);
// Size scale for countries
const size = d3.scaleLinear().domain([0, 1400000000]).range([7, 100]); // circle will be between 7 and 100 px wide
// Initialize the circle: all located at the center of the svg area
const nodes = svg
.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", (d) => size(d.value))
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("stroke", "black")
.style("stroke-width", 1)
.style("fill", (d) => color(d.region))
.style("fill-opacity", 0.8);
// Write code here to create a d3 simulation that can compute the layout of the circles.
// A good starting place is this example:
// https://d3-graph-gallery.com/graph/circularpacking_template.html
// After you create a simulation object, uncomment this block of code will
// update the position of nodes on every simulation update:
// simulation.on("tick", () => {
// nodes
// .attr("cx", (d) => {
// return d.x;
// })
// .attr("cy", (d) => {
// return d.y;
// });
// });
return svg.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.
