graphic = {
let w = 500;
let svg = d3.select(DOM.svg(w, w))
.attr('width', w)
.attr('height', w)
var data = [
{"title": "Circle", "shape": d3.symbolCircle},
{"title": "Cross", "shape": d3.symbolCross},
{"title": "Diamond", "shape": d3.symbolDiamond},
{"title": "Square", "shape": d3.symbolSquare},
{"title": "Star", "shape": d3.symbolStar},
{"title": "Triangle", "shape": d3.symbolTriangle},
{"title": "Wye", "shape": d3.symbolWye}
]
var s = svg.selectAll(".shapes")
.data(data)
var sg = s.enter()
.append("g")
.attr("class", "shapes")
.attr("transform", function(d,i) {
return "translate(20, "+ (20 + (i * 30)) + ")"
})
.attr("fill", "black")
.attr("stroke-width", 1)
sg.append("path")
.attr("d", function(d) {return d3.symbol().type(d.shape).size("300")()})
.attr("stroke", "white")
sg.append("text")
.text(function(d) {return d.title; })
.attr("x", 20)
.attr("y", 8)
yield svg.node();
}