2c:null 2d:["$","title",null,{"children":"JS Frameworks : Timeline & Trends | Augustin Lacour | Observable"}] 32:T10d8,timeline = { const MARGIN = 10; const TITLE_HEIGHT = 40; const YEARS_DELTA = slot[1].getFullYear() - slot[0].getFullYear(); const GRAPH_HEIGHT = year_height * YEARS_DELTA; const AXIS_WIDTH = 50; const timelines = data.map(g => g.timelines).reduce((a, b) => a.concat(b), []); // Sizes related to data count const LINE_SPACING = (width - AXIS_WIDTH) / (timelines.length + 1); const HEIGHT = MARGIN * 4 + TITLE_HEIGHT + GRAPH_HEIGHT; const svg = d3.select(DOM.svg(width, HEIGHT)); svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', width) .attr('height', HEIGHT) .attr('fill', 'white'); const defs = svg.append('defs'); const graph = svg.append('g') .attr("transform", `translate(${MARGIN},${MARGIN + TITLE_HEIGHT})`) .attr('font-family', 'sans-serif'); const timeScale = d3.scaleTime().domain(slot).range([0, GRAPH_HEIGHT]); const infoIcon = defs.append('g').attr('id', 'info'); infoIcon.append('circle') .attr('r', 11) .attr('fill', 'white') .attr('cx', 11) .attr('cy', 11); infoIcon.append('path') .attr('d', iconsSvgPath.infoCircle) .attr('fill', '#333') .attr('transform', 'scale(0.012)'); const bellIcon = defs.append('g') .attr('id', 'bell') .append('path') .attr('d', iconsSvgPath.bell) .attr('fill', '#333') .attr('transform', 'scale(0.012)'); // Time Axis & Grid const timeAxis = d3.axisLeft(timeScale); timeAxis.ticks(d3.timeYear.every(year_height < 30 ? (year_height < 15 ? 3 : 2) : 1)); graph.append('g') .classed("y-axis", true) .attr("transform", `translate(${AXIS_WIDTH},0)`) .style("font-size", "12px") .call(timeAxis); graph.selectAll("g.y-axis g.tick") .append("line") .classed("grid-line", true) .attr("x1", 0) .attr("y1", 0) .attr("x2", (timelines.length + 1) * LINE_SPACING) .attr("y2", 0) .attr('stroke', "darkgray") .attr('stroke-width', 1) .attr('stroke-dasharray', '5,2') .attr('stroke-opacity', 0.7); if(slot[1] > Date.now()) { graph.append('rect') .attr('x', 0) .attr('y', timeScale(Date.now())) .attr('width', width - MARGIN) .attr('height', timeScale.range()[1] - timeScale(Date.now()) + 20) .attr('fill', 'lightgrey') .attr('fill-opacity', 0.3) graph.append('text') .text('THE FUTURE') .attr('font-size', (timeScale.range()[1] - timeScale(Date.now())) / 2) .attr('fill', 'gainsboro') .attr('text-anchor', 'middle') .attr('font-weight', 'bold') .attr('x', (width - MARGIN) / 2) .attr('y', (timeScale(Date.now()) + 20 + timeScale.range()[1]) / 2 + 20) } // Frameworks & Apps const frameworks = graph.selectAll('.framework') .data(timelines) .enter() .append('g') .attr('transform', (d, i) => `translate(${AXIS_WIDTH + (i+1) * LINE_SPACING},0)`); frameworks .append('text') .text((tl) => tl.timelineName) .attr('font-size', 14) .attr('text-anchor', 'middle') .attr('font-weight', 'bold') .attr('y', (tl, i) => timeScale(new Date(tl.events.versions[0][0])) - 20); frameworks.append('line') .attr('x1', 0) .attr('y1', (tl, i) => timeScale(new Date(tl.events.versions[0][0]))) .attr('x2', 0) .attr('y2', timeScale.range()[1]) .attr('stroke', (tl) => colors[tl.timelineName] || 'black') .attr('stroke-width', 4); const versions = frameworks .selectAll('.version') .data((tl) => tl.events.versions) .enter(); versions.append('use') .attr('href', '#info') .attr('x', -11) .attr('y', (version) => timeScale(new Date(version[0])) - 11); versions.append('text') .text((version) => version[1]) .attr('font-size', 11) .attr('x', 14) .attr('y', (version) => timeScale(new Date(version[0])) + 3); const events = frameworks .selectAll('.event') .data((tl) => tl.events.milestones) .enter(); const bellTip = d3Tip().attr('class', 'd3-tip').html((milestone) => milestone[1]); svg.call(bellTip); events.append('use') .attr('href', '#bell') .attr('x', -30) .attr('y', (milestone) => timeScale(new Date(milestone[0])) - 11) .on('mouseover', bellTip.show) .on('mouseout', bellTip.hide); return svg.node(); }33:Ted3a,SOTrendsSVG = ({ "jsFrameworks": ``, "jsEcosystem": `` })34:[] 30:{"id":"f4f050495b6bbfe4","slug":"js-frameworks-timeline-trends","title":"JS Frameworks : Timeline & Trends","thumbnail":"8b628c27694cbd2e6b77a16032fd73eba29bc311cd5a857e139d0383a1cb9f56","access_level":"public","create_time":"$D2018-06-09T14:31:34.131Z","update_time":"$D2019-07-25T06:59:24.492Z","view_time":null,"first_public_time":"$D2018-06-14T11:24:00.306Z","has_unpublished_edits":null,"fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"44947347cac8a066","login":"austil","name":"Augustin Lacour","avatar_url":"https://avatars-next.observableusercontent.com/326a69f8686bb7233643e908a7fb0ba0fc8cf5ca06ffa7ce6d7f54c14124c0de","tier":"starter_2024"},"version":934,"publish_version":934,"role":null,"authored":false,"authors":[{"type":"individual","id":"e437bb4aa1cd3665","login":"austil","name":"Augustin Lacour","avatar_url":"https://avatars-next.observableusercontent.com/326a69f8686bb7233643e908a7fb0ba0fc8cf5ca06ffa7ce6d7f54c14124c0de","tier":null}],"members":[{"type":"individual","id":"e437bb4aa1cd3665","login":"austil","name":"Augustin Lacour","avatar_url":"https://avatars-next.observableusercontent.com/326a69f8686bb7233643e908a7fb0ba0fc8cf5ca06ffa7ce6d7f54c14124c0de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"titling":"auto","title":"JS Frameworks : Timeline & Trends","cells":[{"id":0,"value":"md`\n# JS Frameworks : Timeline & Trends\n\nThings are moving fast in the world of front-end Javascript development. \nSo fast that feeling lost is common place, even as a full time user of this ecosystem. \nThis notebook is an attempt to draw the big picture of How fast things changed. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md`\n## A timeline\n\n**Manually gathered in Summer 2018**, the data start as a set of framework's dictionaries defined as follows :\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"timelineData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"viewof timelineData = fileInput({\n initialUrl: 'https://gist.githubusercontent.com/austil/b118197dd9a1c047df98a7f28293abef/raw/f8f2abd49c150f7e2a1cfa8cbe3e2e913cc0572c/js_framework_timelines.json',\n accept: '.json',\n load: value => d3.json(value)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"viewof F_Checkbox = {\n const groupNames = timelineData.map(g => g.groupName);\n return checkbox({\n title: 'Framework groups',\n description: 'Choose What to You want to see',\n options: groupNames.map(n => ({ value: n, label: n })),\n value: groupNames.filter(n => n!== \"The JavaScript Ecosystem\")\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"viewof width = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"viewof year_height = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"DOM.download(await rasterize(timeline), \"js_framework_timeline\", \"Download as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"colors = ({\n \"AngularJS\": \"indianred\", \n \"Angular\": \"firebrick\", \n \"React\": \"royalblue\", \n \"Vue\": \"forestgreen\", \n \"Backbone\": \"grey\", \n \"Ember\": \"lightsalmon\", \n \"Knockout\": \"lightcoral\",\n \"JQuery\": \"#0769AD\",\n \"Javascript\": \"grey\",\n \"NodeJS\": \"#215732\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"slot = [allDates[0], allDates[allDates.length - 1]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"allDates = data.map(g => {\n return g.timelines.map(t => {\n return Object.values(t.events).map(eg => {\n return eg.map(e => new Date(e[0]));\n }).reduce((a, b) => a.concat(b), []);\n }).reduce((a, b) => a.concat(b), []);\n})\n.reduce((a, b) => a.concat(b), [])\n.sort((a, b) => a - b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"data = {\n return timelineData.filter(g => F_Checkbox.includes(g.groupName));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\n## Trends\n\n> 🤔 I need to find something better here. More trends data at least.\n\nThe following graphs are from Stack Overflow Trends pages and show the evolution of the percentage\nof question concerning a JS Framework.\n\n### Is it a good incator ?\n\nIt is What it is. \nWe are more interrested in the trends than in the values themselves. \nWe can't conclude that there is as much people using React than AngularJS in 2018\nbut we can affirm that AngularJS is on the decline since 2016.\n\nHere are the 8 most relevant framework (according to me) out of 58.\n\n${SOTrendsSVG.jsFrameworks}\n\nAnd a comparaison with the good old JQuery and Javascript himself.\n\n${SOTrendsSVG.jsEcosystem}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md`\n## Reading material\n\n* [The Ultimate Guide to JavaScript Frameworks - JavascriptReport.com](https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/)\n* [The Brutal Lifecycle of JavaScript Frameworks - StackOverflow.blog](https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/)\n* [The State Of JavaScript](https://stateofjs.com/)\n* [Using Micro-Frontends to Permanently Solve the Legacy JavaScript Problem](https://medium.com/hacking-talent/using-micro-frontends-to-permanently-solve-the-legacy-javascript-problem-5fba18b0ceac)\n* [Github Stars !== Usage: React is still blowing Vue and Angular Away](https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":" d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"d3Tip = require('d3-tip@0.9.1/dist/index.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"import {fileInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"// Thx to https://github.com/encharm/Font-Awesome-SVG-PNG\niconsSvgPath = ({\n \"infoCircle\": \"M1152 1376v-160q0-14-9-23t-23-9h-96v-512q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23zm-128-896v-160q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23zm640 416q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z\",\n \"bell\": \"M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"