Public
Edited
May 1, 2023
1 fork
1 star
{
const svg = DOM.svg(1200, 1800);
const yearMinMax = d3.extent(data, (d) => +d.Year);
const circaMinMax = d3.extent(data, (d) => +d.radA);
const circbMinMax = d3.extent(data, (d) => +d.radB);
const circcMinMax = d3.extent(data, (d) => +d.radC);
const xScale = d3.scaleLinear().domain(yearMinMax).range([0, 1200]);
const sizeScale = d3.scaleLinear().domain([0, 100]).range([0.25, 1]);
const background = d3.select(svg)
.append("rect") // background
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "powderblue");
const discDataC = _.map(data, 'radC');
const discDataB = _.map(data, 'radB');
const discDataA = _.map(data, 'radA');
const labelData = _.map(data, 'Year'.replace(',',''));
const discsA = d3.select(svg)
.selectAll('circle.white')
.data(discDataA)
.enter()
.append('circle')
.attr("cy", 175)
// .attr("cx", function(d, i) {return i * 250; })
.attr('transform', (d, i) => `translate(${(i % 5) * 225 + 125},${Math.floor(i / 5) * 250})`)
.attr("r", function(d) { return d; })
.style("fill", "white")
.style("fill-opacity", 0.8)
.attr("class", "white");
const discsB = d3.select(svg)
.selectAll('circle.poc')
.data(discDataB)
.enter()
.append('circle')
.attr("cy", 175)
// .attr("cx", function(d, i) {return i * 250; })
.attr('transform', (d, i) => `translate(${(i % 5) * 225 + 125},${Math.floor(i / 5) * 250})`)
.attr("r", function(d) { return d; })
.style("fill", "plum")
.attr("class", "poc");
const discsC = d3.select(svg)
.selectAll('circle.mixed')
.data(discDataC)
.enter()
.append('circle')
.attr("cy", 175)
// .attr("cx", function(d, i) {return i * 250; })
.attr('transform', (d, i) => `translate(${(i % 5) * 225 + 125},${Math.floor(i / 5) * 250})`)
.attr("r", function(d) { return d; })
.attr("class", "mixed");
const labels = d3.select(svg)
.selectAll('text.year')
.data(labelData)
.enter()
.append("text")
.attr("y", function(d, i) {return Math.floor(i / 5) * 250 + 290})
.attr("x", function(d, i) {return (i % 5) * 225 + 112.5; })
.text(function(d) { return d; })
.style("font", "12px Source Serif Pro")
.attr("class", "year")
;
// const title = d3.select(svg)
// .append("text.title")
// .style("font", "20px Source Serif Pro")
// .attr("x", "500")
// .attr("y", "500")
// .attr("class", "title")
// .text("Prototype: 2d plan view of 3d form")
// ;
// const subtitle = d3.select(svg)
// .append("text.subtitle")
// .style("font", "7px Source Serif Pro")
// .attr("x", 12)
// .attr("y", 30)
// .attr("class", "subtitle")
// .text("visual bootstrap")
// ;
return svg;
}
{
const svg = DOM.svg(550, 600);
const yearMinMax = d3.extent(data, (d) => +d.Year);
const circaMinMax = d3.extent(data, (d) => +d.radA);
const circbMinMax = d3.extent(data, (d) => +d.radB);
const circcMinMax = d3.extent(data, (d) => +d.radC);
const xScale = d3.scaleLinear().domain(yearMinMax).range([0, 1200]);
const sizeScale = d3.scaleLinear().domain([0, 100]).range([0.25, 1]);
const background = d3.select(svg)
.append("rect") // background
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "powderblue");
const discDataC = _.map(data, 'radC');
const discDataB = _.map(data, 'radB');
const discDataA = _.map(data, 'radA');
const labelData = _.map(data, 'Year'.replace(',',''));
const discsA = d3.select(svg)
.selectAll('rect.whiteR')
.data(discDataA)
.enter()
.append('rect')
.attr("width", function(d) { return d; })
.attr("height", 10)
.attr("x", -250)
.attr("y", 100)
// .attr("cx", function(d, i) {return i * 250; })
.attr('transform', (d, i) => `translate(${550},${Math.floor(i) * 15})`)
.style("fill", "white")
.style("fill-opacity", 0.8)
.attr("class", "whiteR");
const discsA2 = d3.select(svg)
.selectAll('rect.whiteL')
.data(discDataA)
.enter()
.append('rect')
.attr("width", function(d) { return d; })
.attr("height", 10)
.attr("x", -250)
.attr("y", 100)
.attr('transform', (d, i) => `translate(${450},${Math.floor(i) * 15})`)
.style("fill", "white")
.style("fill-opacity", 0.8)
.attr("class", "whiteL");
const discsB = d3.select(svg)
.selectAll('rect.pocR')
.data(discDataB)
.enter()
.append('rect')
.attr("width", function(d) { return d; })
.attr("height", 10)
.attr("x", -250)
.attr("y", 100)
// .attr("cx", function(d, i) {return i * 250; })
.attr('transform', (d, i) => `translate(${550},${Math.floor(i) * 15})`)
.style("fill", "plum")
.attr("class", "pocR");
const discsB2 = d3.select(svg)
.selectAll('rect.pocL')
.data(discDataB)
.enter()
.append('rect')
.attr("width", function(d) { return d; })
.attr("height", 10)
.attr("x", -250)
.attr("y", 100)
// .attr("x", 250)
.attr('transform', (d, i) => `translate(${450},${Math.floor(i) * 15})`)
// .attr('transform', `translate(0, -100)`)
// .attr('transform', `scale(-1, 1)`)
// .attr('transform', (d, i) => `translate(100, 0)`)
.style("fill", "plum")
.attr("class", "pocL");
const discsC = d3.select(svg)
.selectAll('rect.mixedR')
.data(discDataC)
.enter()
.append('rect')
.attr("width", function(d) { return d; })
.attr("height", 10)
.attr("x", -250)
.attr("y", 100)
// .attr("cx", function(d, i) {return i * 250; })
.attr('transform', (d, i) => `translate(${550},${Math.floor(i) * 15})`)
.attr("class", "mixedR");
const discsC2 = d3.select(svg)
.selectAll('rect.mixedL')
.data(discDataC)
.enter()
.append('rect')
.attr("width", function(d) { return d; })
.attr("height", 10)
.attr("x", -250)
.attr("y", 100)
// .attr("cx", function(d, i) {return i * 250; })
.attr('transform', (d, i) => `translate(${450},${Math.floor(i) * 15})`)
.attr("class", "mixedL");
const labels = d3.select(svg)
.selectAll('text.year')
.data(labelData)
.enter()
.append("text")
.attr("y", function(d, i) {return Math.floor(i) * 15 + 110})
.attr("x", 150)
.text(function(d) { return d; })
.style("font", "12px Source Serif Pro")
.attr("class", "year")
;
return svg;
}
d3 = require("d3@5")
_ = require('lodash')
data = [
{
"Year": 2023,
"radA": 100,
"radB": 22,
"radC": 11
},
{
"Year": 2022,
"radA": 100,
"radB": 15,
"radC": 8
},
{
"Year": 2021,
"radA": 100,
"radB": 27,
"radC": 9
},
{
"Year": 2020,
"radA": 100,
"radB": 14,
"radC": 8
},
{
"Year": 2019,
"radA": 100,
"radB": 35,
"radC": 9
},
{
"Year": 2018,
"radA": 100,
"radB": 30,
"radC": 8
},
{
"Year": 2017,
"radA": 100,
"radB": 20,
"radC": 8
},
{
"Year": 2016,
"radA": 100,
"radB": 18,
"radC": 6
},
{
"Year": 2015,
"radA": 100,
"radB": 18,
"radC": 6
},
{
"Year": 2014,
"radA": 100,
"radB": 18,
"radC": 6
},
{
"Year": 2013,
"radA": 100,
"radB": 22,
"radC": 6
},
{
"Year": 2012,
"radA": 100,
"radB": 21,
"radC": 6
},
{
"Year": 2011,
"radA": 100,
"radB": 12,
"radC": 4
},
{
"Year": 2010,
"radA": 100,
"radB": 15,
"radC": 5
},
{
"Year": 2009,
"radA": 100,
"radB": 13,
"radC": 5
},
{
"Year": 2008,
"radA": 100,
"radB": 10,
"radC": 4
},
{
"Year": 2007,
"radA": 100,
"radB": 12,
"radC": 3
},
{
"Year": 2006,
"radA": 100,
"radB": 15,
"radC": 4
},
{
"Year": 2005,
"radA": 100,
"radB": 11,
"radC": 3
},
{
"Year": 2004,
"radA": 100,
"radB": 13,
"radC": 3
},
{
"Year": 2003,
"radA": 100,
"radB": 12,
"radC": 2
},
{
"Year": 2002,
"radA": 100,
"radB": 9,
"radC": 3
},
{
"Year": 2001,
"radA": 100,
"radB": 10,
"radC": 3
},
{
"Year": 2000,
"radA": 100,
"radB": 9,
"radC": 2
},
{
"Year": 1999,
"radA": 100,
"radB": 8,
"radC": 2
},
{
"Year": 1998,
"radA": 100,
"radB": 8,
"radC": 2
},
{
"Year": 1997,
"radA": 100,
"radB": 8,
"radC": 2
},
{
"Year": 1996,
"radA": 100,
"radB": 6,
"radC": 2
},
{
"Year": 1995,
"radA": 100,
"radB": 6,
"radC": 1
},
{
"Year": 1994,
"radA": 100,
"radB": 4,
"radC": 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.
