31:T15ea,Root = html`

`32:T1426,initialize = { const width = 550; // document.getElementById('line-chart').offsetWidth // something bad with offsetWidth.. const height = 400; // document.getElementById('line-chart').offsetHeight const margin = { top: 35, left: 35 }; // LAYOUT store.dispatch({ type: "INIT_LAYOUT", payload: { width, height, margin } }); // DATA store.dispatch({ type: "INIT_DATA", payload: {} }); const { xRange, yRange } = store.getState().layout; const { xkey, ykey, xExtent, yExtent, data, attributes, meta } = store.getState().datum; // SCALE store.dispatch({ type: "INIT_SCALE", payload: { axis: "x", type: "scaleTime", domain: xExtent, range: xRange } }); store.dispatch({ type: "INIT_SCALE", payload: { axis: "y", type: "scaleLinear", domain: yExtent, range: yRange } }); // ATTR store.dispatch({ type: InputType.ATTRIBUTE_INIT_VIEW, payload: { attributes: store.getState().datum.attributes } }); store.dispatch({ type: InputType.ATTRIBUTE_ADD_DRAG, payload: { store } }); // CANVAS store.dispatch({ type: InputType.CANVAS_ADD_DROP, payload: { store, height } }); // SVG LINE CHART store.dispatch({ type: InputType.SVG_INIT_CHART, payload: { width, height } }); // X AXIS const tickSizeInner = 10, tickSizeOuter = 15; const xTicks = _.get(d3, xTickTime).every(xTicksSlideValue); const xTickFormat = null; const { xScale, yScale } = store.getState().scale; const xtbottom = `translate(0, ${height - margin.top} )`; const ytleft = `translate(${margin.left} , 0)`; store.dispatch({ type: InputType.DRAW_AXIS, payload: { clazz: "x-axis", position: "bottom", ticks: xTicks, tickFormat: xTickFormat, tickSizeInner, tickSizeOuter, scale: store.getState().scale.xScale, t: xtbottom } }); store.dispatch({ type: InputType.DRAW_AXIS, payload: { svg, clazz: "y-axis", position: "left", ticks: yTicksSlideValue, tickSizeInner, tickSizeOuter, scale: store.getState().scale.yScale, t: ytleft } }); // GRID const xGridTickSize = -(height - 2 * margin.top); const yGridTickSize = -(width - 2 * margin.left); store.dispatch({ type: InputType.DRAW_AXIS, payload: { svg, clazz: "x-grid", position: "bottom", ticks: xTicks, tickFormat: " ", tickSize: [xGridTickSize], scale: xScale, t: xtbottom } }); store.dispatch({ type: InputType.DRAW_AXIS, payload: { svg, clazz: "y-grid", position: "left", ticks: yTicksSlideValue, tickFormat: " ", tickSize: [yGridTickSize], scale: yScale, t: ytleft } }); // TICK AXIS & GRID store.dispatch({ type: InputType.TICK_ADD_HIGHLIGHT, payload: { svg } }); store.dispatch({ type: InputType.TICK_ADD_DRAG, payload: { svg, xScale, yScale, store } }); // LINE store.dispatch({ type: InputType.DRAW_LINES, payload: { svg, data, xScale, yScale, xkey, ykey, clazz: "lines", meta, attributes } }); store.dispatch({ type: InputType.LINE_ADD_HIGHLIGHT, payload: { svg } }); // DOTS store.dispatch({ type: InputType.DRAW_DOTS, payload: { svg, data, xScale, yScale, xkey, ykey, clazz: "dots", meta, attributes } }); // ATTR PARTITION store.dispatch({ type: InputType.PARTITION_ATTIBUTE, payload: { data, attributes, attribute: _.get(attributes, meta.xDefaultKey), meta } }); store.dispatch({ type: InputType.PARTITION_ADD_ATTRIBUTE, payload: { store, attribute: _.get(attributes, meta.xDefaultKey), flexOn: "width", flexOnvalue: width, cssId: "margin-bottom", meta, attributes } }); store.dispatch({ type: InputType.PARTITION_ATTIBUTE, payload: { data, attributes, attribute: _.get(attributes, meta.yDefaultKey), meta } }); store.dispatch({ type: InputType.PARTITION_ADD_ATTRIBUTE, payload: { store, attribute: _.get(attributes, meta.yDefaultKey), flexOn: "height", flexOnvalue: height, cssId: "margin-left", data, xScale, yScale, xkey, ykey, clazz: "lines", meta, attributes, } }); store.dispatch({ type: InputType.PARTITION_ADD_HIGHLIGHT, payload: { data, meta, store, attributes, } }); // TODO store.dispatch({ type: InputType.REMOVE_ENTITY_ALL }); store.dispatch({ type: InputType.ADD_ENTITY, payload: { data, attributes, attribute: _.get(attributes, meta.group), meta } }); store.dispatch({ type: InputType.ADD_ENTITY, payload: { data, attributes, attribute: _.get(attributes, meta.id), meta } }); store.dispatch({ type: InputType.ATTRIBUTE_DROP_BOX_HOVER }); }33:T58c,function datum(state = { ykey: "sumscore", xkey: "date" }, action) { switch (action.type) { case InputType.INIT_DATA: { const data = _.get(datasets, datasetPicker + ".data"); const attributes = _.get(datasets, datasetPicker + ".attrs"); const meta = _.get(datasets, datasetPicker + ".meta"); const { xDefaultKey, yDefaultKey } = meta; log("data, ... ", data, attributes, meta, xDefaultKey, yDefaultKey); const xkey = attributes[xDefaultKey].type === "quantitative" ? attributes[xDefaultKey].cumulative : xDefaultKey; const ykey = attributes[yDefaultKey].type === "quantitative" ? attributes[yDefaultKey].cumulative : yDefaultKey; const sortedData = _.sortBy(data, [ykey]); const parseTime = d3.timeParse( _.get(attributes, `${meta.date}.pattern`, "%d/%m/%Y") ); const filteredData = groupPicker === "All" ? data : _.filter(sortedData, { [meta.group]: groupPicker }); const yExtent = d3.extent(_.map(filteredData, ykey)); const xExtent = d3.extent(_.map(filteredData, xkey), item => parseTime(item) ); return { ...state, data: filteredData, ykey, xkey, xExtent, yExtent, attributes, meta }; } default: return state; } }34:T251b,function partition(state = { selectById: {} }, action) { switch (action.type) { case InputType.PARTITION_ATTIBUTE: { const { data, attributes, attribute: { name, type, cumulative }, width, meta, meta: { id } } = action.payload; const parseTime = d3.timeParse( _.get(attributes, `${meta.date}.pattern`, "%d/%m%/Y") ); let partitions = []; switch (type) { case "date": { const keydata = _.chain(data) .uniqBy(id) .map(name) .value(); const mpt = d3.timeParse("%m/%Y"), mft = d3.timeFormat("%m/%Y"); const ypt = d3.timeParse("%d/%m/%Y"), yft = d3.timeFormat("%Y"); const day = _.chain(keydata) .countBy() .toPairs() .sortBy(d => parseTime(d[0])) .value(); const month = _.chain(keydata) .map(parseTime) .map(mft) .countBy() .toPairs() .sortBy(d => mpt(d[0])) .value(); const year = _.chain(keydata) .map(parseTime) .map(yft) .countBy() .toPairs() .sortBy(d => ypt(d[0])) .value(); partitions = [ { key: "day", values: day, extent: d3.extent(day, d => d[1]), sum: d3.sum(day, d => d[1]) }, { key: "month", values: month, extent: d3.extent(month, d => d[1]), sum: d3.sum(month, d => d[1]) }, { key: "year", values: year, extent: d3.extent(year, d => d[1]), sum: d3.sum(year, d => d[1]) } ]; break; } case "datev2": { break; } case "quantitative": { const max = _.chain(data) .map(cumulative) .max() .value(); const nbrOfLevels = 3; partitions = [ { key: "level0", values: [[`0-${max}`, max]], extent: [0, max], sum: max }, { key: "level1", values: [ [`${_.round(max / 2)}-${max}`, _.round(max / 2)], [`0-${_.round(max / 2)}`, _.round(max / 2)] ], extent: [0, max], sum: max }, { key: "level2", values: [ [`${_.round((3 * max) / 4)}-${max}`, _.round(max / 4)], [ `${_.round(max / 2)}-${_.round((3 * max) / 4)}`, _.round(max / 4) ], [`${_.round(max / 4)}-${_.round(max / 2)}`, _.round(max / 4)], [`0-${_.round(max / 4)}`, _.round(max / 4)] ], extent: [0, max], sum: max } ]; } default: break; } return { ...state, [name]: partitions }; } case InputType.PARTITION_ADD_ATTRIBUTE: { const { attribute: { type, name, cumulative }, cssId, flexOn, flexOnvalue, store, data, xScale, yScale, xkey, ykey, clazz, meta } = action.payload; const partitions = state[name]; const el = appRoot.select("#" + cssId).select(".body"); const scale = d3.scaleLinear().range([0, flexOnvalue]); // TODO remove this and use d3 update .. not working with .each el.selectAll("div").remove(); const barsEl = el.selectAll("div").data(partitions, d => d.key); barsEl .enter() .append("div") .merge(barsEl) .attr("class", cssId + "-partition") .style(flexOn, flexOnvalue + "px") .each(function(d, i) { scale.domain([0, d.sum]); const childEl = d3 .select(this) .selectAll("div") .data(d.values, dd => d[0]); childEl .enter() .append("div") // .merge( childEl ) .attr( "class", dd => `id-${d.key}-${ dd[0] } type-${type} attr-${cumulative} margin-partition-band` ) .style(flexOn, dd => scale(dd[1]) + "px"); // childEl.exit().remove() }); barsEl.exit().remove(); // TOOD if (cssId === "margin-bottom") { const els = appRoot .select("#" + cssId) .select(".bottom-toolbar") .selectAll("div") .html("") .data(["Day", "Month", "Year"], d => d); els .enter() .append("div") .merge(els) .append("span") .html(d => d) .on("click", function(d) { store.dispatch({ type: InputType.LINE_DRAW_PARTITION, payload: { partitionKey: "month" } }); store.dispatch({ type: InputType.DOT_DRAW_PARTITION, payload: { partitionKey: "month" } }); }); } return state; } case InputType.PARTITION_ADD_HIGHLIGHT: { const { data, meta, store, attributes } = action.payload; const mpt = d3.timeParse("%m/%Y"), mft = d3.timeFormat("%m/%Y"); const ypt = d3.timeParse("%d/%m/%Y"), yft = d3.timeFormat("%Y"); const parseTime = d3.timeParse( _.get(attributes, `${meta.date}.pattern`, "%d/%m/%Y") ); let ids, query = [], key, type; function pbandmenter() { const el = d3.select(this); const classList = d3.event.target.classList; key = Helpers.findReplaceByRegex(classList, "^attr-"); type = Helpers.findReplaceByRegex(classList, "^type-"); switch (type) { case "date": { // TODO query = Helpers.findQueryDateByRegex(classList, "^id-", "-"); const [dmy, date] = query; // TODO this will be very fast if we add it to the data const dateFilter = (dmy, d) => { if (dmy === "month") { return mft(parseTime(d[meta.date])) === date; } if (dmy === "year") { return yft(parseTime(d[meta.date])) === date; } return d[meta.date] === date; }; ids = _.chain(data) .filter(dateFilter.bind(null, dmy)) .map(meta.id) .uniq() .value(); break; } case "quantitative": { query = Helpers.findQueryByRegex(classList, "^id-", "-"); const [level, start, end] = query; const rangeFilter = (start, end, val, key) => val >= start && val <= end; const maxMapper = d => _.max(_.map(d, key)); if (end) { ids = _.chain(data) .groupBy(meta.id) .mapValues(maxMapper) .pickBy(rangeFilter.bind(null, start, end)) .keys() .value(); } break; } default: { break; } } appRoot.select("#tooltip").classed("drag-preview", true).html(` Query: ${query} Type : ${type} Attr : ${key} `); if (ids.length) { Handler.highlightMany({ ids }); } } function pbandmleave() { appRoot .select("#tooltip") .classed("drag-preview", false) .html(""); if (ids.length) { Handler.unhighlightMany({ ids }); } } function pbandclick() { if (!ids) { return; } // Handler.selectMany ( { ids } ) ids.color = colors.colors[_.random(0, _.size(colors.colors))]; d3.select(this).style("background", ids.color); store.dispatch({ type: InputType.PARTITION_SELECT, payload: { ids, key: key + "-" + _.join(query, "-") } }); } function pbanddblclick() { if (!ids) { return; } // Handler.unselectMany ( { ids } ) d3.select(this).style("background", "#eee"); store.dispatch({ type: InputType.PARTITION_UNSELECT, payload: { ids, key: key + "-" + _.join(query, "-") } }); } d3.selectAll(".margin-partition-band") .on("mouseenter", pbandmenter) .on("mouseleave", pbandmleave) .on("click", pbandclick) /// dispatch select .on("dblclick", pbanddblclick); /// dispatch unselect return state; } case InputType.PARTITION_SELECT: { let { ids, key } = action.payload; Handler.selectMany({ ids }); return { ...state, selectById: { ...state.selectById, [key]: ids } }; } case InputType.PARTITION_UNSELECT: { const { key } = action.payload; let ids = state.selectById[key]; ids.color = "#ccc"; Handler.unselectMany({ ids }); return { ...state, selectById: { ...state.selectById, [key]: [] } }; } default: { return state; } } }35:Tb09,function attribute ( state = {}, action ) { switch ( action.type ) { case InputType.ATTRIBUTE_INIT_VIEW: { const { attributes } = action.payload; const attrsEl = appRoot .select( '#attribute' ) .selectAll( 'div' ) .data( _.values(attributes), d => d.name ); const enter = attrsEl .enter() .append( 'div' ) .merge( attrsEl ); enter.append( 'span' ); enter.select( 'span' ).html( d => d.name || d.key ); attrsEl.exit().remove(); return state; } case InputType.ATTRIBUTE_ADD_DRAG: { const { store } = action.payload; const nds = appRoot.select( '#attribute' ).selectAll( 'div' ); const attrdrag = d3.drag(); let draggOverlay; function start ( d ) { draggOverlay = appRoot .select( '#drag-overlay' ) .classed( 'drag-preview', true ) .html( d.name || d.key ); store.dispatch({ type: InputType.ATTRIBUTE_DRAG_STARTED, payload: { attribute: d }, }); } function drag () { draggOverlay .style( 'left', d3.event.x + -20 + 'px' ) .style( 'top', d3.event.y + 80 + 'px' ); } function end ( d ) { draggOverlay.classed( 'drag-preview', false ).html(''); store.dispatch({ type: InputType.ATTRIBUTE_DRAG_ENDED, payload: { attribute: d, datum: store.getState().datum }, }); } attrdrag .on( 'start', start ) .on( 'drag', drag ) .on( 'end', end ); nds.call( attrdrag ); return state; } case InputType.ATTRIBUTE_DRAG_STARTED: { // attribute drag is the source here I connect // with the target placeholders to show highlight it appRoot.selectAll('#x-axis-drop-box,#y-axis-drop-box').classed( 'drop-box-active', true ) return state } case InputType.ATTRIBUTE_DRAG_ENDED: { // attribute drag is the source here I connect // with the target placeholders to show highlight it appRoot.selectAll('#x-axis-drop-box,#y-axis-drop-box').classed( 'drop-box-active', false ) return state } case InputType.ATTRIBUTE_DROP_BOX_HOVER: { function dbmenter () { d3.select(this).classed( 'drop-box-hover', true ) } function dbmleave () { d3.select(this).classed( 'drop-box-hover', false ) } appRoot .selectAll('#x-axis-drop-box,#y-axis-drop-box') .on('mouseenter', dbmenter ).on('mouseleave', dbmleave ) return state } default: { return state; } } }36:T2178,function entity ( state = { attributes: { }, dropStarted: false, dropEnded: false, dropping: false }, action ) { switch( action.type ) { case InputType.CANVAS_ADD_DROP: { const { store, height } = action.payload function cmenter() { store.dispatch({ type: InputType.CANVAS_DROP_STARTED, payload: { dropping: true } }) } function cmleave() { store.dispatch({ type: InputType.CANVAS_DROP_ENDED, payload: { dropping: false } }) } const nd = appRoot.select('#margin-right') nd.on( 'mouseenter', cmenter ).on( 'mouseleave', cmleave ) return { ...state, height } } case InputType.CANVAS_DROP_STARTED: { return { ...state, ...action.payload } } case InputType.CANVAS_DROP_ENDED: { return { ...state, ...action.payload } } case InputType.ATTRIBUTE_DRAG_STARTED: { return { ...state, dropStarted: true } } case InputType.REMOVE_ENTITY_ALL: { appRoot.select('#margin-right').html('') return state } case InputType.ADD_ENTITY: { const { height } = state const { attribute: { name, type }, data: datum } = action.payload if ( state[name] ) { return state } const color = d3.scaleOrdinal( d3.schemeCategory10 ) const el = appRoot.select('#margin-right').append('div').classed('entity-wrapper', true) let data switch( type ) { case 'string': { function stringAttrMouseenter( d ) { Handler.lmenterHandler({ cssClassId: 'id-' + d.userId } ) } function stringAttrMouseleave( d ) { Handler.lmleaveHandler({ cssClassId: 'id-' + d.userId } ) } data = _.chain( datum ).uniqBy( name ).value() const catsEl = el.selectAll('div').data( data, d => d.key ) const enter = catsEl.enter().append('div').attr('class', 'string-attr').merge( catsEl ) enter.append('span') enter .select('span') .html( d => d[name] ) .on('mouseenter', stringAttrMouseenter ) .on('mouseleave', stringAttrMouseleave ) enter.exit().remove() break } case 'quantitative': { data = _.chain( datum ).map( name ).value() const { bands, xExtent, yExtent } = Handler.buildHistogramBands( data, { bins : 30 } ) const xScale = d3.scaleLinear().domain( xExtent ).range( [ 0, height ] ) const yScale = d3.scaleLinear().domain( yExtent ).range( [ 0, 100 ] ) const histsEl = el .selectAll( '.histogram-attr' ) .data( bands ) histsEl .enter() .append( 'div' ) .merge( histsEl ) .attr( 'class', 'histogram-attr' ) .style( 'width', d => ( yScale( d.length ) + 'px' )) .style( 'height', d => ( Math.max( 0, xScale( d.x1 ) - xScale( d.x0 ) - 1 ) + 'px' )) .style( 'background', '#ccc' ) .style( 'border-bottom', '0.5px solid #eee' ) histsEl.exit().remove() break } case 'categorical': { // const data = _.chain( datum ).get( 'data' ).uniqBy( 'userId' ).map( name ).countBy( ).value() data = _.chain( datum ) .uniqBy( 'userId' ) .groupBy( name ) .mapValues( d => { const a = _.uniqBy( _.map( d, 'userId' )) return { count: _.size( a ), id: a, } }) .value() const scale = d3.scaleLinear() .domain( [ 0, _.sum(_.values( _.mapValues( data, 'count' ) )) ] ) .range( [ 0, height ] ) function catAttrMouseenter( d ) { Handler.highlightMany({ ids: d[1].id } ) } function catAttrMouseleave( d ) { Handler.unhighlightMany({ ids: d[1].id } ) } const barsEl = el.selectAll('div').data( _.toPairs( data ), d => d[0] ) barsEl.enter().append('div').merge( barsEl ) .attr('class', 'stackedbar-attr') .style('height', d => (scale( d[1].count ) + 'px')) .style('background', (d, i) => color( i )) .on('mouseenter', catAttrMouseenter ) .on('mouseleave', catAttrMouseleave ) .append('span') .html( d => d[0] ) barsEl.exit().remove() break } default: { break } } return { ...state, [name]: data } } case InputType.ATTRIBUTE_DRAG_ENDED: { const { height } = state const { attribute: { name, type }, datum } = action.payload if ( !state.dropping ) { return state } const color = d3.scaleOrdinal( d3.schemeCategory10 ) const el = appRoot.select('#margin-right').append('div').classed('entity-wrapper', true) let data switch( type ) { case 'string': { function stringAttrMouseenter( d ) { Handler.lmenterHandler({ cssClassId: 'id-' + d.userId } ) } function stringAttrMouseleave( d ) { Handler.lmleaveHandler({ cssClassId: 'id-' + d.userId } ) } data = _.chain( datum ).get( 'data' ).uniqBy( name ).value() const catsEl = el.selectAll('div').data( data, d => d.key ) const enter = catsEl.enter().append('div').attr('class', 'string-attr').merge( catsEl ) enter.append('span') enter .select('span') .html( d => d[name] ) .on('mouseenter', stringAttrMouseenter ) .on('mouseleave', stringAttrMouseleave ) enter.exit().remove() break } case 'quantitative': { data = _.chain( datum ).get( 'data' ).map( name ).value() const { bands, xExtent, yExtent } = Handler.buildHistogramBands( data, { bins : 30 } ) const xScale = d3.scaleLinear().domain( xExtent ).range( [ 0, height ] ) const yScale = d3.scaleLinear().domain( yExtent ).range( [ 0, 100 ] ) const histsEl = el .selectAll( '.histogram-attr' ) .data( bands ) histsEl .enter() .append( 'div' ) .merge( histsEl ) .attr( 'class', 'histogram-attr' ) .style( 'width', d => ( yScale( d.length ) + 'px' )) .style( 'height', d => ( Math.max( 0, xScale( d.x1 ) - xScale( d.x0 ) - 1 ) + 'px' )) .style( 'background', '#ccc' ) .style( 'border-bottom', '0.5px solid #eee' ) histsEl.exit().remove() break } case 'categorical': { // const data = _.chain( datum ).get( 'data' ).uniqBy( 'userId' ).map( name ).countBy( ).value() data = _.chain( datum ) .get( 'data' ) .uniqBy( 'userId' ) .groupBy( name ) .mapValues( d => { const a = _.uniqBy( _.map( d, 'userId' )) return { count: _.size( a ), id: a, } }) .value() const scale = d3.scaleLinear() .domain( [ 0, _.sum(_.values( _.mapValues( data, 'count' ) )) ] ) .range( [ 0, height ] ) function catAttrMouseenter( d ) { Handler.highlightMany({ ids: d[1].id } ) } function catAttrMouseleave( d ) { Handler.unhighlightMany({ ids: d[1].id } ) } const barsEl = el.selectAll('div').data( _.toPairs( data ), d => d[0] ) barsEl.enter().append('div').merge( barsEl ) .attr('class', 'stackedbar-attr') .style('height', d => (scale( d[1].count ) + 'px')) .style('background', (d, i) => color( i )) .on('mouseenter', catAttrMouseenter ) .on('mouseleave', catAttrMouseleave ) .append('span') .html( d => d[0] ) barsEl.exit().remove() break } default: { break } } return { ...state, dropping: false, [name]: data } } default: { return state } } }37:T705,function dot(state = {}, action) { switch (action.type) { case InputType.UPDATE_DOTS: case InputType.DRAW_DOTS: { const { svg, data, xScale, yScale, xkey, ykey, clazz, meta, attributes } = action.payload; // const grouped = d3.nest().key( d => d.userId ).entries ( data ) const parseTime = d3.timeParse( _.get(attributes, `${meta.date}.pattern`, "%d/%m/%Y") ); const mpt = d3.timeParse("%m/%Y"); const mft = d3.timeFormat("%m/%Y"); const grouped = d3 .nest() .key(d => d[meta.id]) //.key( d => mft( parseTime( d.key ))) // TODO put it in 2 Cast csv //.rollup( Helpers.sumMapper ) .entries(data); //.flatMap( Helpers.flatMapper ) /* Handler.drawCirclesHandler(svg, grouped, { clazz, xScale, yScale, xkey, ykey, parseTime });*/ return { ...state, data, xkey, ykey, clazz, parseTime, xScale, yScale, meta }; } case InputType.DOT_DRAW_PARTITION: { const { data, xScale, yScale, xkey, ykey, clazz, parseTime, store, meta } = state; const { partitionKey } = action.payload; let grouped; if (partitionKey === "month") { grouped = d3 .nest() .key(d => d[meta.id]) .key(d => d.month) .rollup(Helpers.sumMapper) .entries(data) .flatMap(Helpers.flatMapper); } // Handler.drawLinesHandler(svg, grouped, { clazz }); return state; } default: return state; } }38:Tc2c,function line(state = {}, action) { const { fromEvent } = Rx, { map } = Rx.operators; switch (action.type) { case InputType.UPDATE_LINES: case InputType.DRAW_LINES: { const { svg, data, xScale, yScale, xkey, ykey, clazz, store, meta, attributes } = action.payload; const parseTime = d3.timeParse( _.get(attributes, `${meta.date}.pattern`, "%d/%m/%Y") ); const line = d3 .line() .curve(d3.curveMonotoneX) .x(d => xScale(parseTime(_.get(d, xkey)))) .y(d => yScale(_.get(d, ykey))); const mpt = d3.timeParse("%m/%Y"); const mft = d3.timeFormat("%m/%Y"); const grouped = d3 .nest() .key(d => d[meta.id]) //.key( d => mft( parseTime( d.key ))) //.rollup( Helpers.sumMapper ) .entries(data); //.flatMap( Helpers.flatMapper ) // log('data, ', grouped) Handler.drawLinesHandler(svg, grouped, { line, clazz }); return { ...state, data, line, xkey, ykey, clazz, parseTime, xScale, yScale, meta }; } case InputType.LINE_DRAW_PARTITION: { const { data, xScale, yScale, xkey, ykey, clazz, store, meta, attributes } = state; const { partitionKey } = action.payload; const parseTime = d3.timeParse( _.get(attributes, `${meta.date}.pattern`, "%d/%m/%Y") ); const line = d3 .line() .curve(d3.curveMonotoneX) .x(d => xScale(parseTime(_.get(d, xkey)))) .y(d => yScale(_.get(d, ykey))); let grouped; if (partitionKey === "month") { grouped = d3 .nest() .key(d => d[meta.id]) .key(d => d.month) .rollup(Helpers.sumMapper) .entries(data) .flatMap(Helpers.flatMapper); } Handler.drawLinesHandler(svg, grouped, { line, clazz }); return state; } case InputType.LINE_ADD_HIGHLIGHT: { const { svg } = action.payload; const nds = svgRoot.selectAll("path.line-shadow--el"); //.nodes() nds.on("mouseenter", function() { Handler.lmenterHandler({ cssClassId: Helpers.findByRegex(d3.event.target.classList, "^id") }); }); nds.on("mouseleave", function() { Handler.lmleaveHandler({ cssClassId: Helpers.findByRegex(d3.event.target.classList, "^id") }); }); nds.on("click", function() { let ids = [ Helpers.findReplaceByRegex(d3.event.target.classList, "^id-") ]; ids.color = "#ccc"; Handler.selectMany({ ids }); }); nds.on("dblclick", function() { let ids = [ Helpers.findReplaceByRegex(d3.event.target.classList, "^id-") ]; ids.color = "#ccc"; Handler.unselectMany({ ids }); }); return state; } default: return state; } }39:T763,function tick(state = {}, action) { const { fromEvent } = Rx, { map, switchMap } = Rx.operators switch (action.type) { case InputType.TICK_ADD_HIGHLIGHT: { const { svg } = action.payload const nds = svgRoot.selectAll(".tick line" ).nodes() const tmenter$ = fromEvent( nds, 'mouseenter' ) const tmleave$ = fromEvent( nds, 'mouseleave' ) tmenter$ .pipe( map( ev => ev.target )) .subscribe( el => Handler.tmenterHandler( el )) tmleave$ .pipe( map( ev => ev.target )) .subscribe( el => Handler.tmleaveHandler( el )) return state } case InputType.TICK_ADD_DRAG: { const { svg, xScale, yScale, store } = action.payload const nds = svgRoot.selectAll( '.tick line' ) const mdrag = d3.drag() function start ( d ) { const el = d3.select( this ), gfather = d3.select( this.parentNode.parentNode ) Handler.tmdragStartedHandler( el, gfather, { xScale, yScale, store }) } function drag ( d ) { const el = d3.select( this ), gfather = d3.select( this.parentNode.parentNode ) Handler.tmdragHandler( el, gfather, { xScale, yScale }) } function end ( d ) { const el = d3.select( this ), gfather = d3.select( this.parentNode.parentNode ) Handler.tmdragEndedHandler( el, gfather, { xScale, yScale, store }) } mdrag .on( 'start', start ) .on( 'drag', drag ) .on( 'end', end ) nds.call( mdrag ) return state } case InputType.TICK_DRAG_STARTED: { const { start, sClazz } = action.payload return { ...state, start, sClazz, end: null, eClazz: null } } case InputType.TICK_DRAG_ENDED: { const { end, eClazz } = action.payload return { ...state, end, eClazz } } default: return state } } 3a:T21d4,Reducer = { const { fromEvent } = Rx, { map, switchMap } = Rx.operators function layout ( state = { width: 700, height: 500, margin: { left: 120, top: 120 } }, action ) { switch( action.type ) { case InputType.INIT_LAYOUT: { const { width = 700, height = 500, margin = { left: 120, top : 120 } } = action.payload const xRange = [ margin.left, width - margin.left ] const yRange = [ height - margin.top, margin.top ] return { ...state, width, height, margin, xRange, yRange } } default: return state } } function margin ( state = { 'left-margin': {}, 'top-margin': {}, 'right-margin': {}, 'bottom-margin': {} }, action ) { switch ( action.type ) { case InputType.INIT_SVG_MARIN_CORNER_GROUPS: { const { margin, tickSizeInner } = action.payload Handler.initSvgMarginAndCornerGroups( action.payload ) return { ...state, margin, tickSizeInner } } case InputType.MARGIN_ADD_DRAG: { const { svg, xScale, yScale, store } = action.payload const nds = appRoot.selectAll('.left-margin,.top-margin,.bottom-margin,.right-margin') const mdrag = d3.drag() function start ( ) { const el = d3.select( this ), gfather = d3.select( this.parentNode.parentNode ) Handler.mmdragStartedHandler( svg, el , { xScale, yScale, store } ) log(el) } function drag( ) { const el = d3.select( this ), gfather = d3.select( this.parentNode.parentNode ) Handler.mmdragHandler( svg, el, { xScale, yScale, store } ) log(el) } function end( ) { const el = d3.select( this ), gfather = d3.select( this.parentNode.parentNode ) Handler.mmdragEndedHandler( svg, el, { xScale, yScale, store } ) log(el) } mdrag .on( 'start', start ) .on( 'drag', drag ) .on( 'end', end ) nds.call ( mdrag ) return state } case InputType.MARGIN_DRAG_STARTED: { log('MARGIN_DRAG_STARTED', action.payload) const { sClazz, start: [ x, y ] } = action.payload return { ...state, [ sClazz ]: { ...state[ sClazz ], start: { x, y } } } } case InputType.MARGIN_DRAG_ENDED: { const { eClazz, end: [ x, y ] } = action.payload return { ...state, [ eClazz ]: { ...state[ eClazz ], end: { x, y } } } } case InputType.MARGIN_QUERY_ADD_DRAG: { const { end, eClazz } = action.payload return { ...state, end, eClazz } } default: return state } } function corner ( state = { 'top-left': {}, 'top-right': {}, 'bottom-right': {}, 'bottom-left': {} }, action ) { switch ( action.type ) { case InputType.CORNER_UPDATE_QUERY_INTERSECT: { const { clazz, start: { x, y }, end } = action.payload switch ( clazz ) { case 'left-margin': { return { ...state, 'top-left': { ...state[ 'top-left' ], x }, 'bottom-left': { ...state[ 'bottom-left' ], x }, } } case 'top-margin': { return { ...state, 'top-left': { ...state[ 'top-left' ], y }, 'top-right': { ...state[ 'top-right' ], y }, } } case 'right-margin': { return { ...state, 'top-right': { ...state[ 'top-right' ], x }, 'bottom-right': { ...state[ 'bottom-right' ], x }, } } case 'bottom-margin': { return { ...state, 'bottom-left': { ...state[ 'bottom-left' ], y }, 'bottom-right': { ...state[ 'bottom-right' ], y }, } } default: return state } return state } case InputType.CORNER_ADD_QUERY_INTERSECT: { const { svg, clazz, start: { x, y }, end } = action.payload switch ( clazz ) { case 'left-margin': { const br = state[ 'top-left' ], tr = state[ 'bottom-left' ] if ( _.has( br, 'x' ) && _.has( br, 'y' ) ) { const el = appRoot.select('.top-left-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } if ( _.has( tr, 'x' ) && _.has( tr, 'y' ) ) { const el = svg.select('.bottom-left-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } } case 'top-margin': { const tl = state[ 'top-left' ], tr = state[ 'top-right' ] if ( _.has( tl, 'x' ) && _.has( tl, 'y' ) ) { const el = svg.select('.top-left-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } if ( _.has( tr, 'x' ) && _.has( tr, 'y' ) ) { const el = svg.select('.top-right-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } } case 'right-margin': { const br = state[ 'bottom-right' ], tr = state[ 'top-right' ] if ( _.has( br, 'x' ) && _.has( br, 'y' ) ) { const el = appRoot.select('.bottom-right-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } if ( _.has( tr, 'x' ) && _.has( tr, 'y' ) ) { const el = svg.select('.top-right-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } } case 'bottom-margin': { const bl = state[ 'bottom-left' ], br = state[ 'bottom-right' ] if ( _.has( bl, 'x' ) && _.has( bl, 'y' ) ) { const el = appRoot.select('.bottom-left-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } if ( _.has( br, 'x' ) && _.has( br, 'y' ) ) { const el = appRoot.select('.bottom-right-corner') el.append('rect').attr( 'class', 'intersect' ) el.select('rect.intersect') .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', 10 ) .attr( 'height', 10 ) } } default: return state } return state } default: return state } } function scale ( state = { } , action ) { switch ( action.type ) { case InputType.INIT_SCALE: { const { axis, type, domain, range } = action.payload const scale = d3[type]().domain( domain ).range( range ).nice() return { ...state, [ axis + 'Scale' ]: scale } } case InputType.UPDATE_SCALE: { const { clazz, store } = action.payload const { tmpXScale, tmpYScale } = Handler.updateScaleHandler( action.payload ) return { ...state, tmpXScale, tmpYScale } } default: return state } } return Redux.combineReducers( { svg, scale, axis, tick, line, dot, margin, corner, datum, layout, attribute, entity, partition } ) }3b:T7f9,InputType = ({ // DATA INIT_DATA: 'INIT_DATA', // LAYOUT INIT_LAYOUT: 'INIT_LAYOUT', // SVG SVG_INIT_CHART: 'SVG_INIT_CHART', SVG_INIT_GROUP: 'SVG_INIT_GROUP', INIT_SVG_MARIN_CORNER_GROUPS: 'INIT_SVG_MARIN_CORNER_GROUPS', // SCALE INIT_SCALE: 'INIT_SCALE', UPDATE_SCALE: 'UPDATE_SCALE', // AXIS DRAW_AXIS: 'DRAW_AXIS', UPDATE_AXIS: 'UPDATE_AXIS', // GRID DRAW_GRID: 'DRAW_GRID', UPDATE_GRID: 'UPDATE_GRID', // TICK TICK_ADD_HIGHLIGHT: 'TICK_ADD_HIGHLIGHT', TICK_ADD_DRAG: 'TICK_ADD_DRAG', TICK_DRAG_STARTED: 'TICK_DRAG_STARTED', TICK_DRAG_ENDED: 'TICK_DRAG_ENDED', // LINE DRAW_LINES: 'DRAW_LINES', LINE_ADD_HIGHLIGHT: 'LINE_ADD_HIGHLIGHT', UPDATE_LINES: 'UPDATE_LINES', LINE_DRAW_PARTITION: 'LINE_DRAW_PARTITION', // DOT DRAW_DOTS: 'DRAW_DOTS', UPDATE_DOTS: 'UPDATE_DOTS', DOT_DRAW_PARTITION: 'DOT_DRAW_PARTITION', // MARGIN MARGIN_ADD_DRAG: 'MARGIN_ADD_DRAG', MARGIN_DRAG_STARTED: 'MARGIN_DRAG_STARTED', MARGIN_DRAG_ENDED: 'MARGIN_DRAG_ENDED', MARGIN_QUERY_ADD_DRAG: 'MARGIN_QUERY_ADD_DRAG', MARGIN_QUERY_DRAG_STARTED: 'MARGIN_QUERY_DRAG_STARTED', MARGIN_QUERY_DRAG_ENDED: 'MARGIN_QUERY_DRAG_ENDED', // CORNER CORNER_UPDATE_QUERY_INTERSECT: 'CORNER_UPDATE_QUERY_INTERSECT', CORNER_ADD_QUERY_INTERSECT: 'CORNER_ADD_QUERY_INTERSECT', // ATTR ATTRIBUTE_INIT_VIEW: 'ATTRIBUTE_INIT_VIEW', ATTRIBUTE_ADD_DRAG: 'ATTRIBUTE_ADD_DRAG', ATTRIBUTE_DRAG_STARTED: 'ATTRIBUTE_DRAG_STARTED', ATTRIBUTE_DRAG_ENDED: 'ATTRIBUTE_DRAG_ENDED', // CANVAS CANVAS_ADD_DROP: 'CANVAS_ADD_DROP', CANVAS_DROP_STARTED: 'CANVAS_DROP_STARTED', CANVAS_DROP_ENDED: 'CANVAS_DROP_ENDED', ADD_ENTITY: 'ADD_ENTITY', REMOVE_ENTITY_ALL: 'REMOVE_ENTITY_ALL', // ATTR PARTITION PARTITION_ATTIBUTE: 'PARTITION_ATTIBUTE', PARTITION_ADD_ATTRIBUTE: 'PARTITION_ADD_ATTRIBUTE', PARTITION_ADD_HIGHLIGHT: 'PARTITION_ADD_HIGHLIGHT', ATTRIBUTE_DROP_BOX_HOVER: 'ATTRIBUTE_DROP_BOX_HOVER', PARTITION_SELECT: 'PARTITION_SELECT', PARTITION_UNSELECT: 'PARTITION_UNSELECT', })3c:T65f,class Helpers { // TODO attrs as params static sumMapper ( d ) { let sumscore = 0, sumtime = 0, sumnok = 0, sumnko = 0, sumnsession return _.map( d, o => { sumscore += o.score sumtime += o.time sumnok += o.nok sumnko += o.nko sumnsession += o.nsession return { ...o, sumscore, sumtime, sumnok, sumnko, sumnsession, } }) } // TODO make it reccursive for nested levels static flatMapper ( d ) { return _.map( d.values, o => { return { key: d.key + ' ' + o.key, values: o.value }; }) } static findByRegex( list, regex ) { return _.find( list, d => RegExp( regex ).test( d ) ) } static findReplaceByRegex( list, regex1, regex2 ) { const reg1 = RegExp( regex1 ); return _.chain(list).find( d => reg1.test( d ) ).replace( reg1, '' ).value() } static findReplaceSplitByRegex( list, regex1, regex2 ) { const reg1 = RegExp( regex1 ); const reg2 = RegExp( regex2 ); return _.chain(list).find( d => reg1.test( d ) ).replace( reg1, '' ).split( reg2 ).value() } static findQueryByRegex( list, regex1, regex2 ) { const reg1 = RegExp( regex1 ); const reg2 = RegExp( regex2 ); return _.chain(list).find( d => reg1.test( d ) ).replace( reg1, '' ).split( reg2 ).map( _.toNumber ).value() } static findQueryDateByRegex( list, regex1, regex2 ) { const reg1 = RegExp( regex1 ); const reg2 = RegExp( regex2 ); return _.chain(list).find( d => reg1.test( d ) ).replace( reg1, '' ).split( reg2 ).value() } }3d:T3f1f,class Handler { static selectMany ( { ids } ) { svgRoot .selectAll( `.ink.id-${ ids.join( ',.ink.id-' ) }` ) .classed('ink-pressed', true ) .style( 'stroke', ids.color ) } static unselectMany ( { ids } ) { svgRoot .selectAll( `.ink.id-${ ids.join( ',.ink.id-' ) }` ) .classed('ink-pressed', false ) .style( 'stroke', ids.color ) } static highlightMany ( { ids } ) { svgRoot.selectAll( '.ink' ).style( 'opacity', 0.1 ) svgRoot.selectAll( `.shadow.id-${ ids.join( ',.shadow.id-' ) }` ).style( 'opacity', 0.4 ) svgRoot.selectAll( `.ink.id-${ ids.join( ',.ink.id-' ) }` ).style( 'opacity', 0.8 ) } static unhighlightMany ( { ids } ) { svgRoot.selectAll( '.ink' ).style( 'opacity', 0.5 ) svgRoot.selectAll( '.shadow' ).style( 'opacity', 0 ) } static buildHistogramBands ( data, { bins = 20 }) { const scale = d3.scaleLinear() const xExtent = d3.extent( data ) scale.domain( xExtent ).nice( _.size( data )) const bands = d3 .histogram() .domain( xExtent ) .value( d => d ) .thresholds( scale.ticks( bins ))( data ) const yExtent = [ 0, d3.max( bands, dd => _.size( dd )) ] return { bands, xExtent, yExtent } } static mmdragStartedHandler ( svg, el, { xScale, yScale, store }) { Handler.addDragCirclePlaceholder( svg, { clazz: 'margin-drag-placeholder' }) Handler.addDragLinePlaceholder( el, { clazz: 'margin-drag-line' }) const clazz = el.attr( 'class' ) store.dispatch({ type: InputType.MARGIN_DRAG_STARTED, payload: { start: d3.mouse( el.node()), sClazz: clazz, xScale, yScale, svg, store, }, }) } static mmdragEndedHandler ( svg, el, { xScale, yScale, store }) { Handler.removeDragCirclePlaceholder( svg, { clazz: 'margin-drag-placeholder', }) const clazz = el.attr( 'class' ) store.dispatch({ type: InputType.MARGIN_DRAG_ENDED, payload: { end: d3.mouse( el.node()), eClazz: clazz, xScale, yScale, svg, store, }, }) store.dispatch({ type: InputType.CORNER_UPDATE_QUERY_INTERSECT, payload: { ...store.getState().margin[clazz], clazz, }, }) store.dispatch({ type: InputType.CORNER_ADD_QUERY_INTERSECT, payload: { clazz, svg, ...store.getState().margin[clazz], }, }) } static mmdragHandler ( svg, el, { xScale, yScale, store }) { // log('here', store.getState().margin) return const clazz = el.attr( 'class' ) const { start, end } = store.getState().margin[clazz] const [ mousex, mousey ] = d3.mouse( svgRoot.node()) const [ elmousex, elmousey ] = d3.mouse( el.node()) // TO REMOVE switch ( clazz ) { case 'right-margin': case 'left-margin': { Handler.dragCirclePlaceholder( svg, { clazz: 'margin-drag-placeholder', cx: xScale( xScale.invert( mousex )), cy: yScale( yScale.invert( mousey )), }) Handler.dragLinePlaceholder( el, { clazz: 'margin-drag-line', x1: xScale( xScale.invert( start.x )), x2: xScale( xScale.invert( start.x )), y1: yScale( yScale.invert( start.y )), y2: yScale( yScale.invert( elmousey )), strokeWidth: 4, }) return } case 'bottom-margin': case 'top-margin': { Handler.dragCirclePlaceholder( svg, { clazz: 'margin-drag-placeholder', cx: xScale( xScale.invert( mousex )), cy: yScale( yScale.invert( mousey )), }) Handler.dragLinePlaceholder( el, { clazz: 'margin-drag-line', x1: xScale( xScale.invert( start.x )), x2: xScale( xScale.invert( elmousex )), y1: yScale( yScale.invert( start.y )), y2: yScale( yScale.invert( start.y )), strokeWidth: 4, }) return } default: { return } } } static drawLinesHandler ( svg, grouped, { line, clazz }) { drawLines( svg, grouped, { line, clazz }) } static drawCirclesHandler ( svg, grouped, { clazz, xScale, yScale, circle, xkey, ykey, parseTime } ) { drawCircles( svg, grouped, { clazz, xScale, yScale, circle, xkey, ykey, parseTime, }) } static drawAxisHandler ({ svg, t, clazz, scale, ticks, tickSize, tickFormat, position, tickSizeInner, tickSizeOuter, tickValues, }) { let ax switch ( position ) { case 'left': { ax = d3.axisLeft( scale ) break } case 'right': { ax = d3.axisRight( scale ) break } case 'bottom': { ax = d3.axisBottom( scale ) break } case 'top': { ax = d3.axisTop( scale ) break } default: break } if ( ticks ) { ax.ticks( ticks ) } if ( tickFormat ) { ax.tickFormat( tickFormat ) } if ( tickSize ) { ax.tickSize( ...tickSize ) } if ( tickSizeInner ) { ax.tickSizeInner( tickSizeInner ) } if ( tickSizeOuter ) { ax.tickSizeOuter( tickSizeOuter ) } if ( tickValues ) { ax.tickValues( tickValues ) } svgRoot .select( `.${clazz}` ) .attr( 'transform', t ) .call( ax ) return ax } static updateAxisHandler ({ svg, clazz, axis, tmpXScale, tmpYScale }) { switch ( clazz ) { case 'x-grid': case 'x-axis': { svgRoot.select( '.x-axis' ).call( axis['x-axis'].scale( tmpXScale )) svgRoot.select( '.x-grid' ).call( axis['x-grid'].scale( tmpXScale )) break } case 'y-grid': case 'y-axis': { svgRoot.select( '.y-axis' ).call( axis['y-axis'].scale( tmpYScale )) svgRoot.select( '.y-grid' ).call( axis['y-grid'].scale( tmpYScale )) break } default: { break } } } static lmenterHandler ({ cssClassId }) { svgRoot.selectAll( '.ink' ).style( 'opacity', 0.1 ) svgRoot.selectAll( `.line-shadow--el.${cssClassId}` ).style( 'opacity', 0.5 ) svgRoot.selectAll( `.ink.${cssClassId}` ).style( 'opacity', 1 ) } static lmleaveHandler ( { cssClassId }) { svgRoot.selectAll( '.ink' ).style( 'opacity', 0.5 ) svgRoot.selectAll( `.line-shadow--el.${cssClassId}` ).style( 'opacity', 0 ) svgRoot.selectAll( `.ink.${cssClassId}` ).style( 'opacity', 0.5 ) } static tmenterHandler ( el ) { d3.select( el ) .style( 'stroke', 'red' ) .style( 'stroke-width', 5 ) .style( 'cursor', 'grab' ) } static tmleaveHandler ( el ) { d3.select( el ) .style( 'stroke', '#000' ) .style( 'stroke-width', 1 ) .style( 'cursor', 'default' ) } static addDragLinePlaceholder ({ clazz }) { svgRoot .append( 'line' ) .attr( 'class', clazz ) .style( 'stroke', 'red' ) } static removeDragLinePlaceholder ({ clazz }) { svgRoot.select( 'line.' + clazz ).remove() } static dragLinePlaceholder ( svg, { clazz, x1, x2, y1, y2, strokeWidth }) { svgRoot .select( 'line.' + clazz ) .style( 'stroke-width', strokeWidth || 1 ) .attr( 'x1', x1 || 0 ) .attr( 'x2', x2 || 0 ) .attr( 'y1', y1 || 0 ) .attr( 'y2', y2 || 0 ) } static addDragCirclePlaceholder ( svg, { clazz }) { svgRoot .append( 'circle' ) .attr( 'class', clazz ) .style( 'fill', 'red' ) } static removeDragCirclePlaceholder ( svg, { clazz }) { svgRoot.select( 'circle.' + clazz ).remove() } static dragCirclePlaceholder ( svg, { clazz, cx, cy }) { svgRoot .select( 'circle.' + clazz ) .attr( 'r', 5 ) .attr( 'cx', cx ) .attr( 'cy', cy ) } // m drag static tmdragStartedHandler ( el, gfather, { xScale, yScale, store }) { Handler.addDragLinePlaceholder({ clazz: 'drag-line-placeholder' }) store.dispatch({ type: InputType.TICK_DRAG_STARTED, payload: { start: d3.mouse( svgRoot.node()), sClazz: gfather.attr( 'class' ), xScale, yScale, store, }, }) } static tmdragHandler ( el, gfather, { xScale, yScale }) { const clazz = gfather.attr( 'class' ) const [ mousex, mousey ] = d3.mouse( svgRoot.node()) switch ( clazz ) { case 'x-grid': case 'x-axis': { Handler.dragLinePlaceholder( svg, { clazz: 'drag-line-placeholder', x1: xScale( xScale.invert( mousex )), x2: xScale( xScale.invert( mousex )), y1: 0, y2: yScale.range()[0] + yScale.range()[1], }) return } case 'y-grid': case 'y-axis': { Handler.dragLinePlaceholder( svg, { clazz: 'drag-line-placeholder', y1: yScale( yScale.invert( mousey )), y2: yScale( yScale.invert( mousey )), x1: 0, x2: xScale.range()[1] + xScale.range()[0], }) return } default: { return } } } static tmdragEndedHandler ( el, gfather, { xScale, yScale, store }) { Handler.removeDragLinePlaceholder( { clazz: 'drag-line-placeholder' }) const clazz = gfather.attr( 'class' ) const end = d3.mouse( svgRoot.node()) store.dispatch( tickDragEnded({ svg, clazz, xScale, yScale, end })) function tickDragEnded ({ end, clazz, store, xScale, yScale, svg }) { return function ( dispatch, getState ) { dispatch({ type: InputType.TICK_DRAG_ENDED, payload: { end, eClazz: clazz, xScale, yScale, svg }, }) dispatch({ type: InputType.UPDATE_SCALE, payload: { clazz, xScale, yScale, end, start: getState().tick.start, }, }) dispatch({ type: InputType.UPDATE_AXIS, payload: { clazz, tmpXScale: getState().scale.tmpXScale, tmpYScale: getState().scale.tmpYScale, axis: getState().axis, }, }) dispatch({ type: InputType.UPDATE_LINES, payload: { ...getState().scale, xScale: getState().scale.tmpXScale, yScale: getState().scale.tmpYScale, ...getState().line, }, }) dispatch({ type: InputType.UPDATE_DOTS, payload: { ...getState().scale, xScale: getState().scale.tmpXScale, yScale: getState().scale.tmpYScale, ...getState().dot, }, }) } } } static updateScaleHandler ({ clazz, xScale, yScale, start, end }) { const tmpXScale = d3 .scaleTime() .domain( xScale.domain()) .range( xScale.range()) const tmpYScale = d3 .scaleLinear() .domain( yScale.domain()) .range( yScale.range()) switch ( clazz ) { case 'x-grid': case 'x-axis': { const [ dx0, dx1 ] = xScale.domain(), [ rx0, rx1 ] = xScale.range() tmpXScale .domain([ dx0, xScale.invert( start[0]), dx1 ]) .range([ rx0, xScale( xScale.invert( end[0])), rx1 ]) return { tmpXScale, tmpYScale } } case 'y-grid': case 'y-axis': { const [ dy0, dy1 ] = yScale.domain(), [ ry0, ry1 ] = yScale.range() tmpYScale .domain([ dy0, yScale.invert( start[1]), dy1 ]) .range([ ry0, yScale( yScale.invert( end[1])), ry1 ]) return { tmpXScale, tmpYScale } } default: { return { tmpXScale, tmpYScale } } } } static initSvgMarginAndCornerGroups ({ svg, tickSizeInner, width, height, margin, }) { const offset = 0 svg .append( 'rect' ) .attr( 'x', margin.left - offset - tickSizeInner ) .attr( 'y', margin.top - offset - tickSizeInner ) .attr( 'width', width - 2 * margin.left + 2 * offset + 2 * tickSizeInner ) .attr( 'height', height - 2 * margin.top + 2 * offset + 2 * tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', 'none' ) svg .append( 'g' ) .attr( 'class', 'top-left-corner' ) .attr( 'transform', `translate( 0, 0 )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', margin.left - offset - tickSizeInner ) .attr( 'height', margin.top - offset - tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#eee4' ) svg .append( 'g' ) .attr( 'class', 'bottom-left-corner' ) .attr( 'transform', `translate( 0, ${height - ( margin.top - offset - tickSizeInner )} )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', margin.left - offset - tickSizeInner ) .attr( 'height', margin.top - offset - tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#eee4' ) svg .append( 'g' ) .attr( 'class', 'bottom-right-corner' ) .attr( 'transform', `translate( ${width - ( margin.left - offset - tickSizeInner )}, ${height - ( margin.top - offset - tickSizeInner )} )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', margin.left - offset - tickSizeInner ) .attr( 'height', margin.top - offset - tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#eee4' ) svg .append( 'g' ) .attr( 'class', 'top-right-corner' ) .attr( 'transform', `translate( ${width - ( margin.left - offset - tickSizeInner )}, 0 )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', margin.left - offset - tickSizeInner ) .attr( 'height', margin.top - offset - tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#eee4' ) /// mar svg .append( 'g' ) .attr( 'class', 'left-margin' ) .attr( 'transform', `translate(0, ${margin.top - offset - tickSizeInner} )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', margin.left - offset - tickSizeInner ) .attr( 'height', height - 2 * margin.top + 2 * offset + 2 * tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#ccc4' ) svg .append( 'g' ) .attr( 'class', 'right-margin' ) .attr( 'transform', `translate( ${width - ( margin.left - offset - tickSizeInner )}, ${margin.top - offset - tickSizeInner} )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', margin.left - offset - tickSizeInner ) .attr( 'height', height - 2 * margin.top + 2 * offset + 2 * tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#ccc4' ) svg .append( 'g' ) .attr( 'class', 'top-margin' ) .attr( 'transform', `translate( ${margin.left - offset - tickSizeInner}, 0 )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', width - 2 * margin.left + 2 * offset + 2 * tickSizeInner ) .attr( 'height', margin.top - offset - tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#ccc4' ) svg .append( 'g' ) .attr( 'class', 'bottom-margin' ) .attr( 'transform', `translate( ${margin.left - offset - tickSizeInner}, ${height - ( margin.top - offset - tickSizeInner )} )` ) .append( 'rect' ) .attr( 'x', 0 ) .attr( 'y', 0 ) .attr( 'width', width - 2 * margin.left + 2 * offset + 2 * tickSizeInner ) .attr( 'height', margin.top - offset - tickSizeInner ) .style( 'stroke', 'orange' ) .style( 'fill', '#ccc4' ) } }3e:T4b9,function drawLines ( svg, data, { line, clazz } ) { const group = svgRoot.select(`g.${ clazz }`) const linesInkEl = group .selectAll('.line-ink--el') .data( data, d => _.replace( d.key, ' ', '-') ) linesInkEl .enter() .append('path') .merge( linesInkEl ) .attr('class', d => `line-ink--el id-${ d.key } ink` ) .style( 'stroke-width', 1 ) .style( 'stroke', '#ccc' ) .style( 'opacity', 0.5 ) .style( 'fill', 'none' ) .style( 'pointer-events', 'none' ) .attr( 'd', d => line( d.values ) ) .attr( `id`, d => `id-line-ink-${ d.key }` ) const linesShadowEl = group .selectAll('.line-shadow--el') .data( data, d => _.replace( d.key, ' ', '-') ) linesShadowEl .enter() .append( 'path' ) .merge( linesShadowEl ) .attr('class', d => `line-shadow--el id-${ d.key } shadow` ) .style( 'stroke-width', 7 ) .style( 'stroke', '#ccc' ) .style( 'opacity', 0 ) .style( 'fill', 'none' ) .attr( 'd', d => line( d.values ) ) .attr( `id`, d => `id-line-shadow-${ d.key }` ) linesInkEl .exit() .remove(); linesShadowEl .exit() .remove(); }3f:T4f9,function drawLowerUpperBandSurfaceMarker ( svg, lineData, opts ) { svg.selectAll('.intersection').remove() const { line, xScale, yScale, xkey, ykey, xExtent, yExtent, yRefLine } = opts const [ lower, upper ] = _.partition( lineData.values, item => _.get ( item, ykey ) <= yRefLine.y1 ) if ( _.size(upper) === 0 ) { return; } const ll = _.last( lower ) const fu = _.first( upper ) const intersection = calcIntersectPath (ll, fu, opts ) if ( !intersection ) { return; } const lowerPath = calcLowerPath( lower, intersection, opts ) const upperPath = calcUpperPath( upper, intersection, opts ) svg .append('circle') .classed('intersection', true) .attr('r', 5 ) .attr('cx', intersection[0] ) .attr('cy', intersection[1] ) .style( 'fill', 'blue' ) .style( 'pointer-events', 'none' ) .style( 'opacity', 0.5 ) svg .append('path') .classed('intersection', true) .attr('d', line ( lowerPath )) .style( 'fill', 'orange' ) .style( 'pointer-events', 'none' ) .style( 'opacity', 0.2 ) svg .append('path') .classed('intersection', true) .attr('d', line ( upperPath )) .style( 'fill', 'green' ) .style( 'pointer-events', 'none' ) .style( 'opacity', 0.2 ) }40:[] 2f:{"title":"Cumulative Line Chart","cells":[{"id":0,"value":"md`# Cumulative Line Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof datasetPicker = select({\n title: \"Dataset Name\",\n description: \"Pick dataset\",\n options: _.keys(datasets),\n value: _.first(_.keys(datasets))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"viewof groupPicker = select({\n title: \"Group/Team Name\",\n description: \"Pick Group/Team\",\n options: [\"All\", ..._.get(datasets, datasetPicker + \".groups\")],\n value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"viewof xTickTime = radio({\n title: \"X Tick Type\",\n description: \"Pick X Tick Type\",\n options: [\"timeDay\", \"timeMonth\", \"timeWeek\", \"timeYear\"],\n value: \"timeMonth\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"viewof xTicksSlideValue = slider({ \n min: 0, \n max: xTickTime === 'timeDay' ? 30 : ( xTickTime === 'timeMonth' ? 12 : 10 ), \n step: 1, \n title: `X Tick for: ${xTickTime}`, \n value: mutable xTicksValue \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"viewof yTicksSlideValue = slider({ \n min: 0, \n max: 20, \n step: 1, \n title: `Y Tick`, \n value: mutable yTicksValue \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2707,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2784,"value":"appRoot = d3.select(Root)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2912,"value":"svgRoot = appRoot.select( '#line-chart' )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2504,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3236,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3019,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2735,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2257,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2799,"value":"function svg ( state = {}, action ) {\n switch ( action.type ) {\n case InputType.SVG_INIT_CHART: {\n appRoot\n .select('#line-chart')\n .select( 'svg' )\n .attr( 'width', action.payload.width )\n .attr( 'height', action.payload.height )\n return state;\n }\n case InputType.SVG_INIT_GROUP: {\n appRoot.select('#line-chart svg').append( 'g' ).attr( 'class', action.payload.clazz )\n return state;\n }\n default:\n return state\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2672,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2567,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3881,"value":"datasets = await loadDatasets()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2927,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2839,"value":"function axis ( state = {}, action ) {\n switch ( action.type ) {\n case InputType.DRAW_GRID:\n case InputType.DRAW_AXIS: {\n const { clazz } = action.payload\n const ax = Handler.drawAxisHandler( action.payload )\n return { ...state, [clazz]: ax }\n }\n case InputType.UPDATE_AXIS: {\n Handler.updateAxisHandler( action.payload )\n return state\n }\n default:\n return state\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2754,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2676,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":3501,"value":"async function loadDatasets() {\n const datasets = {};\n let ds = await d3.json(`${API_URL}datasets.json`);\n\n _.each(ds, async name => {\n const json = await d3.json(`${API_URL}${name}`);\n const attrs = _.chain(json.attributes)\n .groupBy(\"name\")\n .mapValues(_.first)\n .value();\n const quantiAttrs = _.pickBy(attrs, d => d.type === \"quantitative\");\n const data = await d3.dsv(\n json.separator,\n `${API_URL}${json.file}`,\n castAttrs.bind(null, quantiAttrs)\n );\n const meta = json.meta;\n const groups = _.chain(data)\n .map(meta.group)\n .uniq()\n .remove()\n .value();\n datasets[json.name] = { meta, data, attrs, groups };\n });\n\n return datasets;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2067,"value":"store = configureStore( Reducer )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"function configureStore ( reducer ) {\n \n function logger({ getState }) {\n return next => action => {\n console.log('will dispatch', action)\n // Call the next dispatch method in the middleware chain.\n const returnValue = next(action)\n console.log('state after dispatch', getState())\n // This will likely be the action itself, unless\n // a middleware further in chain changed it.\n return returnValue\n }\n }\n \n // const { createStore, applyMiddleware, compose } = Redux\n // const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose\n // const middleware = [ thunk, logger ]\n \n let store = Redux.createStore( reducer, Redux.applyMiddleware(thunk, logger) )\n \n // store.subscribe(() => console.log( store.getState() ))\n \n return store\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"function drawCircles( svg, data, { clazz, xScale, yScale, parseTime, xkey, ykey } ) {\n \n const dotsEl = appRoot\n .select(`g.${ clazz }`)\n .selectAll( '.circles--el' )\n .data( data, d => d.key ) \n \n dotsEl\n .enter()\n .append( 'g' )\n .attr( 'class', 'circles--el' )\n .merge( dotsEl )\n .attr( 'd' , function ( d, i ) {\n const newSelf = d3.select( this ) \n\n _.each( d.values, () => {\n const circlesEl = newSelf.selectAll( '.circle-ink--el' ).data( d.values ) \n\n circlesEl.exit().remove() \n\n circlesEl\n .enter()\n .append( 'circle' )\n .merge( circlesEl )\n .attr( 'cx', dd => xScale( parseTime( _.get( dd, xkey ))) )\n .attr( 'cy', dd => yScale( _.get( dd, ykey )) )\n .attr( 'r', 2 )\n .style( 'pointer-events', 'none' )\n .attr( 'class', `circle-ink--el id-${ d.key } ink` )\n .style( 'opacity', 0.5 )\n .style( 'fill', '#777' )\n })\n }) \n \n dotsEl.exit().remove() \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"function drawAxis ( svg, { clazz, scale, t, ticks, tickSize, tickFormat, position, tickSizeInner, tickSizeOuter, tickValues } ) {\n \n let axis;\n \n switch ( position ) {\n case 'left': {\n axis = d3.axisLeft( scale );\n break;\n }\n case 'right': {\n axis = d3.axisRight( scale );\n break;\n }\n case 'bottom': {\n axis = d3.axisBottom( scale );\n break;\n }\n case 'top': {\n axis = d3.axisTop( scale );\n break;\n }\n default: break;\n }\n \n if ( ticks ) { axis.ticks( ticks ); }\n if ( tickFormat ) { axis.tickFormat( tickFormat ); }\n if ( tickSize ) { axis.tickSize( ...tickSize ); }\n if ( tickSizeInner ) { axis.tickSizeInner( tickSizeInner ); }\n if ( tickSizeOuter ) { axis.tickSizeOuter( tickSizeOuter ); }\n if ( tickValues ) { axis.tickValues( tickValues ); }\n\n svg\n .append( 'g' )\n .attr( 'class', `axis ${ clazz } ` )\n .attr( 'transform', t )\n .call( axis )\n \n return axis\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"function drawRefLineMarker ( svg, { xScale, yScale, yRefLine } ) {\n \n function dragstarted () {}\n \n function dragged () {\n d3.select(this)\n .attr( 'y1', function () {\n yRefLine.y1 = yScale.invert( d3.mouse(this)[1] )\n return yScale( yRefLine.y1 )\n })\n .attr( 'y2', function () {\n yRefLine.y2 = yScale.invert( d3.mouse(this)[1] )\n return yScale( yRefLine.y2 )\n })\n }\n \n function dragended () {}\n \n svg\n .append( 'g' )\n .attr( 'class', 'group-maker' )\n .append('line')\n .attr('x1', xScale( yRefLine.x1 || 0 ) )\n .attr('y1', yScale( yRefLine.y1 || 0 ) )\n .attr('x2', xScale( yRefLine.x2 || 0 ) )\n .attr('y2', yScale( yRefLine.y2 || 0 ) )\n .style('stroke', 'lightblue')\n .style('stroke-width', 2)\n .call(\n d3.drag()\n .on( 'start', dragstarted )\n .on( 'drag', dragged )\n .on( 'end', dragended )\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"function calcIntersectPath ( ll, fu, { xScale, yScale, xkey, ykey, xExtent, yExtent, parseTime, yRefLine } ) {\n return math.intersect ( \n [ xScale( parseTime( fu[xkey] ) ), yScale( fu[ykey] ) ],\n [ xScale( parseTime( ll[xkey] ) ), yScale( ll[ykey] ) ],\n [ xScale( xExtent[0] ), yScale( yRefLine.y1 ) ],\n [ xScale( xExtent[1] ), yScale( yRefLine.y1 ) ]\n )\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"function calcUpperPath ( upper, intersection, { xScale, yScale, xkey, ykey, xExtent, yExtent, formatTime, yRefLine } ) {\n return [\n { [xkey]: formatTime( xScale.invert( intersection[0] ) ), [ykey]: yScale.invert( intersection[1] ) }, // to intersection\n ...upper, \n { [xkey]: formatTime( xExtent[1] ), [ykey]: _.get( _.last( upper ), ykey ) }, // to rigth\n { [xkey]: formatTime( xExtent[1] ), [ykey]: yRefLine.y2 }, // to bottom \n { [xkey]: formatTime( xScale.invert( intersection[0] ) ), [ykey]: yScale.invert( intersection[1] ) }, // to intersection\n ]\n }\n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"function calcLowerPath ( lower, intersection, { xScale, yScale, xkey, ykey, xExtent, yExtent, formatTime, yRefLine } ) {\n return [ \n ...lower, \n { [xkey]: formatTime( xScale.invert( intersection[0] ) ), [ykey]: yScale.invert( intersection[1] ) }, // to intersectoin\n { [xkey]: formatTime( xExtent[0] ), [ykey]: yRefLine.y1 }, // to left\n { [xkey]: formatTime( xExtent[0] ), [ykey]: yExtent[0] }, // to bottom \n { [xkey]: _.get( _.first( lower ), xkey ), [ykey]: yExtent[0] }, // to right\n _.first(lower) // to top\n ]\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"teams = _.chain( datasets ).get('foot.data').map( 'team' ).uniq().value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"classes = _.chain( datasets ).get('learning.data' ).map( 'groupName' ).uniq().remove().value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"mutable xTicksValue = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"mutable yTicksValue = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":3518,"value":"castAttrs = ( attrs, d ) => {\n _.each( _.keys( attrs ), key => {\n d[key] = +d[key]\n d[attrs[key].cumulative] = +d[attrs[key].cumulative]\n })\n return d\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3290,"value":"API_URL = 'https://raw.githubusercontent.com/ezzaouia/cumulativeLineChart/master/data/'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"_ = require('lodash@v4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"math = require('https://unpkg.com/mathjs@5.4.1/dist/math.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { slider, select, radio, button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"Rx = require('https://unpkg.com/rxjs@6.3.3/bundles/rxjs.umd.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"Redux = require(\"redux\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"ReduxThunk = require('https://unpkg.com/redux-thunk@2.1.0/dist/redux-thunk.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"thunk = ReduxThunk.default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1872,"value":"log = (...args) => console.log( '====> ', ...args )","pinned":false,"hidden":false,"mode":"ojs"},{"id":3798,"value":"colors = await d3.json('https://gist.githubusercontent.com/ezzaouia/9c8e85f86c77f5e1dd887e69205cbad7/raw/b68552b070162ee7fa14ba4cb3a120b53fad8ef0/colors.json')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}