Lang2code

Hi! Here is the lang2code website, check it out!

Hello All! Here is a demonstration of what a basic webpage would look like after embedding the visualization using the tools we learned so far: Vega-lite, Tableau, AD, and D3.

Vega-Lite

<iframe width="100%" height="607" frameborder="0" src="https://observablehq.com/embed/@changran/vega-lite-assignment?cells=fig1"></iframe>

Tableau

In order to embed your Tableau dashboard to the sites, you will first have to publish your worksheet to Tableau Public. Once you publish, similar to above step, you will need to copy the embedded html code and paste it here.

<script type='text/javascript'> var divElement = document.getElementById('viz1618378263510'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='1000px';vizElement.style.height='827px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='1000px';vizElement.style.height='827px';} else { vizElement.style.width='100%';vizElement.style.height='927px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>

Images (Infographic in this case)

If you'd like to put simple images, you can upload the image file to your repository and use img html tag and put the source.

D3

Same process as Vega-Lite using embedding from Observable notebook. <iframe width="100%" height="384" frameborder="0" src="https://observablehq.com/embed/@info247-spring21/lab-11-d3-tutorial-2-creating-an-arc-diagram-with-animated-tr/7?cells=vJustNodesAndLabels"></iframe>

Helpful Resources

- Mastering Markdown

• Observable's Intro to Embedding

• Last year's projects

Markdown

Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for

Syntax highlighted code block

# Header 1
## Header 2
### Header 3

- Bulleted
- List

1. Numbered
2. List

**Bold** and _Italic_ and `Code` text

[Link](url) and ![Image](src)

For more details see GitHub Flavored Markdown.

Jekyll Themes

Your Pages site will use the layout and styles from the Jekyll theme you have selected in your repository settings. The name of this theme is saved in the Jekyll _config.yml configuration file.

Support or Contact

Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.