Published
Edited
Sep 14, 2021
Data Visualization _Week 03
Hello World Data Visualization Challenge
d3 = require("d3@7")
import {helloDataset} from "@zachpino/week-2-intro-to-javascript-for-visualization"
helloDataset
{
const width = 720;
const height = 360;
const svg = (d3.create("svg").attr("viewBox", [0 , 0 , width , height]));
for (let i = 0; i < helloDataset.length; i++) {
svg
.append ("circle")
.attr ("cx", (parseFloat(helloDataset[i].long)+ 180) *2)
.attr ("cy", (-parseFloat(helloDataset[i].lat)+ 90) *2)
.attr ("r", 1)
.attr ("fill", "none")
.attr ("stroke", "#000")
.attr ("stroke-width", 0.5);
}
for (let i = 0; i < helloDataset.length; i++) {
svg
.append("text")
.attr ("x", (parseFloat(helloDataset[i].long)+ 180) *2)
.attr ("y", (-parseFloat(helloDataset[i].lat)+ 90) *2 -10)
.attr ("font-size", "10px")
.attr ("text-anchor", "middle")
.attr ("alignment-baseline", "top")
.text(helloDataset[i].hello);
}
return svg.node();
}
---
Practice for Tutorial
{
const greeting = "hello";
return greeting;
}
{
const greeting = "hello";
return greeting.length;
}
{
const greeting = "👋";
return greeting.length;
}
{
const secondsPerMinute = "60";
const minutesPerHour = "60";
const hoursPerDay = "24";
const daysPerWeek = "7";
const weeksPerYear = "52";
const secondsPerYear =
secondsPerMinute *
minutesPerHour *
hoursPerDay *
daysPerWeek *
weeksPerYear ;
return secondsPerYear;
}
{
const illiniosRetailTax = 0.0625;
const cookCountyRetailTax = 0.0175;
const chicagoRetailTax = 0.0125;
const regionalTransitTax = 0.01;
const totalTaxRate =
illiniosRetailTax +
cookCountyRetailTax +
chicagoRetailTax +
regionalTransitTax;
const subTotal = 99.99;
const taxedTotal = subTotal * (1 + totalTaxRate);
return "the Grand Total is : $" + taxedTotal.toFixed (2);
}
{
return "When we add one and one, we would probably expect the answer to be " + (1+1) + ", but sometimes we want " + ("1" + "1") + " instead"
}
{
return "pi is the floating number " + Math.PI +
"\n but it can be represented as a string: " + String(Math.PI) +
"\n or as an integer:" + parseInt(Math.PI) +
"\n or as a fixed precision float: " + parseFloat(Math.PI).toFixed(2) +
"\n or as a greek letter: " + "π" +
"\n or as an emoji: " + "🥧";
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
] ;
return worldGreetings;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
return (
"This dataset includes " + worldGreetings.length + " words for Hello"
);
}
{
const worldGreeting= [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
return (
"the first item in the array is '" + worldGreeting[0] +
"', and the third item is '" + worldGreeting[2] + "'"
);
}
{
const worldGreeting = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
const finalIndex = worldGreeting.length-1;
return "the last item of the array is " + worldGreeting[finalIndex]
;
}
{
const worldGreeting = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreeting.push("kamusta")
return worldGreeting;
}
{
const worldGreeting = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreeting[1] = "ola";
worldGreeting[2] = "konnichi wa";
return worldGreeting;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreetings[200] = "ola";
return worldGreetings.length;
}
{
const worldGreetings = [
"bonjour",
"salut",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreetings[200] = "ola";
return worldGreetings[50];
}
{
const countUp = [];
for (let i=0; i<5; i=i+1){
countUp.push(i)
}
return countUp;
}
{
const decreasingEvent36to22 = [];
for (let i = 36; i >= 22; i = i-2) {
decreasingEvent36to22.push(i);
}
return decreasingEvent36to22;
}
{
const worldGreetings =[
"bonjour",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreetings.push("Annyunghaseyo")
const languages = [
"french",
"swahili",
"thai",
"turkish",
"quechua",
"twi",
"mandarin",
"algonquin",
"hawaiian"
];
languages.push("korea")
const factoids = [];
for (let i=0; i<worldGreetings.length; i=i+1) {
factoids.push(
"the word for hello in " + languages[i] + " is " + worldGreetings[i]
)
}
return factoids;
}
{
const worldGreetings =[
"bonjour",
"jambo",
"swasdi",
"merhaba",
"allianchu",
"maakye",
"nihao",
"kwey",
"aloha"
];
worldGreetings[2] = "annyunghaseyo"
const languages = [
"french",
"swahili",
"thai",
"turkish",
"quechua",
"twi",
"mandarin",
"algonquin",
"hawaiian"
];
languages[2] = "korea"
const factoids = [];
for (let i=0; i<worldGreetings.length; i=i+1) {
factoids.push(
"the word for hello in " + languages[i] + " is " + worldGreetings[i]
)
}
return factoids;
}
{
const swahili = {name:"swahili", greeting:"jambo", speakers:"150000000"};
return swahili;
}
{
const swahili = {name:"swahili", greeting:"jambo", speakers:"150000000"};
return swahili.greeting;
}
{
const language = [
{ name: "french", greeting: "bonjour" },
{ name: "japanese", greeting: "konnichiwa" },
{ name: "swahili", greeting: "jambo" },
{ name: "thai", greeting: "swasdi" },
{ name: "turkish", greeting: "merhaba" },
{ name: "quechua", greeting: "allianchu" },
{ name: "twi", greeting: "maakye" },
{ name: "mandarin", greeting: "nihao" },
{ name: "algonquin", greeting: "kwey" },
{ name: "hawaiian", greeting: "aloha" }
];
const factoids = [];
for (let i=0; i<language.length; i=i+1) {
factoids.push(
"the word for hello in " +language[i].name+ " is " + language[i].greeting
);
}
return factoids;
}
{
//svg variables
const width = 900;
const height = 100;
//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//find the SVG artboard we created, and add an SVG circle
svg
.append("circle")
.attr("cx", 100)
.attr("cy", 50)
.attr("r", 25)
.style("fill", "teal");
//find the SVG artboard we created, and add an SVG polyline
svg
.append("polyline")
.attr("points", [
[200, 50],
[250, 20],
[350, 70],
[400, 50]
])
.attr("cy", 50)
.attr("r", 30)
.style("fill", "none")
.style("stroke", "#CC00AA")
.style("stroke-width", 3);
//find the SVG artboard we created, and add an SVG rectangle
svg
.append("rect")
.attr("x", 450)
.attr("y", 20)
.attr("width", 120)
.attr("height", 60)
.style("fill", "none")
.style("stroke", "#CC00AA")
.style("stroke-width", 3)
;
//find the SVG artboard we created, and add SVG text
svg
.append("text")
.attr("x", 725)
.attr("y", 50)
.style("text-anchor", "middle")
.style("alignment-baseline", "middle")
.text("🌑🌒🌓🌔🌕🌖🌗🌘🌑");
//show visualization in Observable
return svg.node();
}
{
const width = 800;
const height = 100;
const meaninglessData = [15, 12, 3, 21, 16, 21, 8, 2, 25];
const svg = d3.create("svg").attr("viewBox", [0 , 0, width, height]);
const spacing = width / meaninglessData.length;
const margin = spacing / 2;
for (let i = 0; i < meaninglessData.length; i = i + 1) {
svg
.append ("circle")
.attr ("cx", i * spacing + margin)
.attr ("cy", height / 2)
.attr ("r", meaninglessData[i])
.attr ("fill", "blue");
}
return svg.node();
}
{
const width = 800;
const height = 200;
const margin = 25;
const planets = [
{
name: "Mercury",
size: 12878,
distance: 0.39,
outerColor: "#666699",
coreColor: "#cccccc"
},
{
name: "Venus",
size: 12104,
distance: 0.723,
outerColor: "#ffcc00",
coreColor: "#995522"
},
{
name: "Earth",
size: 12756,
distance: 1,
outerColor: "#33ccff",
coreColor: "#228800"
},
{
name: "Mars",
size: 6787,
distance: 1.524,
outerColor: "#ff6666",
coreColor: "#774422"
},
{
name: "Jupiter",
size: 142796,
distance: 5.203,
outerColor: "#ff9977",
coreColor: "#997755"
},
{
name: "Saturn",
size: 120660,
distance: 9.539,
outerColor: "#ddcc66",
coreColor: "#666666"
},
{
name: "Uranus",
size: 51118,
distance: 19.18,
outerColor: "#99ccff",
coreColor: "#6688ff"
},
{
name: "Neptune",
size: 48600,
distance: 30.06,
outerColor: "#33cccc",
coreColor: "#55ffff"
}
];
const svg = (d3.create("svg").attr("viewBox", [0 , 0 , width , height]));
const bg = svg
.append ("rect")
.attr ("x" , 0)
.attr ("y" , 0)
.attr ("width" , width)
.attr ("height", height)
.attr ("fiil", "#000");
for (let i = 0; i < 100; i++) {
const star = svg
.append ("circle")
.attr ("cx", Math.random() * width)
.attr ("cy", Math.random() * height)
.attr ("r", Math.random() * 2)
.attr ("opacity", Math.random())
.attr ("fill", "#fff")
.attr ("class", "stars");
}
const defs = svg.append("defs");
for (let i = 0; i < planets.length; i++) {
const gradient = defs.append("radialGradient").attr("id", planets[i].name);
gradient
.append ("stop")
.attr ("offset", "0%")
.attr ("stop-color", planets[i].coreColor);
gradient
.append ("stop")
.attr ("offset", "100%")
.attr ("stop-color", planets[i].outerColor);
}
const sizeScale = d3
.scaleLinear ()
.domain (d3.extent(planets, (d) => d.size))
.range ([3,50]);
const distanceScale = d3
.scaleLinear ()
.domain (d3.extent(planets, (d) => d.distance))
.range ([margin, width-margin]);
for (let i = 0; i < planets.length; i++) {
const planet = svg
.append ("circle")
.attr ("cx", distanceScale(planets[i].distance))
.attr ("cy", height / 2)
.attr ("r", sizeScale(planets[i].size))
.attr ("id", "name")
.style ("fill", "url(#" + planets[i].name + ")");
}
const sol = svg
.append ("rect")
.attr ("x", "0")
.attr ("y", "0")
.attr ("width", "5")
.attr ("height", height)
.attr ("fill", "#fd0");
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
