Published
Edited
Dec 6, 2021
1 fork
Change in online shopping behaviors
yMargin = 40
height = 400
xMargin = 120
d3 = require("d3@7")
TimeSpentFile = FileAttachment("time_spent@2.csv")
TimeSpentText = TimeSpentFile.text()
TimeSpentData = d3
.csvParse(TimeSpentText, d3.autoType)
.slice(1)
.map((d) => ({ ...d, difference: d[2020] - d[2019] }))
xScale = d3.scaleLinear()
.domain([0, TimeSpentData.length])
.range([0, chartWidth])
yScale = d3
.scaleLinear()
.domain([0, d3.max(TimeSpentData)])
.range([0, chartHeight])
chartWidth = 800;
{
const data = { 20: 100, state: 14, il: 50, ny: 20 };
const state = "ny";
return data[20];
}
chartHeight = 500
Plot = {
const height = 500;
const margin = 20;
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", width)
.attr("fill", "#aaaaaa");
const xScale = d3
.scaleBand()
.domain(TimeSpentData.map((d) => d.Activity))
.range([margin, width - margin * 2])
.paddingInner(0.2);
const yScale = d3
.scaleLinear()
.domain(d3.extent(TimeSpentData, (d) => d.difference))
.range([0, height - margin * 2]);
svg
.selectAll(".bars")
.data(TimeSpentData)
.enter()
.append("rect")
.attr("x", (d) => xScale(d.Activity))
.attr("y", (d) => height - margin - yScale(d.difference))
.attr("width", xScale.bandwidth)
.attr("height", (d) => yScale(d.difference))
.attr("fill", "blue");
// svg
// .append("text")
// .attr("y", 0)
// .attr("x", i * rowHeight + margin + rowHeight)
// .attr("font-size", 8)
// .text(TimeSpentData[i].name);
return svg.node();
}
// map = {
// //create SVG artboard
// const svg = d3.create("svg").attr("width", width).attr("height", height);
// //determine which two data keys from the census we should show
// const visualizationKeys =
// vizTopic == "beforecovid vs aftercovid"
// ? ["", ""]
// : ["", ""];
Inputs.table(TimeSpentData)
TimeSpentData.map(d=>d.Activity)
d3.range(margin,chartHeight-margin,(chartHeight - (margin*2))/(TimeSpentData.length-1)).concat(chartHeight-margin)
margin=30
dbYScale = d3.scaleOrdinal()
.domain(TimeSpentData.map(d=>d.Activity))
.range(d3.range(margin,chartHeight-margin,chartHeight/TimeSpentData.length))
dbXScale = d3.scaleLinear()
.domain([0,10])
.range([margin,width-margin])
Plot2 = {
const height = 500;
const margin = 20;
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", width)
.attr("fill", "#aaaaaa");
svg
.selectAll(".dots2019")
.data(TimeSpentData)
.enter()
.append("circle")
.attr("cx", (d) => dbXScale(d[2019]))
.attr("cy", (d) => dbYScale(d.Activity))
.attr("r", 3)
.attr('class','dots2019')
.attr("fill", "blue")
.on('click',(e,d) => {
Plot2 = {
const height = 500;
const margin = 20;
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", width)
.attr("fill", "#aaaaaa");
svg
.selectAll(".dots2019")
.data(TimeSpentData)
.enter()
.append("circle")
.attr("cx", (d) => dbXScale(d[2019]))
.attr("cy", (d) => dbYScale(d.Activity))
.attr("r", 3)
.attr('class','dots2019')
.attr("fill", "blue")
svg
.selectAll(".dots2020")
.data(TimeSpentData)
.enter()
.append("circle")
.attr("cx", (d) => dbXScale(d[2020]))
.attr("cy", (d) => dbYScale(d.Activity))
.attr('class','dots2020')
.attr("r", 3)
.attr("fill", "red");
svg
.selectAll(".lines")
.data(TimeSpentData)
.enter()
.append("line")
.attr("x1", (d) => dbXScale(d[2019]))
.attr("x2", (d) => dbXScale(d[2020]))
.attr("y1", (d) => dbYScale(d.Activity))
.attr("y2", (d) => dbYScale(d.Activity))
.attr('class','dots2020')
.attr("stroke", "purple");
// svg
// .append("text")
// .attr("y", 0)
// .attr("x", i * rowHeight + margin + rowHeight)
// .attr("font-size", 8)
// .text(TimeSpentData[i].name);
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.
