Published
Edited
Jan 27, 2021
1 fork
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
let svg, xAxis, yAxis, title;
if (!this) {
//Create the svg
svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);

// Append the x axis
xAxis = svg
.append("g")
.attr("class", "xaxis")
.attr("transform", `translate(0,${height - margin.bottom})`);

// Append the y axis
yAxis = svg
.append("g")
.attr("class", "yaxis")
.attr("transform", `translate(${margin.left},0)`);

// Append the title
title = svg
.append("text")
.attr("class", "chart_title")
.attr("transform", `translate(${width / 2},15)`)
.style("text-anchor", "middle");
}
// Otherwise, define the svg as the cell's value and select the axes and title
else {
svg = d3.select(this);
xAxis = svg.select(".xaxis");
yAxis = svg.select(".yaxis");
title = svg.select(".chart_title");
}
// Update titles and axes
xAxis.call(xAxisFn);
yAxis.call(yAxisFn);
title.text("Chart title");

return svg.node();
}
Insert cell
Insert cell
x = d3.scaleLinear()
.domain([0, 1])
.range([margin.left, width - margin.right])
Insert cell
y = d3.scaleLinear()
.domain([0, 1])
.range([height - margin.bottom, margin.top])
Insert cell
Insert cell
xAxisFn = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
Insert cell
yAxisFn = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
margin = ({top: 20, right: 30, bottom: 30, left: 40})
Insert cell
height = 500
Insert cell
import {
render_data_table,
group_notebook_instructions,
table_styles
} from "@uw-info474/utilities"
Insert cell
data = await d3.csv("https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-04-14/rankings.csv")
Insert cell
table_styles
Insert cell

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