25:["$","title",null,{"children":"INTRO TO HTML, SVG & CSS | Luis Abner Torres Rojas | Observable"}] 49:T51a,style = html``4a:[] 29:{"id":"92d803df36278cca","slug":null,"title":"INTRO TO HTML, SVG & CSS","thumbnail":null,"access_level":"public","create_time":"$D2023-06-25T00:35:02.659Z","update_time":"$D2023-06-25T00:35:02.659Z","view_time":null,"first_public_time":"$D2023-06-25T00:35:02.659Z","has_unpublished_edits":null,"fork":{"id":"608ae312676df7ca","slug":"html-css-intro","title":"INTRO TO HTML, SVG & CSS","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1ff1b822c97d981f","login":"luistorres-rojas6","name":"Luis Abner Torres Rojas","avatar_url":"https://avatars-next.observableusercontent.com/1d3aaeb962609e525a68b7783978c3ce485cb8891af7ed357d333427a0af4b25","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":572,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd43b447eeaaae53","login":"luistorres-rojas7","name":"Luis Rojas","avatar_url":"https://avatars-next.observableusercontent.com/e286345b05355985708e0ecec780fe18d7d9536a67ba0630b26f55a650016640","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"1ff1b822c97d981f","login":"luistorres-rojas6","name":"Luis Abner Torres Rojas","avatar_url":"https://avatars-next.observableusercontent.com/1d3aaeb962609e525a68b7783978c3ce485cb8891af7ed357d333427a0af4b25","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bd43b447eeaaae53","login":"luistorres-rojas7","name":"Luis Rojas","avatar_url":"https://avatars-next.observableusercontent.com/e286345b05355985708e0ecec780fe18d7d9536a67ba0630b26f55a650016640","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"INTRO TO HTML, SVG & CSS","cells":[{"id":0,"value":"# INTRO TO HTML, SVG & CSS\n\nThis notebook helps you to start or come back to some simple HTML, SVG and CSS code. The examples are form my [d3.js presentation](https://slides.com/sandravizmad/d3-js), I just adapted them slightly. \n\nYou can fork the notebook by clicking the ${html`...`} icon and selecting \\`fork\\` button in the top right hand corner of this page. Once you are in your own notebook get creative, trying out different html and css functions, no limits 😬\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"## HTML\nHTML stands for [HyperText Markup Language](https://developer.mozilla.org/en-US/docs/Web/HTML), which creates a structure to hold the content of your webpage; it does this using what it calls elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"### SIMPLE TEXT \n\nBelow you can find some simple HTML examples, which highlights the logic of the syntax. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"\n\n

When a tree falls in the forest

there are other trees listening.

My cat Felicita is

\n \n

relaxed
sweet
always in the moment

HTML SECTION

by SANDRA

\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"### SVG\nSVG stands for [Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG#getting_started_with_svg) and are an XML-based markup language for describing two-dimensional based vector graphics. When doing data visualisation, we use mainly the SVG TAGs listed below to draw the visual elements into our webpage. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"tag | example | attributes | positioning attributes\n--- | --- | ---\n<rect> | ${tableSVG('')} | width, height | x, y\n<circle> | ${tableSVG('')} | r | cx, cy\n<path> | ${tableSVG('')} | d |\n<text> | ${tableSVG('hi there!')} | | x, y, text-anchor, dy \n<g> | ${tableSVG('group element')} | | transform ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"### RECTS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"### POLYLINE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":523,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"## CSS\nCSS stands for [Cascading Style Sheets](https://developer.mozilla.org/en-US/docs/Glossary/CSS) and is a styling language used for describing the look and formatting of the elements in an HTML page, which are the basis for our visualisations done using d3.js. As shown in the example below we can simply select a SVG tag and then style it with CSS, in this case modifing the transparency of the circles. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"### INLINE STYLE\n\nIf we only want to style on specific element we can just use the inline style option within an html tag like in the examples below where we use different headline format and then use style to color them in black. The way of using CSS will always overwrite any other external saved way of using CSS like in the cell below in this notebook. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"\n\n

Lisbon is my favourite city

But I also like Barcelona and Madrid

My hometown Köln also belongs to me

Next weekend I discover a new portugues city

In a month I will visit Amsterdam

One day I want to visit Auckland

When a tree falls in the forest

there are other trees listening.

\n\n \n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"### CSS CIRCLES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"### CSS FONTS\n\nCSS allows you to specify font files, available on the web, to be downloaded along with your website as it's accessed. This means that any browser supporting this CSS feature can display the fonts you've specifically chosen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"\n\n\n

CSS TEXT

by SANDRA

\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"--- \n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"SVG table from [Shirley's Notebook](https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen?collection=@sxywu/introduction-to-d3-js)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"tableSVG = (str) => {\n return html`\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null