Published
Edited
Nov 28, 2018
6 stars
myData = [
{ name:"John", age:37, height:193, img: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainamerica.png"},
{ name:"Mafe", age:36, height:173, img: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_ironman.png"},
{ name:"Santi", age:9, height:120, img: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_hulk.png"},
{ name:"David", age:3, height:70, img: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_wolverine.png"},
{ name:"Sonia", age:73, height:150, img: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_blackwidow.png"},
{ name:"Vicente", age:73, height:189, img: "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_daredevil.png"},
]
{
const svg = d3.select(DOM.svg(width, height));
var node = svg.selectAll("g.node")
.data(myData, function(d) { return d.name; })
var nodeEnter = node.enter()
.append("svg:g")
.attr("class", "node")
var defs = nodeEnter.append("defs");
defs.append('pattern')
.attr("id", function(d) { return "image"+ d.name;} )
.attr("width", 1)
.attr("height", 1)
.append("svg:image")
.attr("xlink:href", function(d) { return d.img;})
.attr("width", 100)
.attr("height", 150);
nodeEnter.append("svg:circle")
.attr("cx", d => xScale(d.height))
.attr("cy", d => yScale(d.age))
.attr("fill",function(d) { return "url(#image"+ d.name +")" } )
.attr("r", 60)
nodeEnter
.append("text")
.attr("x", d => xScale(d.height))
.attr("y", d => yScale(d.age) + 10)
.attr("fill", "white")
.text(d => d.name)
return svg.node();
}
xScale = d3.scaleLinear()
.domain([0, d3.max(myData, d => d.height) ])
.range([50, width - 100])
yScale = d3.scaleLinear()
.domain([0, d3.max(myData, d => d.age)])
.range([height - 50, 50])
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.
