43:["$","title",null,{"children":"Useful Examples for the exercises | Dora Kiesel | Observable"}] 4b:T6b0,/* Function to draw a barchart - xAttribute: string of xAttribute name, note only categorical possible - rollupFunction: function of type (array) => number */ barchart = function(data, xAttribute, rollupFunction) { /* step 1: general setup of the svg */ const height = 300; const width = 700; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); /* step 1.1: aggregate the data according to the rollupFunction */ const rollup = d3.rollups(data, rollupFunction, key => key[xAttribute]); console.log(rollup) /* step 2: setup scales for x and y */ const x = d3 .scaleBand() .padding(0.01) .domain(rollup.map(d => d[0])) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(rollup, d => d[1])]) .nice() .range([height - margin.bottom, margin.top]); /* step 3: setup axes */ svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(height / 40) ); /* step 4: use join pattern to insert elements, since data from rollup, d of form [xAttribute value, rollup value]*/ svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(rollup) .join("rect") .attr("x", d => x(d[0])) .attr("width", x.bandwidth()) .attr("y", d => y(d[1])) .attr("height", d => height - margin.bottom - y(d[1])); return svg.node(); }4c:T888,/* Function to draw a scatterplot - xAttribute: string of xAttribute name, note only quantitative attributes possible - yAttribute: string of yAttribute name, note only quantitative attributes possible */ scatterplot = function(data, xAttribute, yAttribute) { /* step 1: general setup of the svg */ const height = 300; const width = 700; const margin = { top: 20, right: 20, bottom: 40, left: 40 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); /* step 1.1: filter out NaN values */ data = data.filter(d => !(isNaN(d[xAttribute]) || isNaN(d[yAttribute]))); /* step 2: setup scales for x and y */ const x = d3 .scaleLinear() .domain(d3.extent(data, d => d[xAttribute])) .nice() // the nice function chooses a nice start and end for the domain .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain(d3.extent(data, d => d[yAttribute])) .nice() .range([margin.top, height - margin.bottom]); /* step 3: setup axes */ svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(width / 80) ) // define the label for the x axis .call( g => g .append("text") .text(xAttribute) .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end") .attr("dy", "3.5em") ); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(height / 40) ) .call( g => g .append("text") .text(yAttribute) .attr("x", -margin.left) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "start") .attr("dy", "1em") ); /* step 4: use join pattern to insert elements */ svg .append("g") .attr("fill", "steelblue") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d[xAttribute])) .attr("cy", d => y(d[yAttribute])) .attr("r", 2); return svg.node(); }4d:T95f,/* Function to draw a heatmap - xAttribute: string of xAttribute name, note only categorical attributes possible - yAttribute: string of yAttribute name, note only categorical attributes possible */ heatmap = function(data, xAttribute, yAttribute) { /* step 1: general setup of the svg */ const height = 300; const width = 700; const margin = { top: 20, right: 20, bottom: 40, left: 60 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); /* step 1.1: filter out null values */ data = data.filter(d => !(d[xAttribute] == null || d[yAttribute] == null)); /* step 1.2: count attribute value cooccurrences with a 2 key rollup */ let rollup = d3.rollups(data, values => values.length, key => `${key[xAttribute]} - ${key[yAttribute]}`); console.log(rollup); /* step 2: setup scales for x and y */ const x = d3 .scaleBand() .domain(data.map(d => d[xAttribute])) .range([margin.left, width - margin.right]); const y = d3 .scaleBand() .domain(data.map(d => d[yAttribute])) .range([margin.top, height - margin.bottom]); color.domain([0, d3.max(rollup, d => d[1])]).nice(); /* step 3: setup axes */ svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(width / 80) ) // define the label for the x axis .call( g => g .append("text") .text(xAttribute) .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end") .attr("dy", "3.5em") ); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(height / 40) ) .call( g => g .append("text") .text(yAttribute) .attr("x", -margin.left) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "start") .attr("dy", "1em") ); /* step 4: use join pattern to insert elements */ svg .append("g") .selectAll("rect") .data(rollup) .join("rect") .attr("x", d => x(d[0].split(" - ")[0])) .attr("y", d => y(d[0].split(" - ")[1])) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .style("fill", d => color(d[1])); return svg.node(); }4e:T899,An SVG image on an html page is specified in xml (so using a tree of tags to specify elements and their relations) and can have the following basic tags: ## < svg > The svg tag defines the image itself and its dimensions. It can have the following attributes: - width: the width in either pixels ("100px") or percent ("100%"), defaults to "100%" - height: the height in either pixels ("50px") or percent ("50%), defaults to "100%" - viewBox: the visible part of the svg [x, y, width, height] ## < g > A group element. It is used to combine elements that belong together. In addition, each group element defines its own coordinate system, which can be modified separately. - transform: attribute to transform the coordinate system of the group element - translate(x,y) translates the coordinate system by x and y - rotate(angle, [x, y]) rotates by the angle and around the point (x,y) if given around the origin otherwise - scale(x, [y]) scales both axis by x if only one parameter is given, by x and y separately if both are there - additinally skrewing and setting a transform matrix is possible ## < circle > Defines a circle element. - cx: x pos of the center - cy: y pos of the center - r: radius ## < rect > Defines a rect element. - x: x pos of the upper left corner - y: y pos of the upper left corner - width: width of rect - height: height of rect ## < line > Defines a line. - x1: x pos of start point - y1: y pos of start point - x2: x pos of end point - y2: y pos of end point ## < path > Defines a path - d: sting defining the path - MX Y: move to position (x,y) - LX Y: draw line to position (x,y) ## coloring All graphical elements, so circles, rects, lines and paths, can additionally have the following attributes: - stroke: sets the stroke color - stroke-width: sets the thickness of the stroke - fill: sets the filling color For more in depth information, see [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG) or [w3schools SVG Tutorial and Reference](https://www.w3schools.com/graphics/svg_reference.asp). Below you will find a sample SVG that demonstrates some of the techniques and that you can experiment on to reinforce the concepts.4f:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1619006109616.722,"size":13506},{"id":"dcfeee67cdf9377ed8032fdd8c41de3a0c2509ab50edbf9f8b0c33a6ed7c3f7691ba6914a417ea6a35b04e19784ebddac3b4f7a5c64b44fe1671270e4043c1d6","href":"https://static.observableusercontent.com/files/dcfeee67cdf9377ed8032fdd8c41de3a0c2509ab50edbf9f8b0c33a6ed7c3f7691ba6914a417ea6a35b04e19784ebddac3b4f7a5c64b44fe1671270e4043c1d6","name":"JoinPatternComic@1.svg","type":"image/svg+xml","lastModified":1619074366413.341,"size":61281},{"id":"676dc8e3cf2e55eb18f8a77fcd5c42195b6c34769056bc7ad2ccc793718bc841e3eec2e6060864978612ae509c3f39a5d5ee9243f8d18ec7385f54a03c05fc5d","href":"https://static.observableusercontent.com/files/676dc8e3cf2e55eb18f8a77fcd5c42195b6c34769056bc7ad2ccc793718bc841e3eec2e6060864978612ae509c3f39a5d5ee9243f8d18ec7385f54a03c05fc5d","name":"JoinPatternComic.png","type":"image/png","lastModified":1619076331884.773,"size":295797}] 47:{"id":"3504a7ae2bac012c","slug":"useful-examples-for-the-exercises","title":"Useful Examples for the exercises","thumbnail":"a1cd2f9aa64432f12f490cf0b85930c8c83a507b09efc0f939e2c496d5912d9e","access_level":"public","create_time":"$D2021-04-21T11:28:56.186Z","update_time":"$D2025-03-04T07:34:43.876Z","view_time":null,"first_public_time":"$D2021-04-21T12:25:22.628Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"70e349da24ad8d4a","login":"dorakiesel","name":"Dora Kiesel","avatar_url":"https://avatars-next.observableusercontent.com/7b3226d01425ff266f984cbdc9e7a58dc8e23b45e144d380fb89664f536334c8","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":434,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d0aee63f52c8e5d3","login":"dorakiesel","name":"Dora Kiesel","avatar_url":"https://avatars-next.observableusercontent.com/7b3226d01425ff266f984cbdc9e7a58dc8e23b45e144d380fb89664f536334c8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d0aee63f52c8e5d3","login":"dorakiesel","name":"Dora Kiesel","avatar_url":"https://avatars-next.observableusercontent.com/7b3226d01425ff266f984cbdc9e7a58dc8e23b45e144d380fb89664f536334c8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Useful Examples for the exercises","cells":[{"id":0,"value":"md`# Useful Examples for the exercises\nIn this notebook, I will show my usual flow to create a d3 visualization. You may encounter other styles on the web. But first let me illustrate shortly how the join pattern works.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`## Comic strip to illustrate the join pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"FileAttachment(\"JoinPatternComic.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`Before we can start, we need to load our data. This is a bit different on Observable. You would use for example some functions of the module [d3-dsv](https://github.com/d3/d3-dsv).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"penguins = d3.csvParse(await FileAttachment(\"penguins.csv\").text(), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Bar Chart\nA bar chart shows aggregation values for categorical groups. The aggregation function is expected to return ordinal output. Examples would be the average weight of different animals, or the number of children on different schools or the average rating of films per genre.\n\n- Key: categorical key\n- Value: ordered values\n- Visual mark: line marks\n- Visual channel: length channel\n\nBelow you can find an example implementation in d3 and below that the function is used to create a bar chart of the number of observed penguins per island.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`Possible aggregation functions include: ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"numberOfPenguins = (array) => array.length;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"averageBodyMass = (array) => d3.mean(array, d => d.body_mass_g)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"rangeFlipperLength = (array) => d3.max(array, d => d.flipper_length_mm) - d3.min(array, d => d.flipper_length_mm);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`The below bar chart shows the number of penguins per island. But you are free to play around and choose different x attributes (as long as they are categorical) or other aggregation functions as well.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"barchart(penguins, \"island\", rangeFlipperLength);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`## Scatterplot\nScatterplots simply show the relations between two quantitative attributes.\n\n- Key: quantitative key\n- Value: quantitative value\n- Visual mark: point marks\n- Visual channel: position channel \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"scatterplot(penguins, \"culmen_depth_mm\", \"culmen_length_mm\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`## Heatmap\nThe heatmap is the categorical counterpart to the scatterplot. It shows the frequency of categorical attribute value combinations.\n- Keys: 2 categorical keys\n- Value: quantitative value\n- Visual mark: area mark\n- Visual channel: color channel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"color = d3.scaleQuantize(d3.schemePurples[5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"heatmap(penguins, \"species\", \"island\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md`Below is the color legend for the visualization. For some reason it does not update automatically, so if the scale should be from [0, 1], please rerun the cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"legend({\n color: color,\n title: \"Number of Penguins\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"# SVG Mini-Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"Inspired by [Wassily Kandinsky, Circles in a Circle, 1923](https://artwizard.eu/files//PICTURES/Statia%20Wassily%20Kandinsky/Wassily_Kandinsky_-_1.jpeg)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"olympians","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"import {legend, swatches} from \"@d3/color-legend\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 42:null