30:T144b,collapsedCSS('DC.JS styles')` .dc-chart path.dc-symbol, .dc-legend g.dc-legend-item.fadeout { fill-opacity: 0.5; stroke-opacity: 0.5; } .dc-chart rect.bar { stroke: none; cursor: pointer; } .dc-chart rect.bar:hover { fill-opacity: .5; } .dc-chart rect.deselected { stroke: none; fill: #ccc; } .dc-chart .pie-slice { fill: #fff; font-size: 12px; cursor: pointer; } .dc-chart .pie-slice.external { fill: #000; } .dc-chart .pie-slice :hover, .dc-chart .pie-slice.highlight { fill-opacity: .8; } .dc-chart .pie-path { fill: none; stroke-width: 2px; stroke: #000; opacity: 0.4; } .dc-chart .selected path, .dc-chart .selected circle { stroke-width: 3; stroke: #ccc; fill-opacity: 1; } .dc-chart .deselected path, .dc-chart .deselected circle { stroke: none; fill-opacity: .5; fill: #ccc; } .dc-chart .axis path, .dc-chart .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .dc-chart .axis text { font: 10px sans-serif; } .dc-chart .grid-line, .dc-chart .axis .grid-line, .dc-chart .grid-line line, .dc-chart .axis .grid-line line { fill: none; stroke: #ccc; shape-rendering: crispEdges; } .dc-chart .brush rect.selection { fill: #4682b4; fill-opacity: .125; } .dc-chart .brush .custom-brush-handle { fill: #eee; stroke: #666; cursor: ew-resize; } .dc-chart path.line { fill: none; stroke-width: 1.5px; } .dc-chart path.area { fill-opacity: .3; stroke: none; } .dc-chart path.highlight { stroke-width: 3; fill-opacity: 1; stroke-opacity: 1; } .dc-chart g.state { cursor: pointer; } .dc-chart g.state :hover { fill-opacity: .8; } .dc-chart g.state path { stroke: #fff; } .dc-chart g.deselected path { fill: #808080; } .dc-chart g.deselected text { display: none; } .dc-chart g.row rect { fill-opacity: 0.8; cursor: pointer; } .dc-chart g.row rect:hover { fill-opacity: 0.6; } .dc-chart g.row text { fill: #fff; font-size: 12px; cursor: pointer; } .dc-chart g.dc-tooltip path { fill: none; stroke: #808080; stroke-opacity: .8; } .dc-chart g.county path { stroke: #fff; fill: none; } .dc-chart g.debug rect { fill: #00f; fill-opacity: .2; } .dc-chart g.axis text { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .dc-chart .node { font-size: 0.7em; cursor: pointer; } .dc-chart .node :hover { fill-opacity: .8; } .dc-chart .bubble { stroke: none; fill-opacity: 0.6; } .dc-chart .highlight { fill-opacity: 1; stroke-opacity: 1; } .dc-chart .fadeout { fill-opacity: 0.2; stroke-opacity: 0.2; } .dc-chart .box text { font: 10px sans-serif; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .dc-chart .box line { fill: #fff; } .dc-chart .box rect, .dc-chart .box line, .dc-chart .box circle { stroke: #000; stroke-width: 1.5px; } .dc-chart .box .center { stroke-dasharray: 3, 3; } .dc-chart .box .data { stroke: none; stroke-width: 0px; } .dc-chart .box .outlier { fill: none; stroke: #ccc; } .dc-chart .box .outlierBold { fill: red; stroke: none; } .dc-chart .box.deselected { opacity: 0.5; } .dc-chart .box.deselected .box { fill: #ccc; } .dc-chart .symbol { stroke: none; } .dc-chart .heatmap .box-group.deselected rect { stroke: none; fill-opacity: 0.5; fill: #ccc; } .dc-chart .heatmap g.axis text { pointer-events: all; cursor: pointer; } .dc-chart .empty-chart .pie-slice { cursor: default; } .dc-chart .empty-chart .pie-slice path { fill: #fee; cursor: default; } .dc-data-count { float: right; margin-top: 15px; margin-right: 15px; } .dc-data-count .filter-count, .dc-data-count .total-count { color: #3182bd; font-weight: bold; } .dc-legend { font-size: 11px; } .dc-legend .dc-legend-item { cursor: pointer; } .dc-legend g.dc-legend-item.selected { fill: blue; } .dc-hard .number-display { float: none; } div.dc-html-legend { overflow-y: auto; overflow-x: hidden; height: inherit; float: right; padding-right: 2px; } div.dc-html-legend .dc-legend-item-horizontal { display: inline-block; margin-left: 5px; margin-right: 5px; cursor: pointer; } div.dc-html-legend .dc-legend-item-horizontal.selected { background-color: #3182bd; color: white; } div.dc-html-legend .dc-legend-item-vertical { display: block; margin-top: 5px; padding-top: 1px; padding-bottom: 1px; cursor: pointer; } div.dc-html-legend .dc-legend-item-vertical.selected { background-color: #3182bd; color: white; } div.dc-html-legend .dc-legend-item-color { display: table-cell; width: 12px; height: 12px; } div.dc-html-legend .dc-legend-item-label { line-height: 12px; display: table-cell; vertical-align: middle; padding-left: 3px; padding-right: 3px; font-size: 0.75em; } .dc-html-legend-container { height: inherit; } `31:[] 2e:{"title":"1. DC.js basics","cells":[{"id":0,"value":"md`# 1. DC.js basics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`I believe cross filtering is the most powerfull technique for extracting valuable insights from the tabular data. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`Looking over different kind of libraries, it looks like dc.js got this technique righter than others. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`What I don't like in dc.js is that right out of the box, charts aren't very pretty. \n\nAlso based on my past experience clients usually require customizations, so I am not sure how easy it will be to customize dc.js based charts. I plan to to find out this eventually.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`The purpose of this notebook series is getting know of dc.js and being able of creating new charts, which would work seamlessly with other dc.js based charts.\n\nEventually, I want to be able to create custom charts using only crossfilter.js, but with the same transitions and filtering effects as dc.js currently offers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`First, let's include dc, d3 and crossfilter libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"crossfilter = require(\"crossfilter2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`\n
\nThen load sample data\n
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"data = require('@observablehq/cars')","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`\n
\nLet's wrangle data in order to quickly understand it's structure\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"import {wrangle} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"wrangle(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`\n
\n\nWe are going to use two pie charts, and we will use Origin and Cylinders properties from the data \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`\n
\nFirst, Let's create crossfilter instance \n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"ndx = crossfilter(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`\n
\nThen create **Origin** and **Cylinders** dimensions\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"originDimension = ndx.dimension(d=> d.Origin);","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"cylindersDimension = ndx.dimension(d=> d.Cylinders);","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`\n
\nThen create **Origin** and **Cylinders** groups\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"originGroup = originDimension.group();","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"cylindersGroup = cylindersDimension.group();","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"\nmd`\n
\nThen wait for htmlView's init and define pie charts:\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"originChart = {\n htmlView;\n return new dc.PieChart('#origin-chart')\n .width(250)\n .height(250)\n .radius(250)\n .dimension(originDimension)\n .group(originGroup)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"cylindersChart = {\n htmlView;\n return new dc.PieChart('#cylinders-chart')\n .width(250)\n .height(250)\n .radius(250)\n .dimension(cylindersDimension)\n .group(cylindersGroup)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`\n
\nLoad dc.js styles\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"import {collapsedCSS} from \"@j-f1/css-template-tag\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`\n
\nFinally, create containers for charts (which is being waited by charts above) and render all of them\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"htmlView = {\n yield html`\n

\n\n

\n Makers\n\n

\n\n

\n Cylinders\n\n

\n\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"rendering = {\n // Wait for html view\n htmlView; \n \n // Wait for originChart init\n originChart;\n \n // Wait for cylindersChart init\n cylindersChart;\n \n // Finally render all of them\n dc.renderAll(); \n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}