Old school D3 from simpler times

All examples By author By category About

echan7

Full window Github gist

M3js Demo (Bubble)

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
  <title>Please help </title>
   <link rel="stylesheet" type="text/css" href="a3.css">
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
  <script type="text/javascript" src="a3.v1.0.2.js"></script>
  <script src="dimple.v2.3.0.js"></script>

</head>
<body>

<div id="chartContainer">
<div class="chart-wrapper" id="chart-distro2"></div>

<script type="text/javascript">
    var chart2;
    d3.tsv(/*'https://raw.githubusercontent.com/asielen/D3_Reusable_Charts/master/distro_chart/data.csv'*/ 'https://dimplejs.org/data/example_data.tsv' /*train.csv"*/, function(error, data) {
        data.forEach(function (d) {d["Unit Sales Monthly Change"] = +d["Unit Sales Monthly Change"];});
        data.forEach(function (d) {d["Price Monthly Change"] = +d["Price Monthly Change"];});
       data = data.filter(function(d) {return d["Date"] === "01/12/2012"});
        chart2 = a3.plot.setUp({
            data:data,
            xName:'Unit Sales Monthly Change',
            yName:'Price Monthly Change',
            //axisLabels: {xAxis: 'Datesssyyyggg', yAxis: 'Valuessss'},
            selector:"#chart-distro2",
            axisScale: {xAxis: 'linear', yAxis: 'linear'},
            chartSize:{height:560, width:1060},
            axisMargin:25,
            caption: "",
            constrainExtremes:false});
        chart2.renderBubblePlot({
          bubbleVolume: 'Operating Profit',
          colorBy: 'Channel'
        });
    //    chart1.renderDataPlots();
    //    chart1.renderNotchBoxes({showNotchBox:false});
    //    chart2.renderViolinPlot({showViolinPlot:true, bandWidth:20, clamp:0 });
    //    chart2.renderBubblePlot();
    });
      var svg = dimple.newSvg("#chartContainer", 590, 400);
      d3.tsv('https://dimplejs.org/data/example_data.tsv', function (data) {
        data = dimple.filterData(data, "Date", "01/12/2012");
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 500, 330)
        myChart.addMeasureAxis("x", "Unit Sales Monthly Change");
        myChart.addMeasureAxis("y", "Price Monthly Change");
        myChart.addMeasureAxis("z", "Operating Profit");
        myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
        myChart.addLegend(200, 10, 360, 20, "right");
        myChart.draw();
      });
</script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js