34:["$","title",null,{"children":"Introduction to D3.JS Data Visualization Magic (MSCommunity 2018) | Ante Tomić | Observable"}] 3c:T5d2,md`## So, what is D3.JS? D3.JS is an *open-source* data visualization library used for data visualization. It was released by Mike Bostock, Vadim Ogievetsky and Jeff Heer in February 2011. They first created Protovis which was released in April 2009 and after gaining a few years of knowledge, they decided to release a new library which is lighter and more powerful. Its name means Data Driven Documents because it only uses SVG, HTML, CSS and JS web standards for its graphs and functions. ## And, what isn't D3.JS? D3.JS is not: * A charting library * A drawing library * A framework * Something that comes with a set of pre-built charts It is a set of functions combined in APIs which are then together used for creating of very powerful visualizations! ## Why is data important for D3.JS? It is important that D3.JS gets some sort of dataset for visualization. We have a source which gives us a dataset. We then take that dataset and pass it to D3.JS which after preparation of data returns visualization as a result. Imagine that you have some sort of CSV file which contains historical US temperature data. Let's say that we have columns like date or temperature and precipitation data. When we have something not easy to read like this, it's very hard for human brain to process this, especially if we start to compare rows of data or something like that. But, if we present that data as a graph, human brain can process it much easier because everything is in visual format.`3d:T44e,{ const svg = d3.select(DOM.svg(width, usWeatherHistoryHeight + 35)); //Standard start :) svg.append("g") //This part adds circles ... also required if you want to create a scatter chart! .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(usWeatherHistoryData) .enter().append("circle") .attr("cx", d => x2(d.dateDisplay)) //Move specified number of units from the left to the right of the SVG element .attr("cy", d => y2(d.actualMeanTemperature)) //Move specified number of units from the top to the bottom of the SVG element .attr("fill", "red") .attr("r", 1.75); //Radius of element. Since you only tell with cx and cy where to put a dot, you have to set its radius with "r" attribute. svg.append("g") .call(xAxis2) .selectAll("text") .attr("transform", "translate(-48, 48) rotate(-48)") .style("text-anchor", "start") .style("font-size", 12); svg.append("g") .call(yAxis2) .selectAll("text") .style("font-size", 12); return svg.node(); }3e:T990,{ const svg = d3.select(DOM.svg(width, usWeatherHistoryHeight + 35)); //Standard start :) svg.append("g") //This part adds circles ... also required if you want to create a scatter chart! .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(usWeatherHistoryData) .enter().append("circle") .attr("cx", d => x2(d.dateDisplay)) //Move specified number of units from the left to the right of the SVG element .attr("cy", d => y2(d.actualMeanTemperature)) //Move specified number of units from the top to the bottom of the SVG element .attr("fill", "red") .attr("r", 1.75); //Radius of element. Since you only tell with cx and cy where to put a dot, you have to set its radius with "r" attribute. svg.append("path") //If you don't want only scatter chart, you most likely want a line chart, so you need to connect all those dots! .datum(usWeatherHistoryData) //If you want to create a single element for all values, use datum (you don't need enter and append then). If you want a DOM element per array value, use data (which then requires enter and append!). .attr("stroke", "red") .attr("stroke-opacity", 0.8) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", usWeatherHistoryAvgLine); //So, we wanna create an actual line chart, so we need to pass svg.append("g") .call(xAxis2) .selectAll("text") //We are selecting all those labels we have appended .attr("transform", "translate(-48, 48) rotate(-48)") //Let's say that we want to fit more values. That means that we need to rotate the values. We can do that by using the transform attribute where you can assign for how much you want to nudge the values and how much degrees they should be rotated. .style("text-anchor", "start") .style("font-size", 12); svg.append("g") .call(yAxis2) .selectAll("text") .style("font-size", 12); svg.append("text") //Let's say that I want a title, I can simply append text element, add some text to it and transform/style it. :) .text("US Mean Temperature Statistics (July 2014 - July 2015)") .attr("transform", `translate (${width / 4}, 20)`) .style("font-family", "Calibri") .style("font-size", 20) .style("font-weight", "bold"); return svg.node(); }3f:T446,md`## When to use D3.JS? When we are creating graphs, we first have to retrieve data. We can do that with either backend API or any URL by using D3 Fetch API. Then we have to look at our required graph type and we need to think about our needs. Do we need: * Simple, quick graphs * Or freedom and flexibility to create whatever you want to? If answer is the first item, you may not need D3 and you can use some of the available charting libraries like Highcharts or even some library based on D3.JS. If the other item is the answer, feel free to use D3.JS. One thing is common for both: the final result is data visualization, but we have to get to that. :) The next question we need to think about is data manipulation. If we are using external libraries, then it is nearly certain that we need external libraries for that. If we are using D3.JS, it again depends on our needs. If available D3 APIs are enough for our data manipulation needs, we can use only D3 to manipulate data. But, if we need something more or something D3 does not have, we have to use some of the external libraries.`40:T41e,md`## What about D3 & e.g. React? Let me first say that this applies to mostly any DOM manipulation libraries. The issue is that both libraries try to take over rendering of DOM and that creates the issues. D3 modifies the DOM through selections, appending and updating of children, while React makes the use of rendering of elements in its render function depending of props and state changes. How to solve this? There are 3 possible solutions: * React * React can handling rendering of SVG elements directly in JSX, so we need only D3 helpers to allow for easy loading, manipulations and formatting of data. * The issues with using React for rendering are: * D3 functions which directly modify the DOM are not usable. * Animating of components' props and re-rendering is noticably slower than D3 animations. * D3 * No readability because all code needs to be in 1 file. * Can be enabled through *shouldComponentUpdate* as always false. * Hybrid * Definitely the best idea! * React for static components, D3 for everything dynamic/animated.`41:T4e4,letterBarChartDefaultData = [ { data: 'A', frequency: 0.08167 }, { data: 'B', frequency: 0.01492 }, { data: 'C', frequency: 0.02782 }, { data: 'D', frequency: 0.04253 }, { data: 'E', frequency: 0.12702 }, { data: 'F', frequency: 0.02288 }, { data: 'G', frequency: 0.02015 }, { data: 'H', frequency: 0.06094 }, { data: 'I', frequency: 0.06966 }, { data: 'J', frequency: 0.00153 }, { data: 'K', frequency: 0.00772 }, { data: 'L', frequency: 0.04025 }, { data: 'M', frequency: 0.02406 }, { data: 'N', frequency: 0.06749 }, { data: 'O', frequency: 0.07507 }, { data: 'P', frequency: 0.01929 }, { data: 'Q', frequency: 0.00095 }, { data: 'R', frequency: 0.05987 }, { data: 'S', frequency: 0.06327 }, { data: 'T', frequency: 0.09056 }, { data: 'U', frequency: 0.02758 }, { data: 'V', frequency: 0.00978 }, { data: 'W', frequency: 0.02360 }, { data: 'X', frequency: 0.00150 }, { data: 'Y', frequency: 0.01974 }, { data: 'Z', frequency: 0.00074 } ]42:[] 38:{"id":"22da38a799c33364","slug":"introduction-to-d3-js-data-visualization-magic-mscommunit","title":"Introduction to D3.JS Data Visualization Magic (MSCommunity 2018)","thumbnail":"d8111d9934c91d6839e9465aa8694935604b396fab6ce0dccd1433e4c20ca84b","access_level":"public","create_time":"$D2018-05-13T11:24:10.260Z","update_time":"$D2019-02-03T08:57:09.727Z","view_time":null,"first_public_time":"$D2018-05-20T20:25:45.004Z","has_unpublished_edits":null,"fork":{"id":"779cd67af55363aa","slug":"introduction-to-d3-js-data-visualization-magic-dev-days-201","title":"Introduction to D3.JS Data Visualization Magic (Dev Days 2018 edition)","owner":{"id":"fd1b77499a80fc6b","login":"antetmc2","name":"Ante Tomić"}},"stars":21,"starred":false,"owner":{"type":"team","id":"fd1b77499a80fc6b","login":"antetmc2","name":"Ante Tomić","avatar_url":"https://avatars-next.observableusercontent.com/66378916fe5953d2e78e36623068fb1075bc462dac5db85522df3f106ba545a0","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":768,"publish_version":768,"role":null,"authored":false,"authors":[{"type":"individual","id":"e11770739ce6ad0f","login":"antetmc2","name":"Ante Tomić","avatar_url":"https://avatars-next.observableusercontent.com/66378916fe5953d2e78e36623068fb1075bc462dac5db85522df3f106ba545a0","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e11770739ce6ad0f","login":"antetmc2","name":"Ante Tomić","avatar_url":"https://avatars-next.observableusercontent.com/66378916fe5953d2e78e36623068fb1075bc462dac5db85522df3f106ba545a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3.JS Data Visualization Magic (MSCommunity 2018)","cells":[{"id":0,"value":"md`# Introduction to D3.JS Data Visualization Magic (MSCommunity 2018)\n\n## Opis predavanja (the only part of this notebook that is in Croatian :D):\nVidjeli smo u zadnjim meetupovima malo više o temama kao što su Angular, React, CSS Grid ili postavljanje JavaScripta, ali što o stvarima koje je teško napraviti bez dodatnih libraryja u Reactu? Danas često imamo potrebu za vizualizacijom podataka pa imamo web-alate što su Grafana, Kibana ili PRTG koji su upravo za to. Kroz razne primjere i interaktivnu demonstraciju ću vam predstaviti D3.JS, jedan od najmoćnijih alata za vizualizaciju podataka koji je definitivno must-have ako hoćete stvoriti bilo kakvu moćnu vizualizaciju! Vidjet ćemo i malo više o primjeni D3-a s .NET-om, Reactom ili čak s vanjskim libraryjevima.\n\nP.S. Radi lakšeg razumijevanja pojmova i lakšeg kasnije istraživanja, ostatak notebooka će biti na __engleskom__. :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"topic_head('D3.JS introduction')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"topic_head('So, how to start using D3.JS?')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md`We will build an example for line chart which uses the following data available on Github: https://github.com/fivethirtyeight/data/blob/master/us-weather-history/KIND.csv. The final result will be line chart which shows mean US temperature trend based on historical data.\n\n${build_step('1. Installation of D3.JS')}\nIt is fairly easy. :)\n\nAt the beginning, we have to install D3 as either NPM package or already available bundled script. It will depend on your needs.\n\nNPM: npm install --save d3\n\nScript: <script src=\"https://d3js.org/d3.v5.min.js\"></script>\n\nSince this is Observable, we will include NPM package.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`${build_step('2. Creating of start canvas in DOM')}\n\nThe next step is ensuring that we have html element inside of DOM. This is important since we will generate a graph inside of that element, so it represent graph creation start.\n\n<html>\n\t<body>\n\t\t<div class=\"line-chart-example\">\n\t\t</div>\n\t</body>\n</html>\n\n\nWe won't use this here in Observable, instead of that we will directly create the canvas in DOM.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`${build_step('3. Importing of D3 package')}\n\nNow since we use NPM version, we have to import the package, so that we can use all API functions. This is very important because we need those functions. We need this code in our JavaScript:\n\nimport * as d3 from 'd3'\n\nOR (ES5 version):\n\nvar d3 = require('d3')`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"topic_head('Data manipulation')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"md`${build_step('Data retrieval')}\nWhen we have prepared everything for start, we have to start with retrieving and preparation of data. We first need to retrieve data and we can use D3 Fetch API for that. There are multiple file formats supported and some of them are: *csv, json, imate, text* and many more. But, if you need to retrieve data from API, D3 has dropped support for HTTP requests, so you will have to use some of (external) libraries like *Axios, Fetch API, Superagent* or any other for that.\n\nIt is important that each data you retrieve from API meets the following requirement:\n* Data is in array format\n* Data is usable for visualization\n\nLet's look at the example of data retrieval with d3.csv function:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"usWeatherHistoryDataInput = d3.csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/us-weather-history/KIND.csv').then(data => data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`${build_step('Data preparation')}\nPreparation of data is more open. You can use one of D3 APIs. There are really a lot of options available and amongst them are:\n* D3 Array API - data manipulation\n* D3 Format API - number formatting\n* D3 Interpolate API - interpolation of any data type (create N values between 2 intervals)\n* D3 Random API - random number generation\n* D3 Time API & D3 Timer API\n\nBut if you need more than what D3 offers, you can use some of the external libraries such as Lodash (data manipulation) or Moment.JS (date/time manipulation) or any other that can be useful for your needs. Let's look at the example below. Here I am using external libraries and custom functions to get the desired data format.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"usWeatherHistoryData = d3.csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/us-weather-history/KIND.csv').then(data => {\n const mappedData = _.map(data, d => {\n return {\n date: moment(d.date, 'YYYY-M-D'),\n dateDisplay: moment(d.date, 'YYYY-M-D').format('YYYY-MM-DD'),\n actualMaxTemperature: _.round(fahrenheit2Celsius(_.toNumber(d.actual_max_temp)), 0),\n actualMinTemperature: _.round(fahrenheit2Celsius(_.toNumber(d.actual_min_temp)), 0),\n actualMeanTemperature: _.round(fahrenheit2Celsius(_.toNumber(d.actual_mean_temp)), 0),\n actualPrecipitation: _.toNumber(d.actual_precipitation)\n };\n }); \n return mappedData;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"md`So, before we continue with our steps, we now should choose our graph type. You have to think about what you want to choose and how you want to choose it. You can see some of the basic use cases below:\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`${build_step('Data calculation')}\nWe now have data and graph type and the next step is that we need to tell D3.JS how to create a graph. Since we have a line chart, we will have 2 axes: X which will show dates and Y which will show mean temperatures according to US historical data. Now we need a solution to calculate data for showing in graph. D3 offers a solution for that as well - __D3 Scale API__! I am gonna mention 4 scaling types (with examples):\n\n__Continuous__:\n${tex`f(x)=\\log(x)`}\n\n__Sequential__:\nGenerate HSL color from value\n\n__Quantize__:\n${tex`x = \\begin{cases}\n 1 &\\text{if } x \\epsilon\\lbrack 0,20 \\rbrack\t \\\\\n 2 &\\text{if } x \\epsilon\\lbrack 21,60 \\rbrack \\\\\n 3 &\\text{else}\n\\end{cases}`}\n\n__Ordinal__:\nEqually fit 18 values inside of ${tex`\\lbrack 0,100 \\rbrack`}.\n\n
\nSo now, let's start with data calculation!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"x2 = d3.scaleBand() // Each value needs a \"space\" across the graph width, so that everything can fit\n .domain(usWeatherHistoryData.map(d => d.dateDisplay)) // Pass an array of dates you want to use for domain\n .range([usWeatherHistoryDataMargin.left, width - usWeatherHistoryDataMargin.right]) // And map it into desired range and put them across the whole width of the graph","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"y2 = d3.scaleLinear() //Transform values into defined interval\n .domain([d3.min(usWeatherHistoryData, d => d.actualMeanTemperature), d3.max(usWeatherHistoryData, d => d.actualMeanTemperature)]).nice() //Check values, create interval for domain and give me nice numbers\n .range([usWeatherHistoryHeight - usWeatherHistoryDataMargin.bottom, usWeatherHistoryDataMargin.top]) //And then convert each number into this interval (range), so that it can fit inside of graph height. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"md`Now, with those functions, we can create axes!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"topic_head('DOM manipulation and connecting of everything')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"md`Now, we are not working on data anymore, now we are working directly on DOM elements. Let's move to our next step!\n\n${build_step('Axes')}\n\nTo create axes, we need D3's Axes API which will do that automatically for us. It offers 4 options for axes placement: top, bottom, left and right. Let's create axes then as well!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"xAxis2 = g => g //I want to add X-axis, so that I can know that is what\n .call(d3.axisBottom(x2).tickValues(x2.domain().filter((d, i) => !(i % 10)))) //We have 365 values, we have to somehow filter the values. We will use the tickValues function which basically returns the values which need to be shown in axiss. Additionally, we are filtering the items by taking every 10th element.\n .attr(\"transform\", `translate(0,${usWeatherHistoryHeight - usWeatherHistoryDataMargin.bottom})`) //Put X-axis on this location","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"yAxis2 = g => g //Same for Y-axis\n .attr(\"transform\", `translate(${usWeatherHistoryDataMargin.left},0)`)\n\t.attr(\"class\", \"axis axis--y\")\n .call(d3.axisLeft(y2))\n .call(g => g.select(\".domain\")) //Select a point from where we'll start building our text element\n .call(g => g.append(\"text\") //Let's say that I wanna add some additional text\n .attr(\"fill\", \"#000\") //And then I have to define all additional values\n .attr(\"x\", 2) //Set X position of the text (from left to right) in comparison to available D3 canvas\n .attr(\"y\", usWeatherHistoryDataMargin.top - 5) //Set Y position of the text (from top to bottom) in comparison to available D3 canvas\n .attr(\"dy\", \"0.32em\") //Set offset in comparison to Y values (additional moving of element). Em means relative value in comparison to font value (2em -> twice the current font size).\n .attr(\"text-anchor\", \"start\")\n .text(\"°C (avg)\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md`Our current result then looks like this!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"{\n const svg = d3.select(DOM.svg(width, usWeatherHistoryHeight + 35)); //Standard start :)\n \n svg.append(\"g\")\n .call(xAxis2)\n .selectAll(\"text\") //We are selecting all those labels we have appended\n .attr(\"transform\", \"translate(-48, 48) rotate(-48)\") //Let's say that we want to fit more values. That means that we need to rotate the values. We can do that by using the transform attribute where you can assign for how much you want to nudge the values and how much degrees they should be rotated.\n .style(\"text-anchor\", \"start\")\n .style(\"font-size\", 12);\n \n svg.append(\"g\")\n .call(yAxis2)\n .selectAll(\"text\")\n .style(\"font-size\", 12);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`Now we can add circles and lines to get the final result!\n\n${build_step('Scatter plot chart')}\n\nWhen we are creating line chart, our next step is basically creating of scatter plot chart because line chart is nothing more than a scatter plot chart where circles are connected with lines. We will get the following result:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"md`What are we missing to get a proper line chart? We need a way to connect circles with lines and we can do that with D3 Shape API which has the function for creating lines connecting dots!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"md`${build_step('Line chart')}\n\nWe are using d3.line() function from D3 Shape API where we need to pass 2 parameters: X value and Y value. For each one of those parameters, we need to pass the actual X and Y functions with values that need to be calculated. Those values are then used by D3 to determine lines which will connect each dot. As a result, we will get a line chart. :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"usWeatherHistoryAvgLine = d3.line() //Construct a line\n\t\t\t\t\t.x(d => x2(d.dateDisplay)) //For X-axis, please take a date I'm looking at\n\t\t\t\t\t.y(d => y2(d.actualMeanTemperature)) //For Y-axis, please take a mean temperature for that day","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"md`And voila. ${html`😎`} You can also add some additional elements if you want to. :D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"usWeatherHistoryDataMargin = ({top: 50, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"usWeatherHistoryHeight = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"topic_head('D3 usage')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"topic_head('Conclusion')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`Let's sum up everything. :)\n## Advantages:\n* Very powerful\n* A lot of freedom with graph creation\n* Flexibility because there is no limit with what can be created\n* A lot of functionalities for usage based on existing JS functions\n* Good documentation & a lot of examples\n* A lot of D3-based libraries and additional library helpers available\n\n## Disadvantages:\n* Requires learning curve because it is non-trivial and you need to understand what and how you want to get some result\n* DOM manipulation can be slow for large number of entries\n* Already mentioned clashing with DOM manipulation libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"md`# Additional examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof circles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md`## Simple, quick and short example: Circles\n\nWe will create a series of circles using a slider called *circles* above. Chosen value is: **${circles}**. Let's create ${Math.floor(400/circles)} black circles for interval (${circles/2}, 200).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"circleGraphSize = width < 400 ? width : 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`Now, the approach above is quite similar to what we are doing when we are for example using React for rendering of D3. There, we calculate the values and then we generate the DOM via JSX. :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Example: Bar Chart\n\nLet's start with the most basic bar chart! I've initialized some variables like data, margin and height below and then we will use those for generation of our chart!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"letterBarChartFilteredText = _.toUpper(letterBarChartText.replace(/[^A-Za-z]/g, ''))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"letterBarChartInput = _.reduce(letterBarChartFilteredText.split(''), (result, value) => {\n if(!result[value])\n result[value] = 1;\n else\n result[value]++;\n \n return result;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"letterBarChartInputData = _.chain(letterBarChartInput).map((value, key) => ({data: key, frequency: value/letterBarChartFilteredText.length})).sortBy(x => x.data).value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"letterBarChartData = barChartRadio === \"default\" ? letterBarChartDefaultData : letterBarChartInputData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"letterBarChartMargin = ({top: 30, right: 30, bottom: 40, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"letterBarChartHeight = 440","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`Now when we have data, we have to tell D3.JS what to do with it. We will first generate two functions which will generate values for both axes: X and Y. The goal is to get the functions which can be used to generate everything necessary for graph generation.\nX-axis will be generated with _scaleBand_ what means that we have to fit all letters across the whole width, while the Y-axis will be generated with _scaleLinear_ what basically means that we're translating the values from domain to defined range, so that everything can fit into our defined height. After this, all we have to do is pass the values and we'll get the values we need to use to put those values in the graph!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"x1 = d3.scaleBand() //Bar column for each letter :)\n.domain(letterBarChartData.map(d => d.data)) //Call those letters like this\n.range([letterBarChartMargin.left, width - letterBarChartMargin.right]) //And put them across the whole width\n.padding(0.15) //Bars shouldn't be so close like sardines in a can :)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"y1 = d3.scaleLinear() //Transform values into this interval\n .domain([0, d3.max(letterBarChartData, d => d.frequency)]).nice() //Give me a domain with nice numbers (without something like 12.354251364)\n .range([letterBarChartHeight - letterBarChartMargin.bottom, letterBarChartMargin.top]) //And transform into this range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"xAxis1 = g => g //I want to add X-axis, so that I can know that is what\n .attr(\"transform\", `translate(0,${letterBarChartHeight - letterBarChartMargin.bottom})`) //Where should the axis be\n .call(d3.axisBottom(x1) //Call our x function\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"yAxis1 = g => g //Same for Y-axis\n .attr(\"transform\", `translate(${letterBarChartMargin.left},0)`)\n .call(d3.axisLeft(y1).ticks(10, \"%\")) //Give me nice percentages, so that we can continue with nice numbers :)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`But ... that's not all! It is important to say that D3.JS graphs refresh when you change data! Let's try that with 2 options below. You can enter either your input or choose the default one from the presentations. Check below how the graph changes!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"viewof letterBarChartText = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof barChartRadio = radio({\n title: 'Bar chart data format',\n description: 'Please select your desired data format for bar chart.',\n options: [\n { label: 'Default', value: 'default' },\n { label: 'Input', value: 'input' }\n ],\n value: 'default'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`And magic combined with graph generation gives us this ... :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n var svg = d3.select(DOM.svg(width, letterBarChartHeight)); //You start from some element and you select it\n \n svg.append(\"g\") //This part gives us bars for each letter\n .selectAll(\"rect\").data(letterBarChartData).enter().append(\"rect\") //Generate bar for each row in data ... this row's the one you should blame for all those beautiful data! :)\n .attr(\"class\", \"bar\")\n .attr(\"x\", d => x1(d.data)) //Where should be each value\n .attr(\"y\", d => y1(d.frequency)) //How high should be each bar\n .attr(\"height\", d => y1(0) - y1(d.frequency)) //Height from bottom to top (value)\n .attr(\"width\", x1.bandwidth()); //How wide should be each bar?\n \n svg.append(\"g\") //This part gives us X-axis\n .call(xAxis1)\n .selectAll(\"text\")\n .style(\"font-size\", 13);\n svg.append(\"g\") //This part gives us Y-axis\n .call(yAxis1)\n .selectAll(\"text\")\n .style(\"font-size\", 13);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`More *cool* examples: :)\n\nhttp://www.decembercafe.org/demo/relation/\n\nhttp://bl.ocks.org/brattonc/5e5ce9beee483220e2f6\n\nhttp://d3tetris.herokuapp.com/ -> You can play Tetris! :D\n\nhttp://www.r2d3.us/visual-intro-to-machine-learning-part-1/ -> You can look at machine learning explanation made with D3.JS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"html`

🍕🍕🍕