D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
DemonikMars
Full window
Github gist
International tourism
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My module 2 exercise</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { font-family: Eurostile, Arial, sans-serif; background-color: #F0F0F0; padding: 100px; } h1 { font-size: 55px; font-weight: bold; border-top: solid 7px Skyblue; } h2 { font-size: 28px; font-weight: normal; border-top: solid 2px Skyblue; } h3 { font-size: 18px; font-weight: bold; } p { font-size: 18px; line-height: 20px; text-align: justify; } em { color: Darkblue; font-weight: bold; font-style: italic; } a href{ color: Darkblue; font-weight: bold; font-style: italic; } </style> </head> <body> <!-- //airplane --> <svg width="960" height="50"> <svg id"Capa 1" svg version="1.1" id="Capa_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="65px" height="58px" viewBox="0 0 64.3 57.6" enable-background="new 0 0 64.3 57.6" xml:space="preserve"> <path fill="Darkblue" d="M39.5,52.6c2.4-1,2.4-2.1,2.4-2.1l1.7-17.7l0.5-0.2l0.1,0c0.5,0.7,0.7,0.5,0.7,0.5s1-0.4,3-1.2 c2-0.8,1.5-1.4,1.5-1.4l-0.5-1.2l0,0l-0.5-1.2c0,0-0.1-0.7-2.1,0.1c-1.1,0.5-1.9,0.8-2.4,1l0.4-4.6c0,0,8.1-3.4,12.6-5.3 c4.5-1.9,5.2-5.7,5.2-5.7s-3.1-2.2-7.6-0.3C50,15.3,42,18.7,42,18.7l-3.6-2.9c0.5-0.2,1.3-0.5,2.4-1c2-0.8,1.5-1.4,1.5-1.4l-0.5-1.2 l0,0L41.3,11c0,0-0.1-0.7-2.1,0.1c-2,0.8-3,1.2-3,1.2s-0.3,0.1-0.2,0.8l-0.1,0.1l-0.4,0.2L21.8,2.2c0,0-0.7-0.8-3.1,0.3 c-0.1,0-1.5,0.5-1.5,0.5l1.5,0l11.7,13.1l2.6,6.3L21.9,27c0,0-4.1,1.7-7.2,4.3c-0.2,0,0,0-1.2-0.5c-1.2-0.5-6.7-4.3-6.7-4.3 S6.3,26.2,5,26.7C4.5,27,4,27.2,4,27.2l5.5,7.4c0,0-2.7,1.1-2.3,2l0,0.1c0.4,0.9,3-0.2,3-0.2l1.4,9.1c0,0,0.5-0.2,1.1-0.4 C13.9,44.7,14,44,14,44s1.2-6.5,1.7-7.8c0.5-1.2,0.3-1.1,0.5-1.2c4.1-0.4,8.1-2.1,8.1-2.1l11.1-4.6l2.6,6.3l1.1,17.6l-1,1.1 C38.2,53.3,39.4,52.6,39.5,52.6z"/> </svg> <h1>My project</h1> <h2>Introduction</h2> <p>The subject of my project is <em>international tourism</em>. I found the original database at the Worldbank site: <a href="https://data.worldbank.org/indicator/ST.INT.ARVL">Data World Bank </a> The database contained in the console is already edited. I would like to visualize just the period of 2003 to 2012. Originally this dataset presents data from 1960 to 2014, but unfortunately it has no values for some countries or years; in order to create an exercise of datavisualization, I just kept completed data by country and year. All those countries with zero or null values were rule out of the list.</p> <svg width="960" height="200"> <svg width="960" height="300"> <rect x="0" y="0" width="960" height="300" style="fill:#CCE0FF;stroke:Skyblue;stroke-width:10;opacity:0.5"> Sorry, your browser does not support inline SVG. </svg> <!-- //circulo 1 --> <svg height="100" width="100"> <circle cx="20" cy="20" r="40" stroke="Darkblue" stroke-width="20" fill="Skyblue" /> Sorry, your browser does not support inline SVG. </svg> <!-- //circulo2 --> <svg height="960" width="960"> <circle cx="940" cy="20" r="40" stroke="Darkblue" stroke-width="20" fill="Skyblue" /> Sorry, your browser does not support inline SVG. </svg> <g transform="translate(0,100)"> <text id="TextElement" x="0" y="0" style="font-family:Eurostile;font-size:18; visibility:hidden"> DATA can be found in the console. <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" /> <animateMotion path="M 0 0 L 100 20" begin="1s" dur="5s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-50" to="0" begin="1s" dur="5s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> </text> </g> Sorry, your browser does not support inline SVG. </svg> <h2>Metadata</h2> <h3>SHORT DEFINITION</h3> <p>International inbound tourists (overnight visitors) are the number of tourists who travel to a country other than that in which they usually reside, and outside their usual environment, for a period not exceeding 12 months and whose main purpose in visiting is other than an activity remunerated from within the country visited. When data on number of tourists are not available, the number of visitors, which includes tourists, same-day visitors, cruise passengers, and crew members, is shown instead.</p> <h3>INDICATOR</h3> <p>International tourism, number of arrivals</p> <h3>CODE</h3> <p>ST.INT.ARVL=International tourism, number of arrivals</p> <h3>LONG DEFINITION</h3> <p>International inbound tourists (overnight visitors) are the number of tourists who travel to a country other than that in which they have their usual residence, but outside their usual environment, for a period not exceeding 12 months and whose main purpose in visiting is other than an activity remunerated from within the country visited. When data on number of tourists are not available, the number of visitors, which includes tourists, same-day visitors, cruise passengers, and crew members, is shown instead. Sources and collection methods for arrivals differ across countries. In some cases data are from border statistics (police, immigration, and the like) and supplemented by border surveys. In other cases data are from tourism accommodation establishments. For some countries number of arrivals is limited to arrivals by air and for others to arrivals staying in hotels. Some countries include arrivals of nationals residing abroad while others do not. Caution should thus be used in comparing arrivals across countries. The data on inbound tourists refer to the number of arrivals, not to the number of people traveling. Thus a person who makes several trips to a country during a given period is counted each time as a new arrival.</p> <h3>SOURCE</h3> <p>World Tourism Organization, Yearbook of Tourism Statistics, Compendium of Tourism Statistics and data files.</p> <h3>TOPIC</h3> <p>Private Sector & Trade: Travel & tourism</p> <h3>PERIODICITY</h3> <p>Annual</p> <h3>AGGREGATION METHOD</h3> <p>Gap-filled total</p> <p><strong>Note:</strong> The SVG example does not work in Internet Explorer and Safari.</p> <p><strong>Module 2 Exercise: Monica Alejandra Rodriguez Sosa</strong>.</p> <p><strong>March 28.2015</strong>.</p> <!-- //airplane 2--> <svg width="960" height="150"> <svg id"Capa 1" svg version="1.1" id="Capa_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="400px" y="10px" width="65px" height="58px" viewBox="0 0 64.3 57.6" enable-background="new 0 0 64.3 57.6" xml:space="preserve"> <path fill="Darkblue" d="M39.5,52.6c2.4-1,2.4-2.1,2.4-2.1l1.7-17.7l0.5-0.2l0.1,0c0.5,0.7,0.7,0.5,0.7,0.5s1-0.4,3-1.2 c2-0.8,1.5-1.4,1.5-1.4l-0.5-1.2l0,0l-0.5-1.2c0,0-0.1-0.7-2.1,0.1c-1.1,0.5-1.9,0.8-2.4,1l0.4-4.6c0,0,8.1-3.4,12.6-5.3 c4.5-1.9,5.2-5.7,5.2-5.7s-3.1-2.2-7.6-0.3C50,15.3,42,18.7,42,18.7l-3.6-2.9c0.5-0.2,1.3-0.5,2.4-1c2-0.8,1.5-1.4,1.5-1.4l-0.5-1.2 l0,0L41.3,11c0,0-0.1-0.7-2.1,0.1c-2,0.8-3,1.2-3,1.2s-0.3,0.1-0.2,0.8l-0.1,0.1l-0.4,0.2L21.8,2.2c0,0-0.7-0.8-3.1,0.3 c-0.1,0-1.5,0.5-1.5,0.5l1.5,0l11.7,13.1l2.6,6.3L21.9,27c0,0-4.1,1.7-7.2,4.3c-0.2,0,0,0-1.2-0.5c-1.2-0.5-6.7-4.3-6.7-4.3 S6.3,26.2,5,26.7C4.5,27,4,27.2,4,27.2l5.5,7.4c0,0-2.7,1.1-2.3,2l0,0.1c0.4,0.9,3-0.2,3-0.2l1.4,9.1c0,0,0.5-0.2,1.1-0.4 C13.9,44.7,14,44,14,44s1.2-6.5,1.7-7.8c0.5-1.2,0.3-1.1,0.5-1.2c4.1-0.4,8.1-2.1,8.1-2.1l11.1-4.6l2.6,6.3l1.1,17.6l-1,1.1 C38.2,53.3,39.4,52.6,39.5,52.6z"/> </svg> <!-- //linea --> <svg height="210" width="960"> <line x1="10" y1="10" x2="100" y2="100" style="stroke:Skyblue;stroke-width:2" /> </svg> <!-- //linea 2--> <svg height="210" width="960"> <line x1="100" y1="100" x2="200" y2="10" style="stroke:Skyblue;stroke-width:2" /> </svg> <!-- //linea 3--> <svg height="210" width="960"> <line x1="200" y1="10" x2="300" y2="100" style="stroke:Skyblue;stroke-width:2" /> </svg> <!-- //linea 4--> <svg height="210" width="960"> <line x1="300" y1="100" x2="400" y2="50" style="stroke:Skyblue;stroke-width:2" /> </svg> <script type="text/javascript"> //Load in contents of CSV file d3.csv("Data-Table 1.csv", function(data) { //Now CSV contents have been transformed into //an array of JSON objects. //Log 'data' to the console, for verification. console.log(data); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js