JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<div id="day-of-week-chart" />
<div id="price-chart" />

JavaScript

var chartExample = {
    initChart: function (prices) {
        var dayOfWeekChart = dc.rowChart("#day-of-week-chart");
        var priceChart = dc.lineChart("#price-chart");

        var ndx = crossfilter(prices);

        var dateDimension = ndx.dimension(function (d) {
            return d.dd;
        });
        var dateGroup = dateDimension.group().reduceSum(function (d) {
            return +d.price;
        });
        var dayOfWeek = ndx.dimension(function (d) {
            var day = d.dd.getDay();
            var name = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
            return day + "." + name[day];
        });
        var dayOfWeekAvgGroup = dayOfWeek.group().reduce(

        function (p, v) {
            ++p.days;
            p.total += v.price;
            p.avg = Math.round(p.total / p.days);
            return p;
        },

        function (p, v) {
            --p.days;
            p.total -= v.price;
            p.avg = p.days ? Math.round(p.total / p.days) : 0;
            return p;
        },

        function () {
            return {
                days: 0,
                total: 0,
                avg: 0
            };
        });

        dayOfWeekChart.width(180)
            .height(180)
            .group(dayOfWeekAvgGroup)
            .dimension(dayOfWeek)
            .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
            .valueAccessor(function (d) {
            return d.value.avg;
        })
            .label(function (d) {
            return d.key.split(".")[1];
        })
            .title(function (d) {
            return d.value;
        })
            .elasticX(true)
            .xAxis().ticks(4);
        
        priceChart.width(960)
            .height(150)
            .dimension(dateDimension)
            .group(dateGroup)
            .elasticY(true)
             .x(d3.time.scale().domain(d3.extent(prices, function(d) { return d.dd; })))
            .xAxis();

       ...