2e:["$","title",null,{"children":"30 Days of D3 Dataviz | Sandraviz | Observable"}] 33:T54e,md`# 30 Days of D3 Dataviz As I know how hard it is to learn d3.js and especially to continue learning I created this 30 days of d3 dataviz notebook collection. If you also want to refresh your [data visualisation](https://slides.com/sandraviz/data-visualization) and [storytelling](https://slides.com/sandraviz/viz-story) knowledge, plese check out these presentations. As a guidance I added the days to each section in order to finish this course in 30 days. I use the platform Observable, which allows you to just **fork my notebooks and play around** with the code. Therefore it is an experimental and fast way of learning the basic in creating d3.js dataviz. Additionally I have designed another d3.js learning material, which I used to **teach at different universities**. You can find all the material in this [Github Repository](https://github.com/sandravizz/D3.js-beginners-course). The examples you find there are using the latest version of d3.js. Often we need to do some data preparation and processing before creating a certain visualisation. Hence I intorduce you also to **arquero.js**, which is easy to use. Moreover can you keep working with JavaScript, instead of switiching programming languages and environments as it is when working with Pyhon or R. No worries, we go step by step or **notebook by notebook**. 🧘🏼‍♀️`34:T56b,35:[] 31:{"id":"25470d950fc219b7","slug":"30_days_d3_dataviz","title":"30 Days of D3 Dataviz","thumbnail":"be62c292af96bc85ba5622ddb238342161c33ac4aafd71caed03a0a828be19ab","access_level":"public","create_time":"$D2021-03-28T12:47:37.200Z","update_time":"$D2024-10-05T10:58:04.391Z","view_time":null,"first_public_time":"$D2021-03-28T13:29:21.960Z","has_unpublished_edits":null,"fork":false,"stars":60,"starred":false,"owner":{"type":"team","id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/e6a2480f89a40dcfbe75f19d5081ae2296848971c4b934ed0499fd3b7f1973eb","tier":"starter_2024"},"version":1945,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}],"members":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":{"id":"5fd1d6addd68348a","slug":"30-days-of-d3-dataviz","title":"30 days of d3.js data viz","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"type":"notebook","body":{"title":"30 Days of D3 Dataviz","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"animation = md`\n\n${previews(\n listings.map((d) => {\n return {\n path: \"@\" + d.creator.login + \"/\" + d.slug,\n thumbnail: d.thumbnail,\n author: d.creator.login\n };\n })\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"## Introductions | 1. - 3. day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"md` ### Intro to d3.js\n\nThis [notebook](https://observablehq.com/@sandraviz/d3image) contains a short introduction to d3.js and its web environment. Additionally you can find a list of useful links to explore more about some impressive use cases of d3.js. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"### Intro to Observable \n\nObservable as a coding environment offers some nice options like forking, where you create your own copy of someone else's notebook. In this [notebook](https://observablehq.com/@sandraviz/intro-to-observable) I explain the very basics to know in order to understand how to create and work with notebooks in Observable. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"md` ### Intro to HTML, SVG and CSS\n\nBefore starting with d3.js, lets do a quick intro or recap of the web basics including HTML, SVG and CSS shown in this [notebook](https://observablehq.com/@sandraviz/html-css-intro).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"md` ### Intro to Javascript\n\nD3 is a Javascript library, therefore for those that are not very familiar with this programming language it is recommended to check out some basics represented in this [notebook](https://observablehq.com/@sandraviz/intro-to-data-in-js).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"## Basic concepts & charts | 4. - 12. day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1129,"value":"### Selections \n\nAfter all these intros, we will now start using d3.js to create our first visualisation. In this [notebook](https://observablehq.com/@sandraviz/selections) I explain how to use selections, one of the general d3.js concepts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":530,"value":"md` ### Venn diagram\n\nJust using selections and painting three circles we can already create a beautiful venn diagram as shown in this [notebook](https://observablehq.com/@sandraviz/venn_diagram).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"md` ### Data binding\n\nThis all looks very fancy, but in order to create data visualizations, we need to connect data and let the data drive our visuals. Therefore the first step is to \"bind the data\" and then define the visual encodings as connectors of variables and visual attributes, which is shown in this [notebook](https://observablehq.com/@sandraviz/data-binding).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md` ### Data loading\n\nOf course data are mainly saved in csv, json or xml formats, hence we need to load the data first. In this [notebook](https://observablehq.com/@sandraviz/d3-csv) and this [notebook](https://observablehq.com/@sandraviz/spotify-artist-data-loading-d3?collection=@sandraviz/30-days-of-d3-dataviz) I explain the the general use of d3.csv. GIST is useful as quick solution to store your data online.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"### Histograms\n\nWe use histograms to check on the distributions, but it is important to know how to \"read\" them correctly. Histograms are defined by certain parameters, which need to be set beforehand. Again it is necessary to understand the consequences of these parameter-choices when interpreting the results. Afterward you can find in this [notebook](https://observablehq.com/@sandraviz/airbnb-berlin-data) and this [notebook](https://observablehq.com/@sandraviz/histograms) how to import a histogram from another notebook. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1697,"value":"### Data sources\n\nIn the process of creating more and more data visualisations I realised how useful it is to have a summary of data sources, which you can find in this [notebook](https://observablehq.com/@sandravizmad/data-sources)The sources are validated and contain relevant information about our world. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":546,"value":"### Scales \n\nOnce we connect data with visual elements we might want to use a scale to represent them in a more readable way. In this [notebook](https://observablehq.com/@sandraviz/d3-scale) I explain the general d3.scale concept and in this [notebook](https://observablehq.com/@sandraviz/scaling) you can find a simple example. This [notebook](https://observablehq.com/@sandraviz/scaled-circles) and this [notebook](https://observablehq.com/@sandraviz/car_bubble) showcase bubble charts using 4 different scales. How much the right scale impacts the interpretation I show in this [notebook](https://observablehq.com/@sandraviz/powerofscale)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":553,"value":"md` ### Axes\n\nOften we want to add axes to our visualisation to make interpretation easier. In d3.js axes are a group element which contains a \"path\", \"line\" and \"text\" element. These elements can be easily styled using CSS. In this [notebook](https://observablehq.com/@sandraviz/axes) I introduce d3.js axes. Adding axis to a barcode chart is shown in this [notebook](https://observablehq.com/@sandraviz/barcode-plot?collection=@sandraviz/30-days-of-d3-dataviz).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"### Scatter plot \n\nScatter plots are a simple and useful way of visually showing the relationship between two variables. In this [notebook](https://observablehq.com/@sandraviz/log-scatter-plot) I use the diamond dataset. I applied logarithmic scaling to give more visual space to the majority of the data points. When changing the scaling from linear to logarithmic it is very important to add axes and give the context. Now we can already create our first static scatter plot using Spotify data shown in this [notebook](https://observablehq.com/@sandraviz/spotify-artists-d3-js-step-1).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"md` ### Bar chart \n\nBar charts are a great way of making exact comparisons across categories. With d3.js we create bar charts by using the html tag \"rect\". Watch out! because we need to switch y position and hight as the 0,0 point of a webpage is in the left upper corner which is not inline with our general \"chart reading\". Check out this [notebook](https://observablehq.com/@sandraviz/bar-chart) as an example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"Now you can try out what you have learnt in this first [assignment](https://observablehq.com/@sandraviz/1-assignment).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1226,"value":"## Dynamic visualisations | 13. - 19. day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1190,"value":"md` ### Transitions \n\nOur visualizations are web-based, so why not making them dynamic. First we need to understand the concept of d3.transitions. In this [notebook](https://observablehq.com/@sandraviz/simple-animation) I show a simple example for how it works and to which components it can be applied. Let's get a bit more creative as shown in this [notebook](https://observablehq.com/@sandraviz/simple-transition).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"md` ### Color animation \n\nNow we can apply the idea of transitions to the different data visualizations. Let's start with something simple by just change the color of our circles in a scatter plot shown in this [notebook](https://observablehq.com/@sandravizmad/animated-scatter-plot_color)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"md` ### HTML Buttons\n\nOften we do not want that the animation starts straight away, but rather give the user the possbility to choose the start and maybe even the reset of the animation by clicking buttons shown in this [notebook](https://observablehq.com/@sandravizmad/buttons).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md` ### Visual encoding HTML buttons \n\nNow we can combine all these features (button, transition, data visualization) together. Often when desiging our data visualizations, we need to choose *wisely* the visual encodings. This choice could be even given to the user by adding buttons for switching to different visual encoding options. A demostration of this idea is shown in this [notebook](https://observablehq.com/@sandravizmad/visual_encoding_button)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"md` ### Height animated bar chart\n\nThe idea of animation is to make the chart dynamic. As bar charts often are sorted to read them better, we can animation to make them appear in a sequent way. Like this the user has time to digest the whole information as seen in this [notebook](https://observablehq.com/@sandravizmad/animated-bar-chart)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md` ### Animated scatter plots\n\nAnimation can help us tell the story like for example in this [notebook](https://observablehq.com/@sandraviz/animated-scatter), in which the animation shows how the visual encoding \"color\" is added and how the plot changes when transforming scales form linear to logathrimic. But sometimes animation is just creating some nice effect like in this [notebook](https://observablehq.com/@sandraviz/spotify-artists-d3--step2). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"### Tooltips\n\nUsing web based data visualisations we want to add interactivity. In this [notebook](https://observablehq.com/@sandraviz/simple-tooltip) I show the simple idea of applying a tooltip. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1388,"value":"### Scatter plot with tooltip\n\nNow we can apply the tooltip concept to our Spotify scatter plot offer the option for more detail on demand shown in this [notebook](https://observablehq.com/@sandraviz/spotify-artists-d3-step3)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1247,"value":"## Hexbin generator | 20. - 23. day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"md` ### Hexbin generator\n\nSometimes when data are just too big, simple scatter plots won't work anymore. Then it is a good idea to switch to an aggregation in for example hexbin. The color intensity of these bins can be use to indicate the number of aggregated elemets like in this [notebook](https://observablehq.com/@sandraviz/audio-features-d3-hexbin)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"md` ### From scatter to hexbin \n\nIn this [notebook](https://observablehq.com/@sandraviz/from_scatter_to_hexbin) you can find a sequence of charts which on the one hand show the connection from scatter to hexbin plot and on the other hand show all the different options of using color and size as a visual enconding. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"md` ### Hexbin - area\n\nInstead of using color to represent the actual number of data points, that has been aggregated, we can use the area size of the hixbin itself shown in this [notebook](https://observablehq.com/@sandravizmad/audio-features-d3-hexbin-area).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1724,"value":"## Data processing with arquero.js | 24. - 25. day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1362,"value":"md` ### Intro to Arquero\n\nArquero is a library for query processing and transformation of array-backed data tables based on Javascript. Its simple syntax makes it very handy and actually fun to work with. Arquero is becoming more and more used for data preparation when creating d3.js visualisations. In this [notebook](https://observablehq.com/@sandraviz/spotify-genres-arquero). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1852,"value":"### More examples\n\nFollowing the approach learning by doing, in this [notebook](https://observablehq.com/@sandraviz/spotify-artists-data-check) and this [notebook](https://observablehq.com/@sandraviz/spotify-years-arquero) and this [notebook](https://observablehq.com/@sandraviz/the-unwelcomed-arquero-js) you find more examples of arquero.js data processing and analysis. I recommend you at this stage to chose a dataset by yourself and play around. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1866,"value":"### Advanced use case\nFinally we can see in this example how I used first arquero.js to prepare the dataset shown in this [notebook](https://observablehq.com/@sandraviz/global-temperature-trends-1880-2022-arquero-js) for the structure we need in order to do this more creative animated scatter plot shown in this [notebook](https://observablehq.com/@sandraviz/global-temperature-monthly-1880-2022-d3-js)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1232,"value":"## Line & area generators | 26. - 30. day","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"md` ### Line & Area chart\n\nLine and Area charts mainly used to show trends over time. In d3.js we created them using the SVG \"Path\" element. In order to get data transformed into the path format, we use d3.line and d3.area as generators. This [notebook](https://observablehq.com/@sandravizmad/line_chart) and this [notebook](https://observablehq.com/@sandraviz/usa-gas-price-2000-22?collection=@sandraviz/30-days-of-d3-dataviz) showcase simeple d3.js line charts and this [notebook](https://observablehq.com/@sandravizmad/area_chart) d3.js area chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md` ### Animated line chart \n\nNow we can use transitions to animate this line charts. In this [notebook](https://observablehq.com/@sandraviz/animated-line-chart) I explain the general idea, which actually is based on front-end svg experiment shown in this [notebook](https://observablehq.com/@sandraviz/css-path-animation). Then you can find a simple example in this [notebook](https://observablehq.com/@sandraviz/animated_line). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1903,"value":"md` ### Adding visual filtering\nOften when doing time series visualisations we want to see the complete trend and have the option to zoom or filter into specific time frame to see the pattern in detail as shown in this [notebook](https://observablehq.com/@sandraviz/interactive_timeframe) and this [notebook](https://observablehq.com/@sandraviz/global-temperatures-anomalies). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md` ### Interactive multiple line chart\n\nThe real power of interactivity can be shown in the multiple line chart version. Visualising lines for different categories in just one chart, gives a lot of context but might create chartjunk to the point that it is not possible to detect patterns. If we apply a \"mouse event\" to the lines in order to highlight single ones, the user can decide on the interpretation way as shown in this [notebook](https://observablehq.com/@sandraviz/global-temperatures-daily-1979-2023-d3-js) and this [notebook](https://observablehq.com/@sandraviz/covid-interactive-cities) and this [notebook](https://observablehq.com/@sandraviz/consumption-emission-d3-js-arquero-js).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1885,"value":"Now you can try out what you have learnt in this second [assignment](https://observablehq.com/@sandraviz/2-assignment).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1403,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1090,"value":"listings = collection.listings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"collection = fetchp(\n \"https://api.observablehq.com/collection/@sandraviz/30-days-of-d3-dataviz\"\n).then(function (response) {\n return response.json();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"import {fetchp} from '@tomlarkworthy/fetchp'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"function preview({ path, title, author, thumbnail }) {\n return htl.html`\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${(event) =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"function previews(notebooks) {\n return html`

${notebooks.map(\n preview\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body" 2d:E{"digest":"NEXT_REDIRECT;replace;/@sandraviz/30_days_d3_dataviz;307;"}