Notebooks 2.0 is here.

Public
Edited
Dec 4, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof csvfile = Inputs.file({label: "Upload the .csv file", accept: ".csv", required: true})
Insert cell
data= csvfile.csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// import {Legend, Swatches} from "@d3/color-legend"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
color_D2 = d3_v5.scaleOrdinal(d3_v5.quantize(colorType_D2, keys_D2.length))
Insert cell
colorType_D2 = d3.interpolate("rgb(148, 220, 121)", "red")
Insert cell
x0_D2 = d3.scaleBand()
.domain(dataDesign2.dat.map(d => d[groupKey_D2]))
.rangeRound([margin.left, width - margin.right])
.paddingInner(0.15)
Insert cell
x1_D2 = d3.scaleBand()
.domain(keys_D2)
.rangeRound([0, x0_D2.bandwidth()])
.padding(0.05)
Insert cell
y_D2 = d3.scaleLinear()
.domain([0, d3.max(dataDesign2.dat, d => d3.max(keys_D2, key => d[key]))]).nice()
.rangeRound([height - margin.bottom, margin.top])
Insert cell
yAxis_D2 = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y_D2).ticks(null, "s"))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", -10)
.attr("y", -20)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(dataDesign2.y_D2))
Insert cell
xAxis_D2 = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x0_D2).tickSizeOuter(0))
.attr("font-size", xAxisFontSize)
.selectAll("text").call(wrap, x0_D2.bandwidth())
.call(g => g.select(".domain").remove())
Insert cell
groupKey_D2 = dataDesign2.columns[0]
Insert cell
keys_D2 = Object.keys(dataModified[0]).slice(1)
Insert cell
yAxisText_D2 = "Score"
Insert cell
function zoom_D2(svg) {
const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];

svg.call(d3.zoom()
.scaleExtent([1, 8])
.translateExtent(extent)
.extent(extent)
.on("zoom", zoomed));

function zoomed(event) {
x0_D2.range([margin.left, width - margin.right].map(d => event.transform.applyX(d)));
svg.selectAll("rect").data(data.dat)
.attr("x", d => x0_D2(d[groupKey_D2])).attr("width", x0_D2.bandwidth())
// .attr("transform", d => `translate(${x0(d[groupKey])},0)`)
.data(d => keys_D2.map(key => ({key, value: d[key]}))).selectAll("rect")
.attr("x", d => x1_D2(d.key)).attr("width", x1_D2.bandwidth());
svg.selectAll(".x-axis").call(xAxis_D2);
}
}
Insert cell
viewsTotalByCategory = d3.rollup(
data,
v => v.length, //Aggregate by the sum of amount
d => d.category, // group first by name
)
Insert cell
r1=Array.from(viewsTotalByCategory, ([categories, counts]) => {
// result.week = Array.from(counts.values());
// result.week.day= Array.from(counts.keys());
return categories;
})
Insert cell
r2=Array.from(viewsTotalByCategory, ([categories, counts]) => {
// result.week = Array.from(counts.values());
// result.week.day= Array.from(counts.keys());
return counts;
})
Insert cell
viewCountByCategories={const result = {};
for (let index = 0; index < r1.length; ++index) {
result[r1[index]] = r2[index];
}
return result
}
Insert cell
mutable desiredCategory="Music"
Insert cell
arc = d3
.arc()
.innerRadius(0)
.outerRadius(radius)
Insert cell
colorSeq = d3_v5
.scaleSequential()
.domain([0, pieData.length])
.interpolator(d3_v5.interpolateRainbow)
Insert cell
Insert cell
d3_v5 = require("d3@5")
Insert cell
d4 = require("d3@6")
Insert cell
pie = d3.pie().value(d => d.value)
Insert cell
labelHeight = 18
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
desiredCategory
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
textPieChart1 = "Category:" + hoverCategory
Insert cell
textPieChart2 = "; No of Videos: " + viewCountByCategories[hoverCategory];
Insert cell
mutable colorTemp = "";
Insert cell
Insert cell
onMouseOver = function(d, i) {
mutable colorTemp = colorSeq(d.index);
d3.select(this).attr('style', 'fill: pink;');
mutable hoverCategory = d.data.key
d3_v5.select(this).style("cursor", "pointer");
// d3.select("#toptext").text(`Category: ${i.category}`);
// d3.select("#toptext").text(`No Of Videos: ${viewCountByCategories[hoverCategory]}`);
}

Insert cell
legend_D2 = svg => {
const g = svg
.attr("transform", `translate(${width-legendDistanceFromRight},${margin.top})`)
.attr("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("font-size", legendTextSize)
.selectAll("g")
.data(color_D2.domain().slice().reverse())
.join("g")
.attr("transform", (d, i) => `translate(0,${i * 20})`);

g.append("rect")
.attr("x", -19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", color_D2);

g.append("text")
.attr("x", -24)
.attr("y", 9.5)
.attr("dy", "0.35em")
.text(d => d);
}
Insert cell
titleText_D2 = "Likes vs Dislikes over a period of Time for Category: " + desiredCategory
Insert cell
width
Insert cell
Insert cell
Insert cell
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