msrtest1

Browse more D3js Examples
<html>
<head>
    <title>Learn D3 in 5 minutes</title>
</head>
<body>

<h3>Today is a beautiful day!!</h3>

<script src='https://d3js.org/d3.v4.min.js'></script>
<ul></ul>
<svg></svg>
<script>
    var fruits = ['apple', 'mango', 'banana', 'orange'];
    d3.select('ul')
        .selectAll('li')
        .data(fruits)
        .enter()
        .append('li')
        .text(function(d) { return d; });
        //Select SVG element
/*var svg = d3.select('svg');
//Create rectangle element inside SVG
svg.append('rect')
   .attr('x', 60)
   .attr('y', 50)
   .attr('width', 200)
   .attr('height', 100)
   .attr('fill', 'yellow');*/
   


 // javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500, svgHeight = 300, barPadding = 30;
var barWidth = (svgWidth / dataset.length);

var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);
    
/*var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
        console.log(d);
         return svgHeight - d 
    })
    .attr("fill","yellow")
    .attr("height", function(d) { 
        return d; 
    })
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d, i) {
        var translate = [barWidth * i, 0]; 
        return "translate("+ translate +") rotate(4)";
    });*/
    var cir=[20]
var circle=svg.selectAll("circle")
.data(dataset)
.enter()
            .append("circle")
           .attr("cx","90")
           .attr("cy","90")
           .attr("r","30")
           .attr("fill","yellow")
           
           

   
</script>
</body>
</html>
msrtest1

Follow

Newsletter
