xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var diameter = 500, //max size of the bubbles
color = d3.schemeCategory20b; //color category
var datos = d3.csv("data.csv", function(d) {
var objeto = {
name : d.name,
alternativename : d.alternativename,
notes : d.notes,
year: +d.primaryvalue+2004,
stolenrecords: d.subcategory,
category: d.category.split(','),
type: d.type,
highlight: (d.highlight!=null && d.highlight!="")? true:false,
stolenrecords: +d.stolenrecords,
sensitivity: +d.sensitivity,
firstsource: d.firstsource,
secondsource: d.secondsource,
thirdsource: d.thirdsource,
sourcename: d.sourcename
}
return objeto;
}, function(d) {
datos = d;
//console.log(datos[1]);
});
console.log(datos[1]);
var svg = d3.select("body")
.append("svg")
.attr("width", diameter)
.attr("height", diameter);
//console.log(datos[0].stolenrecords);
svg.append("circle").attr("cx", 200).attr("cy", 200).attr("r", datos[0].stolenrecords).style("fill", color[5]);
/*
var text = svg.append("text")
.tex
//setup the chart
var bubbles = svg.append("g")
.attr("transform", "translate(0,0)")
.data(data)
.enter().append("circle")
.attr("r", function(d){d.stolenrecords/1000000;})
.attr("cx", function(d){(d.year-2014)*50;})
.attr("cy", 100)
.style("fill", color[3]);
//format the text for each bubble
bubbles.append("text")
.attr("x", (objeto.year-2014)*50 )
.attr("y", 105)
.attr("text-anchor", "middle")
.text(objeto.name)
.style({
"fill":"white",
"font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
"font-size": "12px"
});
*/
//Format attributes
</script>
</body>
https://d3js.org/d3.v4.min.js