3e:null 3f:["$","title",null,{"children":"Svelte, SVG and D3 (3) | gefercan | Observable"}] 45:[] 43:{"id":"e759b0884f5d3dd6","slug":null,"title":"Svelte, SVG and D3 (3)","thumbnail":"da15bce217cefb03ad66367384b0e7c651a0544cfcc41cd1ac2e6fc364a640c0","access_level":"public","create_time":"$D2023-07-08T18:21:12.362Z","update_time":"$D2023-07-13T09:08:28.682Z","view_time":null,"first_public_time":"$D2023-07-08T18:21:12.362Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b4d67296fbb33425","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":"starter_2024","bio":"","following":false},"version":993,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afe72ce25af1b858","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"afe72ce25af1b858","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Svelte, SVG and D3 (3)","cells":[{"id":0,"value":"# Svelte, SVG and D3 (3)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":946,"value":"(by Amelia Watterberger)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":976,"value":"We can use {on:event} to bind an event handler\nList of events on an HTML element\n\nDemo of events","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":948,"value":"SVG is a syntax for describing vector shapes.\nWe'll use this to draw shapes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"

Amelia's steps for data viz

\n 1- Access data\n
\n 2- Create dimensions\n
\n 3- Create scales\n
\n 4- Draw data\n
\n 5- Draw peripherals\n
\n 6-Set up interactions\n

Exercises

\n \n
On the other hand, observable is like a Jupyter notebook. Here are three cells in the different modes in observable:\n
\n -markup\n
\n -html\n
\n -java script\n

Playing around the code

here an example of java script cells:

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"//some sum\n{\n const a=3;\n const b=5;\n return a+b;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"//creates an object\nobj1=({\n a:5,\n b:2,\n c:3})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"//calls previous variable\n\"This is a number:\" + obj1.a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"//example of a function\nfunction ello(){\nreturn \"Hi there\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"//calling previous function\n\"Hey!, \" + ello();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"{\n const p=document.createElement('p')\n p.appendChild(document.createTextNode(\"this is a text\"))\n return p\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof h1= html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"h=html ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"//using d3 mean function\nd3.mean([23,234,12,232])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"//using d3 min function\nd3.min([12,3,45,12,4])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"//svg with d3\nd3.create(\"svg\")\n //size of the canvas\n .attr(\"width\",228)\n .attr(\"height\",228)\n .call(svg=>svg.selectAll(\"circle\")\n //data to be graphic\n .data(d3.range(128,0,-28))\n .join(\"circle\")\n // call viridis color palette\n .attr(\"fill\", d3.scaleSequential(d3.interpolateViridis).domain([0, 123]))\n //connects the data to the circle\n .attr(\"r\", d => d*2))\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"d3.min ([new Date()])\n//compare this to the Math min below\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"Math.min(new Date())\n//compare this to the d3 min method above","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"d3.min ([\"10\",\"2\",\"5\",\"12\",\"39\"])\n//uses the natural order , like 10 before 2 because it starts with 1\n//compare this to the Math min below","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"d3.range(20)\n//check this => observablehq.com/@d3/d3-range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"Math.min(\"10\",\"2\",\"5\",\"12\",\"39\")\n//uses the numerical order , \n//compare this to the d3 min above","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"\n//creates an array\narray1=[3,5,2,3,,7,8,91,];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"

Access the data

\n
\nUsing the d3.csv method","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"//accesing the data\nboys1=d3.csv(\"https://raw.githubusercontent.com/the-pudding/data/master/boybands/boys.csv\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"boys1.slice(2,9)\n//selecting one","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"//how many elements in an array useful for big files\nx=boys1.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"//accessing a datapoint different properties\nboys1_datapoint_01=[boys1[34].name,boys1[34].hair_color,boys1[34].height]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"someBoys=boys1.slice(0,9)\n\n//selects a range within the array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"sampleDatapoint=boys1[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"//important:creates an accesor function for Y axis, and parseInt to convert a string into number\nyAccessor=boys1=>parseInt(boys1.height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"yAccessor(sampleDatapoint)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"minHeight=d3.min(boys1,yAccessor)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"maxHeight=d3.max(boys1,yAccessor)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"xAccessor=boys1=>(boys1.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"xAccessor(sampleDatapoint)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"firstName=d3.min(boys1,xAccessor);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"lastName=d3.max(boys1,xAccessor)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"
\n

Define the graphic space

here you define the visual space using margins and svg

Definign the scale

pairing the scope of data or domain, with the visual element in this case, the range