chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const bar = svg
.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.style("mix-blend-mode", "multiply")
.attr("x", (d) => x(d.name))
.attr("y", (d) => y(d.value))
.attr("height", (d) => y(0) - y(d.value))
.attr("fill", (d) => d3.interpolateCubehelixDefault(color(d.name)))
.attr("width", x.bandwidth());
const gx = svg.append("g").call(xAxis);
const gy = svg.append("g").call(yAxis);
return Object.assign(svg.node());
}
color = d3
.scaleBand()
.domain(data.map((d) => d.name))
.range([1, 0.5])
x = d3
.scaleBand()
.domain(data.map((d) => d.name))
.range([margin.left, width - margin.right])
.padding(0.5)
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
data = {
let data = [];
for (let i = 3; i < 10; i++) {
data.push({
name: keys[i],
value: Object.values(vizCereals[0])[i]
});
}
return data;
}
keys = Object.keys(vizCereals[0])
cerealNamesList = cereals.map((d) => d.name)
scatterplot = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, heightSp]);
svg
.append("text")
.attr("y", margin.top)
.attr("x", width - marginSp.right * 4)
.attr("text-anchor", "end")
.attr("fill", "currentColor")
.attr("id", "cerealInformation")
.style("font-family", "sans-serif")
.style("font-size", "13px")
.text("Hover on a circle!");
svg
.selectAll(".cerealCircles")
.data(cereals)
.enter()
.append("circle")
// .transition()
// .ease(d3.easeElasticOut)
.attr("cx", (d) => parseFloat(xSpScale(d[xRadio])))
.attr("cy", (d) => parseFloat(ySpScale(d[yRadio])))
.attr("fill", (d) => d3.interpolateYlOrRd(colorScale(d.calories)))
.attr("r", (d) => parseFloat(radScale(d.rating)))
.attr("opacity", 1)
.attr("stroke", "currentColor")
.attr("stroke-width", "0")
.attr("class", "cerealCircles")
.on("mouseover", function (event, d) {
d3.select(this).raise().transition().attr("stroke-width", "2");
d3.select("#cerealInformation").text(d.name + " | " + setMfr(d.mfr));
})
.on("mouseout", function (d) {
d3.select(this).transition().attr("stroke-width", "0");
d3.select("#cerealInformation").text("Hover on a circle!");
});
svg
.append("g")
.attr("transform", `translate(0,${heightSp - margin.bottom})`)
.attr("class", "xAxis")
.call(d3.axisBottom(xSpScale).tickSizeOuter(0));
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.attr("class", "yAxis")
.call(d3.axisLeft(ySpScale))
.call((g) => g.select(".domain").remove());
return svg.node();
}
xSpScale = d3
.scaleLinear()
.domain(d3.extent(cereals, (d) => parseFloat(d[xRadio])))
.range([marginSp.left, width - marginSp.right])
ySpScale = d3
.scaleLinear()
.domain(d3.extent(cereals, (d) => parseFloat(d[yRadio])))
.range([heightSp - margin.bottom, margin.top])
transitions = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, heightSp]);
svg
.append("text")
.attr("y", margin.top)
.attr("x", width - marginSp.right * 4)
.attr("text-anchor", "end")
.attr("fill", "currentColor")
.attr("id", "cerealText")
.style("font-family", "sans-serif")
.style("font-size", "12px")
.text("Hover on a circle!");
svg
.selectAll(".cerealCircles")
.data(cereals)
.enter()
.append("circle")
.attr("cx", (d) => parseFloat(defaultxScale(d.sodium)))
.attr("cy", (d) => parseFloat(defaultyScale(d.potass)))
.attr("fill", (d) => d3.interpolateYlOrRd(colorScale(d.calories)))
.attr("r", (d) => parseFloat(radScale(d.rating)))
.attr("opacity", 1)
.attr("stroke", "currentColor")
.attr("stroke-width", "0")
.attr("class", "cerealCircles")
.on("mouseover", function (event, d) {
d3.select(this).raise().transition().attr("stroke-width", "2");
d3.select("#cerealText").text(d.name + " | " + setMfr(d.mfr));
})
.on("mouseout", function (d) {
d3.select(this).transition().attr("stroke-width", "0");
d3.select("#cerealText").text("Hover on a circle!");
});
svg
.append("g")
.attr("transform", `translate(0,${heightSp - margin.bottom})`)
.attr("class", "xAxis")
.call(d3.axisBottom(defaultxScale).tickSizeOuter(0));
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.attr("class", "yAxis")
.call(d3.axisLeft(defaultyScale))
.call((g) => g.select(".domain").remove());
//X-Axis--------------------------------------------------------------------------
svg
.append("text")
.attr("y", marginSp.top / 2)
.attr("x", margin.left * 2)
.attr("fill", "currentColor")
.style("font-family", "sans-serif")
.style("font-size", "11px")
.text("X-Axis:");
svg
.selectAll(".xMenu")
.data(xMenuSet)
.enter()
.append("text")
.attr("y", (d, i) => ((i + 1) / (xMenuSet.length + 1)) * marginSp.top)
.attr("x", marginSp.left * 3)
.attr("fill", "currentColor")
.attr("stroke", "currentColor")
.attr("stroke-width", 0)
.style("font-family", "sans-serif")
.style("font-size", "11px")
.attr("class", "xMenu")
.attr("id", (d) => d.value)
.text((d) => d.name)
.on("click", function (event, xC) {
d3.selectAll(".xMenu").attr("stroke-width", 0);
d3.select(this).attr("stroke-width", 1);
let cerealScale = d3
.scaleLinear()
.domain(d3.extent(cereals, (d) => parseFloat(d[xC.value])))
.range([marginSp.left, width - marginSp.right]);
d3.selectAll(".cerealCircles")
.transition()
.ease(d3.easeElasticOut)
.duration(1000)
.attr("cx", (d) => cerealScale(parseFloat(d[xC.value])));
svg
.selectAll(".xAxis")
.attr("transform", `translate(0,${heightSp - margin.bottom})`)
.call(d3.axisBottom(cerealScale).tickSizeOuter(0));
});
//Y-Axis--------------------------------------------------------------------------
svg
.append("text")
.attr("y", marginSp.top / 2)
.attr("x", margin.left * 5)
.attr("fill", "currentColor")
.style("font-family", "sans-serif")
.style("font-size", "11px")
.text("Y-Axis:");
svg
.selectAll(".yMenu")
.data(yMenuSet)
.enter()
.append("text")
.attr("y", (d, i) => ((i + 1) / (yMenuSet.length + 1)) * marginSp.top)
.attr("x", marginSp.left * 6)
.attr("fill", "currentColor")
.style("font-family", "sans-serif")
.style("font-size", "11px")
.attr("stroke", "currentColor")
.attr("stroke-width", 0)
.attr("class", "yMenu")
.attr("id", (d) => d.value)
.text((d) => d.name)
.on("click", function (event, yC) {
d3.selectAll(".yMenu").attr("stroke-width", 0);
d3.select(this).attr("stroke-width", 1);
let cerealScale = d3
.scaleLinear()
.domain(d3.extent(cereals, (d) => parseFloat(d[yC.value])))
.range([heightSp - margin.bottom, margin.top]);
d3.selectAll(".cerealCircles")
.transition()
.ease(d3.easeElasticOut)
.duration(1000)
.attr("cy", (d) => cerealScale(parseFloat(d[yC.value])));
svg
.selectAll(".yAxis")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(cerealScale))
.call((g) => g.select(".domain").remove());
});
return svg.node();
}
radScale = d3
.scaleLinear()
.domain(d3.extent(cereals, (d) => parseFloat(d.rating)))
.range([4, 12])
colorScale = d3
.scaleLinear()
.domain(d3.extent(cereals, (d) => parseFloat(d.calories)))
.range([0, 1])
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.
