dc.js stocks example

2c:null 2d:["$","title",null,{"children":"Full Observable Implementation og Nasdaq stock example of dc.js tutorial | cocomil | Observable"}] 32:Tb40,grid = htl.html` dc.js stocks example

Nasdaq 100 Index 1985/11/01-2012/06/29

Yearly Performance (radius: fluctuation/index ratio, color: gain/loss)

Days by Gain/Loss

Quarters

Day of Week

Days by Fluctuation(%)

Monthly Index Abs Move & Volume/500,000 Chart

select a time range to zoom in

selected out of records |

`33:Ta97,function yearlyBubbleChartFit() { const yearlyDimension = ndx.dimension((d) => d3.timeYear(d.dd).getFullYear()); const yearlyPerformanceGroup = yearlyDimension.group().reduce( (p, v) => { ++p.count; p.absGain += v.close - v.open; p.fluctuation += Math.abs(v.close - v.open); p.sumIndex += (v.open + v.close) / 2; p.avgIndex = p.sumIndex / p.count; p.percentageGain = p.avgIndex ? (p.absGain / p.avgIndex) * 100 : 0; p.fluctuationPercentage = p.avgIndex ? (p.fluctuation / p.avgIndex) * 100 : 0; // console.log(p); return p; }, /* callback for when data is removed from the current filter results */ (p, v) => { --p.count; p.absGain -= v.close - v.open; p.fluctuation -= Math.abs(v.close - v.open); p.sumIndex -= (v.open + v.close) / 2; p.avgIndex = p.count ? p.sumIndex / p.count : 0; p.percentageGain = p.avgIndex ? (p.absGain / p.avgIndex) * 100 : 0; p.fluctuationPercentage = p.avgIndex ? (p.fluctuation / p.avgIndex) * 100 : 0; // console.log(p); return p; }, /* initialize p */ () => ({ count: 0, absGain: 0, fluctuation: 0, fluctuationPercentage: 0, sumIndex: 0, avgIndex: 0, percentageGain: 0 }) ); const yearlyBubbleChartFit = new dc.BubbleChart("#yearly-bubble-chart") .width(990) .height(250) .transitionDuration(1500) .margins({ top: 10, right: 50, bottom: 30, left: 40 }) .dimension(yearlyDimension) .group(yearlyPerformanceGroup) .colors(d3.schemeRdYlGn[9]) .colorDomain([-500, 500]) .colorAccessor((d) => d.value.absGain) .keyAccessor((p) => p.value.absGain) .valueAccessor((p) => p.value.percentageGain) .radiusValueAccessor((p) => p.value.fluctuationPercentage) .maxBubbleRelativeSize(0.3) .x(d3.scaleLinear().domain([-2500, 2500])) .y(d3.scaleLinear().domain([-100, 100])) .r(d3.scaleLinear().domain([0, 4000])) .elasticY(true) .elasticX(true) .yAxisPadding(100) .xAxisPadding(500) .renderHorizontalGridLines(true) .renderVerticalGridLines(true) .xAxisLabel("Index Gain") .yAxisLabel("Index Gain %") .renderLabel(true) .label((p) => p.key) .renderTitle(true) .title((p) => [ p.key, `Index Gain: ${numberFormat(p.value.absGain)}`, `Index Gain in Percentage: ${numberFormat(p.value.percentageGain)}%`, `Fluctuation / Index Ratio: ${numberFormat( p.value.fluctuationPercentage )}%` ].join("\n") ); yearlyBubbleChartFit.yAxis().tickFormat((v) => `${v}%`); return yearlyBubbleChartFit }34:T8e7,function moveChartFit() { const moveMonths = ndx.dimension((d) => d.month); const monthlyMoveGroup = moveMonths .group() .reduceSum((d) => Math.abs(d.close - d.open)); const volumeByMonthGroup = moveMonths .group() .reduceSum((d) => d.volume / 500000); const indexAvgByMonthGroup = moveMonths.group().reduce( (p, v) => { ++p.days; p.total += (v.open + v.close) / 2; p.avg = Math.round(p.total / p.days); return p; }, (p, v) => { --p.days; p.total -= (v.open + v.close) / 2; p.avg = p.days ? Math.round(p.total / p.days) : 0; return p; }, () => ({ days: 0, total: 0, avg: 0 }) ); const volumeChart = new dc.BarChart("#monthly-volume-chart"); const moveChart = new dc.LineChart( "#monthly-move-chart" ) /* dc.lineChart('#monthly-move-chart', 'chartGroup') */ .renderArea(true) .width(990) .height(200) .transitionDuration(1000) .margins({ top: 30, right: 50, bottom: 25, left: 40 }) .dimension(moveMonths) .mouseZoomable(true) .rangeChart(volumeChart) .x(d3.scaleTime().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)])) .round(d3.timeMonth.round) .xUnits(d3.timeMonths) .elasticY(true) .renderHorizontalGridLines(true) .legend(new dc.Legend().x(800).y(10).itemHeight(13).gap(5)) .brushOn(false) // 枠を囲んで選択するのを無効化 .group(indexAvgByMonthGroup, "Monthly Index Average") .valueAccessor((d) => d.value.avg) .stack(monthlyMoveGroup, "Monthly Index Move", (d) => d.value) .title((d) => { let value = d.value.avg ? d.value.avg : d.value; if (isNaN(value)) { value = 0; } return `${dateFormat(d.key)}\n${numberFormat(value)}`; }); const volumeChartFit = volumeChart .width(990) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */ .height(40) .margins({ top: 0, right: 50, bottom: 20, left: 40 }) .dimension(moveMonths) .group(volumeByMonthGroup) .centerBar(true) .gap(1) .x(d3.scaleTime().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)])) .round(d3.timeMonth.round) .alwaysUseRounding(true) .xUnits(d3.timeMonths); return { moveChart: moveChart, volumeChart: volumeChartFit }; }35:[{"id":"ff26ed2c982fd1d95752d7dee009ae22c70a8dd1ff73f0a59cced242c1949b44677b1e3d0dbfa39ddae3d0e501710f68b98dfeb8108d89c823ef81e3828eadad","href":"https://static.observableusercontent.com/files/ff26ed2c982fd1d95752d7dee009ae22c70a8dd1ff73f0a59cced242c1949b44677b1e3d0dbfa39ddae3d0e501710f68b98dfeb8108d89c823ef81e3828eadad","name":"ndx.csv","type":"text/csv","lastModified":1638255959358.813,"size":347228}] 30:{"id":"8bcaa99e98a797af","slug":"dcjs-nasdaq","title":"Full Observable Implementation og Nasdaq stock example of dc.js tutorial","thumbnail":"f81c91e76ef721f61d2df4cdb10f9cb439ac476af729e8566e914431214606f1","access_level":"public","create_time":"$D2021-11-30T07:05:59.358Z","update_time":"$D2021-12-08T05:55:04.487Z","view_time":null,"first_public_time":"$D2021-12-08T05:54:37.715Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"123e7ab19a024212","login":"kentarotakahira","name":"cocomil","avatar_url":"https://avatars-next.observableusercontent.com/97793ebcf9ff466dcbb2d03e3115ecfd997ead4c7dec172298d777c1e5321d5b","tier":"starter_2024","bio":"Data Scientist based on Tokyo. \nHere I'm experimenting and exploring interesting dataset and viz tools. "},"version":521,"publish_version":521,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b1718a1b6a87f62","login":"kentarotakahira","name":"cocomil","avatar_url":"https://avatars-next.observableusercontent.com/97793ebcf9ff466dcbb2d03e3115ecfd997ead4c7dec172298d777c1e5321d5b","tier":null,"bio":"Data Scientist based on Tokyo. \nHere I'm experimenting and exploring interesting dataset and viz tools. "}],"members":[{"type":"individual","id":"3b1718a1b6a87f62","login":"kentarotakahira","name":"cocomil","avatar_url":"https://avatars-next.observableusercontent.com/97793ebcf9ff466dcbb2d03e3115ecfd997ead4c7dec172298d777c1e5321d5b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Full Observable Implementation og Nasdaq stock example of dc.js tutorial","cells":[{"id":471,"value":"# Full Observable Implementation og Nasdaq stock example of dc.js tutorial","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"mutable clicks = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"update(\n yearlyBubbleChart,\n gainOrLossChart,\n quarterChart,\n dayOfWeekChart,\n fluctuationChart,\n moveChart\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"fluctuationChart = fluctuationChartFit()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"yearlyBubbleChart = yearlyBubbleChartFit()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"gainOrLossChart = gainOrLossChartFit()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"quarterChart = quarterChartFit()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"dayOfWeekChart = dayOfWeekChartFit()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"moveVolumeChart = moveChartFit()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"moveChart = moveVolumeChart[\"moveChart\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"volumeChart = moveVolumeChart[\"volumeChart\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"function gainOrLossChartFit() {\n const all = ndx.groupAll();\n\n const gainOrLoss = ndx.dimension((d) => (d.open > d.close ? \"Loss\" : \"Gain\"));\n const gainOrLossGroup = gainOrLoss.group();\n\n const gainOrLossChart = new dc.PieChart(\"#gain-loss-chart\")\n .width(180)\n .height(180)\n .radius(80)\n .dimension(gainOrLoss)\n .group(gainOrLossGroup);\n gainOrLossChart.label((d) => {\n if (gainOrLossChart.hasFilter() && !gainOrLossChart.hasFilter(d.key)) {\n return `${d.key}(0%)`;\n }\n let label = d.key;\n if (all.value()) {\n label += `(${Math.floor((d.value / all.value()) * 100)}%)`;\n }\n return label;\n });\n\n return gainOrLossChart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"function quarterChartFit() {\n\n const quarter = ndx.dimension((d) => {\n const month = d.dd.getMonth();\n if (month <= 2) {\n return \"Q1\";\n } else if (month > 2 && month <= 5) {\n return \"Q2\";\n } else if (month > 5 && month <= 8) {\n return \"Q3\";\n } else {\n return \"Q4\";\n }\n });\n const quarterGroup = quarter.group().reduceSum((d) => d.volume);\n const quarterChart = new dc.PieChart(\"#quarter-chart\")\n .width(180)\n .height(180)\n .radius(80)\n .innerRadius(30)\n .dimension(quarter)\n .group(quarterGroup);\n\n return quarterChart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"function dayOfWeekChartFit() {\n const dayOfWeek = ndx.dimension((d) => {\n const day = d.dd.getDay();\n const name = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n return `${day}.${name[day]}`;\n });\n const dayOfWeekGroup = dayOfWeek.group();\n const dayOfWeekChart = new dc.RowChart(\n \"#day-of-week-chart\"\n ) /* dc.rowChart('#day-of-week-chart', 'chartGroup') */\n .width(180)\n .height(180)\n .margins({ top: 20, left: 10, right: 10, bottom: 20 })\n .group(dayOfWeekGroup)\n .dimension(dayOfWeek)\n .ordinalColors([\"#3182bd\", \"#6baed6\", \"#9ecae1\", \"#c6dbef\", \"#dadaeb\"])\n .label((d) => d.key.split(\".\")[1])\n .title((d) => d.value)\n .elasticX(true)\n .xAxis()\n .ticks(4);\n\n return dayOfWeekChart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"function fluctuationChartFit() {\n const fluctuation = ndx.dimension((d) =>\n Math.round(((d.close - d.open) / d.open) * 100)\n );\n\n const fluctuationGroup = fluctuation.group();\n const fluctuationChart = new dc.BarChart(\n \"#fluctuation-chart\"\n ) /* dc.barChart('#volume-month-chart', 'chartGroup') */\n .width(420)\n .height(180)\n .margins({ top: 10, right: 50, bottom: 30, left: 40 })\n .dimension(fluctuation)\n .group(fluctuationGroup)\n .elasticY(true)\n .centerBar(true)\n .gap(1)\n .round(Math.floor)\n .alwaysUseRounding(true)\n .x(d3.scaleLinear().domain([-25, 25]))\n .renderHorizontalGridLines(true)\n .filterPrinter((filters) => {\n const filter = filters[0];\n let s = \"\";\n s += `${numberFormat(filter[0])}% -> ${numberFormat(filter[1])}%`;\n return s;\n });\n\n // Customize axes\n fluctuationChart.xAxis().tickFormat((v) => `${v}%`);\n fluctuationChart.yAxis().ticks(5);\n\n return fluctuationChart\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"dateFormat = d3.timeFormat(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"numberFormat = d3.format(\".2f\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"rawData = FileAttachment(\"ndx.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data = (function preProcessing(data) {\n const dateFormatSpecifier = \"%m/%d/%Y\";\n const dateFormat = d3.timeFormat(dateFormatSpecifier);\n const dateFormatParser = d3.timeParse(dateFormatSpecifier);\n const numberFormat = d3.format(\".2f\");\n data.forEach((d) => {\n d.dd = dateFormatParser(d.date);\n d.month = d3.timeMonth(d.dd); \n d.close = +d.close; \n d.open = +d.open;\n });\n return data;\n})(rawData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"ndx = crossfilter(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function createView(options = {}) {\n const sub = d3.create(\"div\");\n if (options.title) sub.append(\"h4\").html(options.title);\n return { container: sub.node(), view: sub.append(\"div\").node() };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function update() {\n dc.renderAll();\n dc.filterAll();\n dc.renderAll();\n\n return html`Updated ${timeFormat(Date.now())}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"dc = require(\"dc@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"crossfilter = require(\"crossfilter2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"timeFormat = d3.timeFormat(\"%Y-%m-%dT%H:%M:%S\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"dtgFormat = d3.timeParse(\"%Y-%m-%dT%H:%M:%S\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"