-
vizulySeptember 9, 2020 at 11:38 am #12007
Below is a more basic file for the Ring Chart. What is tricky about the ring chart is that each data series has its own objects you need to create – as seen in the
createSeries()
functions. This is demonstrated in the RingChart docs as well – but it doesn’t go too in depth. Anyway – here is the code for the basic example. It still relies on an external data file because there are so many time series data points. If you put this in the directory as the RingChart test container it should work just fine.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vizuly 2.0 - RingChart</title> <!-- vizuly2.specific style sheets --> <link rel="stylesheet" href="lib/styles/vizuly.css"> <script src="lib/d3_v5.7.min.js"></script> <script src="lib/vizuly2_core.min.js"></script> <script src="src/RingChart.js"></script> <script src="data/ringchart_data.js"></script> </head> <body> <!-- Our main content container--> <div id="myDiv" style="width:600px; height:600px; border-radius:10px; margin: 0px auto; margin-top:100px; overflow:hidden;"> </div> <script id="testscript"> var viz = vizuly2.viz.RingChart("#myDiv"); function createSeries(data) { var laTemps = []; var pollution = data.pollution; var calfire = data.calfire; var drought = data.drought; data.temps.forEach(function (d, i) { if (i % 7 == 0) { d.Date = new Date(d.Date); laTemps.push(d); } }) pollution.forEach(function (d) { d.Date = new Date(d.Date); }) calfire.forEach(function (d) { d.StartDate = new Date(d.StartDate); d.EndDate = new Date(d.EndDate); }) drought.forEach(function (d) { d.Date = new Date(d.ValidEnd); }) var tempSeries = { 'data' : laTemps, 'label' : 'Temps', 'x' : function (d, i) { return d.Date; }, 'y' : function (d) { return [d.TempMax] }, 'plotType' : 'BAR_STACKED', 'valueRange' : function (series) { return [d3.min(series.data, function (d, i) { return d3.sum(series.y(d, i))}),d3.max(series.data, function (d, i) { return d3.sum(series.y(d, i))})] }, 'plotRatio' : .35, 'dataTipLabels' : function (d, datum, index) { return [ 'Low: ' + d3.format(',')(Math.round(datum.TempMin)) + '°F', 'High: ' + d3.format(',')(Math.round(datum.TempMax)) + '°F', d3.timeFormat('%b %d, %Y')(datum.Date) ] } }; var pollutionSeries = { 'data' : pollution, 'label' : 'Pollution', 'x' : function (d, i) { return d.Date; }, 'y' : function (d) { return d.AQI; }, 'plotType' : 'LINE_AREA', 'plotRatio' : .2, 'dataTipLabels' : function (d, datum, i) { return ['Particulate: ' + d3.format(',.2f')(datum.PM2_5), 'Air Quality Index: ' + d3.format(',.2f')(datum.AQI), d3.timeFormat('%b %Y')(datum.Date)] } }; var droughtSeries = { 'data' : drought, 'label' : 'Drought', 'x' : function (d, i) { return d.Date; }, 'y' : function (d) { return [d.D0, d.D1, d.D2, d.D3, d.D4]; }, 'plotType' : 'BAR_STACKED', 'valueRange' : function (series) { return [0, d3.max(series.data, function (d, i) { return d3.sum(series.y(d, i)) })] }, 'plotRatio' : .25, 'dataTipLabels' : function (d, datum, index) { return ['No Drought: ' + d3.format(',')(Math.round(datum.None)) + ' Acres', '<div style="text-align:left, width:120px, margin:0px auto">' + 'L0: ' + d3.format(',')(Math.round(datum.D0)) + ' Acres <br>' + 'L1: ' + d3.format(',')(Math.round(datum.D1)) + ' Acres <br>' + 'L2: ' + d3.format(',')(Math.round(datum.D2)) + ' Acres <br>' + 'L3: ' + d3.format(',')(Math.round(datum.D3)) + ' Acres <br>' + 'L4: ' + d3.format(',')(Math.round(datum.D4)) + ' Acres <br>' + '</div>', d3.timeFormat('%b %Y')(datum.Date)] } }; var fireSeries = { 'data' : calfire.filter(function (d) { return d.Acres > 1000 }), 'label' : 'Fires', 'x' : function (d, i) { return d.StartDate; }, 'y' : function (d) { return d.Acres; }, 'valueRange' : function (series) { return [0, d3.max(series.data, function (d, i) { return d.Acres })] }, 'plotType' : 'SCATTER', 'plotRatio' : .21, 'scale' : d3.scalePow().exponent(.5), 'dataTipLabels' : function (d, datum, index) { return [datum.Name + ' Fire', d3.format(',')(datum.Acres) + ' Acres Burned', d3.timeFormat('%b %Y')(datum.StartDate)] } } return [tempSeries, pollutionSeries, droughtSeries, fireSeries]; } var series = createSeries(data); viz.series(series) .margin({top: '10%', left: "10%", right: "10%", bottom: "10%"}) .width('100%') .height('100%') .outerRadius('48%') .innerRadius('25%') .xTickCount(24) .gutterAngle(28) .dateRange(function () { return [new Date("01/01/2000" + ""), new Date("09/01/2018")] }) .style('gutter-fill','#AAA') .style('gutter-fill-opacity',.15) .style('series-label-color','#000') .on('styled',function (d) { viz.selection().selectAll('.x-axis-label').style('font-family','Roboto') }) viz.update(); </script> </body> </html>
You must be logged in to reply to this topic.
© 2024 — vizuly.io