Published
Edited
Apr 21, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
swatches({
color: color
})
Insert cell
//Code based on -- https://observablehq.com/@d3/scatterplot
scatterplot = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
//Calls Axes
svg.append("g").call(x_axis);
svg.append("g").call(y_axis);
//X Axis Text
svg
.append("text")
.attr("x", width / 2)
.attr("y", height - 10)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.text(x_variable);
//Y Axis Text
svg
.append("text")
.attr("class", "y label")
.attr("text-anchor", "middle")
.attr("y", 15)
.attr("x", -height / 2)
.attr("transform", "rotate(-90)")
.style("font-family", "Arial")
.text(y_variable);
//Title Text
svg
.append("text")
.attr("x", width / 2)
.attr("y", 40)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.text("Calorie to Protein Content of Major Cereal Brands");
//Render The Circles
const selection = svg.selectAll("circle");
const circles = selection.data(data);
circles
.data(chart_data)
.join(
enter => enter.append("circle"),
update => update,
exit => exit.remove()
)
.transition()
.duration(800)
.attr("cx", d => x_scale(d.x))
.attr("r", 10)
.attr("opacity", 1)
.attr("fill", d => color(d.color))
.attr("cy", d => y_scale(d.y));
return svg.node();
}
Insert cell
swatches({
color: colors2
})
Insert cell
//Code Based On -- https://observablehq.com/@d3/bar-chart
bar_chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
//Render Bar Chart
svg
.selectAll("rect")
.data(chart_data2)
.join(enter => enter.append("rect"))
.attr("x", d => x2_scale(d.x))
.attr("width", x2_scale.bandwidth())
.attr("fill", d => colors2(d.x))
.transition()
.duration(800)
.attr("y", d => y2_scale(d.y))
.attr("height", d => y2_scale(0) - y2_scale(d.y))
.attr("opacity", "0.90");
//Render Axes
svg.append("g").call(x2_axis);
svg.append("g").call(y2_axis);
//X Axis Text
svg
.append("text")
.attr("x", width / 2)
.attr("y", height - 10)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.text(color_variable);
//Y Axis Text
svg
.append("text")
.attr("class", "y label")
.attr("text-anchor", "middle")
.attr("y", 15)
.attr("x", -height / 2)
.attr("transform", "rotate(-90)")
.style("font-family", "Arial")
.text(extra_variable);
//Title Text
svg
.append("text")
.attr("x", width / 2)
.attr("y", 40)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.text("Overall Ranking of Each Major Cereal Brand");
return svg.node();
}
Insert cell
md`## Work`
Insert cell
md `### General Stuff`
Insert cell
data = Object.assign(d3.csvParse(await FileAttachment("cereal2.csv").text()))
Insert cell
height = 400;
Insert cell
x_variable = "calories"
Insert cell
y_variable = "protein"
Insert cell
extra_variable = "rating"
Insert cell
color_variable = "name"
Insert cell
chart_data = {
const data_for_chart = [];
data.map(d => {
if (!isNaN(d[x_variable]) && !isNaN(d[y_variable])) {
data_for_chart.push({
x: parseFloat(d[x_variable]),
y: parseFloat(d[y_variable]),
rank: (d[extra_variable]),
color: d[color_variable]
});
}
});
return data_for_chart;
}
Insert cell
md `### Chart 1`
Insert cell
md`#### Scales`
Insert cell
x_domain = d3.extent(chart_data, d => d.x)
Insert cell
y_domain = d3.extent(chart_data, d => d.y)
Insert cell
color_domain = _.uniqBy(chart_data, d => d.color).map(d => d.color)
Insert cell
x_scale = d3
.scaleLinear()
.domain(x_domain)
.range([margin.left, width - margin.right])
Insert cell
y_scale = d3
.scaleLinear()
.domain(y_domain)
.range([height - margin.bottom, margin.top])
Insert cell
md`#### Axes`
Insert cell
x_axis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom().scale(x_scale))
Insert cell
y_axis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft().scale(y_scale))
Insert cell
//Render X
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(x_axis);
return svg.node();
}
Insert cell
//Render Y
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(y_axis);
return svg.node();
}
Insert cell
color = d3.scaleOrdinal(color_domain, d3.schemeSpectral[10])
Insert cell
swatches({
color: color
})
Insert cell
md`#### Axes`
Insert cell
render_x = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, 80]);
const selection = svg.selectAll("circle");
const circles = selection.data(data);
circles
.data(chart_data)
.join(
enter => enter.append("circle"),
update => update,
exit => exit.remove()
)
.attr("cx", d => x_scale(d.x))
.attr("r", 10)
.attr("opacity", .4)
.attr("cy", d => 40);
return svg.node();
}
Insert cell
render_y = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const selection = svg.selectAll("circle");
const circles = selection.data(data);
circles
.data(chart_data)
.join(
enter => enter.append("circle"),
update => update,
exit => exit.remove()
)
.attr("cx", 40)
.attr("r", 10)
.attr("opacity", .4)
.attr("cy", d => y_scale(d.y));
return svg.node();
}
Insert cell
color_scatter = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const selection = svg.selectAll("circle");
const circles = selection.data(data);
circles
.data(chart_data)
.join(
enter => enter.append("circle"),
update => update,
exit => exit.remove()
)
.attr("cx", d => x_scale(d.x))
.attr("r", 10)
.attr("opacity", 1)
.attr("fill", d => color(d.color))
.attr("cy", d => y_scale(d.y));
return svg.node();
}
Insert cell
md`### Chart 2`
Insert cell
chart_data2 = {
const data_for_chart = [];
data.map(d => {
data_for_chart.push({
x: d.name,
y: parseFloat(d[extra_variable]),
color: "blue"
});
});
return data_for_chart;
}
Insert cell
md`#### Scales`
Insert cell
x2_domain = _.uniqBy(chart_data2, d => d.x).map(d => d.x)
Insert cell
x2_scale = d3
.scaleBand()
.domain(x2_domain)
.range([margin.left, width - margin.right])
.padding(0.1)
Insert cell
y2_domain = [0, d3.max(data, d => d.rating)]
Insert cell
y2_scale = d3
.scaleLinear()
.domain(y2_domain)
.nice()
.range([height - margin.bottom, margin.top])
Insert cell
md`#### Axes`
Insert cell
x2_axis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x2_scale))
Insert cell
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(x2_axis);
return svg.node();
}
Insert cell
y2_axis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft().scale(y2_scale))
Insert cell
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(y2_axis);
return svg.node();
}
Insert cell
colors2 = d3.scaleOrdinal(
_.uniqBy(chart_data2.map(d => d.x)),
d3.schemeCategory10
)
Insert cell
swatches({
color: colors2
})
Insert cell
md`#### Marks`
Insert cell
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.selectAll("rect")
.data(chart_data2)
.join(enter => enter.append("rect"))
.attr("x", d => x2_scale(d.x))
.attr("y", d => 320)
.attr("width", x2_scale.bandwidth())
.attr("height", 50)
.attr("opacity", "0.90");
svg.append("g").call(x2_axis);
return svg.node();
}
Insert cell
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

svg
.selectAll("rect")
.data(chart_data2)
.join(enter => enter.append("rect"))
.attr("x", d => 0)
.attr("y", d => y2_scale(d.y))
.attr("width", 20)
.attr("height", 50)
.attr("opacity", "0.90");
svg.append("g").call(y2_axis);
return svg.node();
}
Insert cell
//Code Based On -- https://observablehq.com/@d3/bar-chart
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
//Render Bar Chart
svg
.selectAll("rect")
.data(chart_data2)
.join(enter => enter.append("rect"))
.attr("x", d => x2_scale(d.x))
.attr("width", x2_scale.bandwidth())
.attr("fill", d => colors2(d.x))
.attr("y", d => y2_scale(d.y))
.attr("height", d => y2_scale(0) - y2_scale(d.y))
.attr("opacity", "0.90");
return svg.node();
}
Insert cell
Insert cell
Insert cell
import { swatches } from "@d3/color-legend"
Insert cell
margin = ({top: 30, right: 0, bottom: 30, left: 40})
Insert cell
d3_format = require("d3-format@1")
Insert cell
import {
render_data_table,
table_styles,
displayImage,
displayCaution
} from "@info474/utilities"
Insert cell
Insert cell
Insert cell
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