2a:null 2b:["$","title",null,{"children":"Concepts popularity trends tiny charts | Hongtao Hao | Observable"}] 31:Tc42,a_table = table2(d3.groups(data, d => d.concept_1) .filter(([, data]) => data.some(d => d['rank_1'] <= rankCutoff)) .map(([key, data]) => ( { "Proportion_0": area(data.map(d => Math.max(0, d.proportion_0)) , { width: 150, height: height, color: { line: "black", fill: "skyblue" }, highlights: { max: "orange", end: "black" }, margin: { vertical: 0.1, horizontal: 0.01 }, scaling: "zero" }), Concept_0: data[0]['concept_0'], "Historical_Total_0": data[0]['concept historical total_0'], "Proportion_1": area(data.map(d => Math.max(0, d.proportion_1)) , { width: 150, height: height, color: { line: "black", fill: "#d0f0c0" }, highlights: { max: "blue", end: "black" }, margin: { vertical: 0.1, horizontal: 0.01 }, scaling: "zero" }), Concept_1: key, "Historical_Total_1": data[0]['concept historical total_1'], // " ": "||", // "Rank": data[0]['rank_1'], // "Level_1": data[0]["level_1"], "Proportion_2": area(data.map(d => Math.max(0, d.proportion_2)) , { width: 150, height: height, color: { line: "black", fill: "pink" }, highlights: { max: "blue", end: "black" }, margin: { vertical: 0.1, horizontal: 0.01 }, scaling: "zero" }), Concept_2: data[0]['concept_2'], "Historical_Total_2": data[0]['concept historical total_2'], // "Rank_2": data[0]['rank_2'], // "Level_2": data[0]["level_2"], "Proportion_3": area(data.map(d => Math.max(0, d.proportion_3)) , { width: 150, height: height, color: { line: "black", fill: "orange" }, highlights: { max: "blue", end: "black" }, margin: { vertical: 0.1, horizontal: 0.01 }, scaling: "zero" }), Concept_3: data[0]['concept_3'], "Historical_Total_3": data[0]['concept historical total_3'], // "Rank_3": data[0]['rank_3'], // "Level_3": data[0]["level_3"], })), { width: "1440px", layout: "fixed", widths: ["150px", "130px", "50px", "150px", "130px", "50px", "150px", "130px", "50px", "150px", "130px", "50px", ], align: ["center", "left", "center", "center", "left", "left", "center", "left", "left", "center", "left", "left",], cols: ['Trend', 'L0', 'Total', 'Trend', 'L1', 'Total', 'Trend', 'L2', 'Total', 'Trend', 'L3', 'Total', ] } ) // , { // width: "1350px", // layout: "fixed", // // whitespace: ["100px","100px", "0px","0px","0px", "10px","0px","0px", "0px"], // widths: ["200px", "200px", "50px", "200px", "200px", "50px", "200px", "200px", "50px"], // align: ["center", "left", "center", "center", "left", "left", "center", "left", "left"], // cols: ['Trend', 'Level1 Concept', '#', 'Trend', 'Level2 Concept', '#', 'Trend', 'Level3 Concept', '#'], // } // )32:Tfba,function table2(data, options) { let { display, width, layout, caption, cols, rows, align, color, formats, widths, overflow, overflowwrap, whitespace, wordbreak, totals } = { display: "inline-table", width: "100%", layout: "auto", caption: { value: "", side: "bottom" }, cols: Object.keys(data[0]), rows: [...data].map(Object.values), align: null, color: null, formats: null, widths: null, overflow: "auto", overflowwrap: "normal", whitespace: "normal", wordbreak: "normal", totals: null, ...options }; const statistics = { sum: d3.sum, mean: d3.mean, median: d3.median }; // Array of column data types, which is used in later calculations // For example, dates must use d3.timeFormat(), while numbers should use d3.format(). // Can use this Array to validate the data type of a column before passing the appropriate format functionn // In instances where colformats are specified const dtypes = Object.values([...data][0]).map(value => Object.prototype.toString.call(value) ); const format = (value, i) => formats[i] === null ? value : dtypes[i] === '[object Date]' ? d3.timeFormat(formats[i])(value) : d3.format(formats[i])(value); if (formats === null) { formats = Array(Object.keys([...data][0]).length).fill(null); } if (align === null) { align = Array(Object.keys([...data][0]).length).fill(null); } if (color === null) { color = Array(Object.keys([...data][0]).length).fill(null); } if (layout === "fixed") { if (widths !== null) { var colgroup = html``; widths.forEach(col => colgroup.appendChild(html``) ); } } const svg = d3.create("svg").style("overflow", `${overflow}`).style("font-family", "Open Sans").style("font-size") const root = html`

`; const tbase = html`

`; tbase.appendChild( html`${caption.value}` ); if (typeof colgroup !== "undefined") { tbase.appendChild(colgroup); } const header = html``; if (cols !== null && cols !== "") { const header_row = header.appendChild(html``); [...cols].forEach((col, i) => header_row.appendChild( html`${col}` ) ); } const body = html``; rows.forEach(row => { body.appendChild( html`${row.map( (item, i) => html`${format( item, i )}` )}` ); }); const footer = html``; if (totals !== null && totals !== "") { const footer_row = footer.appendChild(html``); Object.keys(data[0]).forEach((col, i) => footer_row.appendChild( html`${ totals[i] === null && i === 0 ? "Total" : totals[i] === null ? "" : dtypes[i] === "[object Number]" ? format(statistics[totals[i]](data, d => d[col]), i) : "" }` ) ); } tbase.appendChild(header); tbase.appendChild(body); tbase.appendChild(footer); root.appendChild(tbase); // root.appendChild(tbase); return root; }34:[{"id":"00cee8ab351dd9933a7661e367533eff932bea37df4ffcdee920b409667fd3183816efb37a33b13e91f4002fa8fdd9662d1ce51a8637a8fd722545e47ba0493e","href":"https://static.observableusercontent.com/files/00cee8ab351dd9933a7661e367533eff932bea37df4ffcdee920b409667fd3183816efb37a33b13e91f4002fa8fdd9662d1ce51a8637a8fd722545e47ba0493e","name":"top_concepts_trends_df@2.csv","type":"text/csv","lastModified":1655237171585.225,"size":68317},{"id":"c3d916def10b5b7ac046dee77e313560a633e61538ff4162c24f7b5ac8290cdcb52ea565e797bcef60dc7d96e20c4e194c993e2454a90389429002cc7e5243e8","href":"https://static.observableusercontent.com/files/c3d916def10b5b7ac046dee77e313560a633e61538ff4162c24f7b5ac8290cdcb52ea565e797bcef60dc7d96e20c4e194c993e2454a90389429002cc7e5243e8","name":"top_level_concepts_try@1.csv","type":"text/csv","lastModified":1647457127045.799,"size":54799},{"id":"7165069253e9c5c118ecd2e7375a9ddc51ca514469326043b07b8f1e01a2ebc741381be61f7872434a176dace4e3bff83a886ad01d1cb61deeccf3cd6ecd69e4","href":"https://static.observableusercontent.com/files/7165069253e9c5c118ecd2e7375a9ddc51ca514469326043b07b8f1e01a2ebc741381be61f7872434a176dace4e3bff83a886ad01d1cb61deeccf3cd6ecd69e4","name":"top_level1_concepts@3.csv","type":"text/csv","lastModified":1647454882146.051,"size":17457},{"id":"87450f90f461e68ab716af3bfffc751e14d54022858baca12e76ab2c6368a3eaed55ca337dca9f87fab2b2c0bac95bc2fa88462dc0973bfa1d7f91bb33ed0793","href":"https://static.observableusercontent.com/files/87450f90f461e68ab716af3bfffc751e14d54022858baca12e76ab2c6368a3eaed55ca337dca9f87fab2b2c0bac95bc2fa88462dc0973bfa1d7f91bb33ed0793","name":"top_level_concepts.csv","type":"text/csv","lastModified":1647454637843.913,"size":54563},{"id":"d32e98133948cac823e748b6dd605fe4a31933e4d1748ca2b1e31f195e40e35165d9bcfaaca36d5cbf281207fdbddeb3d56a40aa1fd767ec5e2a1d79378c12ec","href":"https://static.observableusercontent.com/files/d32e98133948cac823e748b6dd605fe4a31933e4d1748ca2b1e31f195e40e35165d9bcfaaca36d5cbf281207fdbddeb3d56a40aa1fd767ec5e2a1d79378c12ec","name":"top_concepts_trends_df.csv","type":"text/csv","lastModified":1647601454579.795,"size":153202},{"id":"a5cc804d3833543ddf0f3339f6fae83c0c94a20c322e089c3ebc1fe4e0cbd6c19efab54d38797bf637c8795f66c3cee9aeca2bcd9f324e0208882169f698409e","href":"https://static.observableusercontent.com/files/a5cc804d3833543ddf0f3339f6fae83c0c94a20c322e089c3ebc1fe4e0cbd6c19efab54d38797bf637c8795f66c3cee9aeca2bcd9f324e0208882169f698409e","name":"top_concepts_trends_df@1.csv","type":"text/csv","lastModified":1647874461922.374,"size":68714},{"id":"c17d678d89469fb7d9a57df18d947e86d0fcc90dcdf4f6d354fcd83989a6cf4b4087dca9d26aa238da960bded932e8cf4393c97d98e8bb5920dfff0eea6d9be4","href":"https://static.observableusercontent.com/files/c17d678d89469fb7d9a57df18d947e86d0fcc90dcdf4f6d354fcd83989a6cf4b4087dca9d26aa238da960bded932e8cf4393c97d98e8bb5920dfff0eea6d9be4","name":"top_concepts_trends_df@3.csv","type":"text/csv","lastModified":1655762695744.433,"size":68903}] 2e:{"id":"7aa4f28c5654ff15","slug":"concepts-popularity-trends-tiny-charts","title":"Concepts popularity trends tiny charts","thumbnail":"dc90f04b91985e0cbb6f80670994ba6e174c3e2aa1cd3958727d1862206bc94c","access_level":"public","create_time":"$D2022-03-15T21:32:52.424Z","update_time":"$D2022-06-26T15:29:49.690Z","view_time":null,"first_public_time":"$D2022-04-04T15:30:58.489Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024"},"version":527,"publish_version":527,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null}],"members":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Concepts popularity trends tiny charts","cells":[{"id":0,"value":"# Concepts popularity trends tiny charts","pinned":true,"hidden":false,"mode":"md"},{"id":316,"value":"viewof rankCutoff = Inputs.range([0, 30], {step: 1, label: \"cutoff for ranks\", value: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"viewof height = Inputs.range([40, 60], {step: 1, label: \"Area Charts Height\", value: 50})","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof HeaderFontSize = Inputs.range([12, 20], {step: 1, label: \"Header Font Size\", value: 18})","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"viewof fontsize = Inputs.range([12, 20], {step: 1, label: \"Body Text Font Size\", value: 17})","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"rankCutoff","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"// dataTry = FileAttachment(\"top_level_concepts_try@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"data = d3.csv(\"https://raw.githubusercontent.com/hongtaoh/32visNEW/master/data/plots/top_concepts_trends_df.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {\n line,\n bar,\n area,\n histogram,\n range,\n // table\n} from \"@hamzaamjad/tiny-charts\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"