Public
Edited
Mar 28, 2023
1 fork
2D Prototypes
chart2 = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "60%")
.style("height", "auto")
.style("font", "4.5px sans-serif")
// .style("text.axis-tick-marks", "7px")
;
svg.append("rect") // background
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "powderblue")
;
svg.append("rect") // rect-A, right
.attr("width", barwidth)
.attr("height", barheight)
.attr("x", centerx)
.attr("y", centery)
.attr("fill", "white")
// .attr("stroke", "ghostwhite")
.attr("fill-opacity", 0.8)
// .attr("stroke-opacity", 0.8)
;
svg.append("rect") // rect-A, left
.attr("width", barwidth)
.attr("height", barheight)
.attr("x", centerx)
.attr("y", centery)
.attr("fill", "white")
// .attr("stroke", "ghostwhite")
.attr("fill-opacity", 0.8)
// .attr("stroke-opacity", 0.8)
.attr("transform", "scale(-1, 1)")
.attr("transform-origin", "center")
;
svg.append("rect") // rect-B, right
.attr("width", 40)
.attr("height", barheight)
.attr("x", centerx)
.attr("y", centery)
.attr("fill", "plum")
;
svg.append("rect") // rect-B, left
.attr("width", 40)
.attr("height", barheight)
.attr("x", centerx)
.attr("y", centery)
.attr("fill", "plum")
.attr("transform", "scale(-1, 1)")
.attr("transform-origin", "center")
;
svg.append("rect") // rect-C, right
.attr("width", 15)
.attr("height", barheight)
.attr("x", centerx)
.attr("y", centery)
.attr("fill", "black")
;
svg.append("rect") // rect-C, left
.attr("width", 15)
.attr("height", barheight)
.attr("x", centerx)
.attr("y", centery)
.attr("fill", "black")
.attr("transform", "scale(-1, 1)")
.attr("transform-origin", "center")
;
svg.append("text")
.style("font", "12px Source Serif Pro")
.attr("x", 10)
.attr("y", 20)
.text("Prototype: 2d section view of 3d form")
;
svg.append("text")
.style("font", "7px Source Serif Pro")
.attr("x", 12)
.attr("y", 30)
.text("visual bootstrap")
;
return svg.node();
}
barheight = 10
barwidth = 100
height = 300
width = 300
centerx = width/2
centery = height/2
padding = 10
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.
