Published
Edited
Aug 25, 2021
1 fork
3 stars
Introduction to Observable and PlotlyJSPlotly.Js: Getting Started with Old FaithfulUseful D3 Functions for Data handlingPlotly Color UsageGeoVisualizationGapminder data in PlotlySample US Wind Data VizPlotlyJS GeoVisualizationHCL color modelHSV and HSL Color ModelsColor Blind SimulatorColorBlindLibD3: IntroducingWebGL Volume RenderingColor from Wavelength, Correlated Temperature and HTML color pickerColor Solids: RGB and HSL2D Vector Field Visualization1D Dataviz in PlotlyStock Market Performance of Presidents Trump, Obama, W. Bush, Clinton, H.W. Bush, Reagan During their first term.SVG cheat sheetScales and AxesFetch Covid-19 data
Useful Javascript Array functions.
function hello_standard(name) {
return "Hello "+name;
}
hello_standard("World")
hello_arrow = (name) => "Hello " + name
hello_arrow("World")
point = ({x:2, y:3})
point.x
point.y
point["x"]
point["y"]
getComponent = (p,e)=>p[e]
getComponent(point,"x")
getComponent(point,"y")
md`**Duplicate or copy Javascript Objects**:
\`Remember assignment only copies the pointer to the object. It does not duplicate the object content.\`
To copy an object in JavaScript, you have three options:
- Use the spread (...) syntax
- Use the Object.assign() method
- Use the JSON.stringify() and JSON.parse() methods
The following illustrates how to copy an object using these three methods:`
point
pointCopies = {
// using spread ...
let p1 = {
...point
};
// using Object.assign() method
let p2 = Object.assign({}, point);
let p3 = { p1, p2 };
// using JSON
let p4 = JSON.parse(JSON.stringify(p3));
p1.x = 4;
p2.x = 5;
return [p1, p2, p3, p4];
}
Object.keys(point)
Object.values(point)
Object.entries(point)
pointCopies.slice(0,2)
A = [2, 4, 6, 8, 10]
pointObjects = [
{x:2,y:3},
{x:4, y:1},
{x:-1, y: 2}
]
md`### Array Length
returns the lengh of array A : A.length`
A.length
md `### Array Slice: A.slice([start[,end]]))
Duplicate the array fully or partly from start to end.
Creates a new array from the elements of the original array. The original array remains unchanged.`
A.slice()
A.slice(4)
A.slice(2,4)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
md`### Array Map: A.map(callbackFn)
Create a new array with results of calling function *callbackFn* on every element in A`
A
A.filter(d=> d>5)
A.map(e => 10 * e)
pointArray2 = pointObjects.map(d=>[d.x,d.y])
Xs = pointObjects.map(d=>d.x)
pointMagnitudes = pointObjects.map((d) => Math.sqrt(d.x * d.x + d.y * d.y))
md`### Array Filter: A.filter(callbackFn)
Create a new array with all those elements of array that pass the boolean operation defined in callbackFn.`
points1stQ = pointObjects.filter(d=>d.x>=0 && d.y>=0)
md`##### Note:
*callbackFn* gets the array element as the first parameter. Also gets the index of the element as the second parameter, if you wish to use. (It has a third parameter too. It is the original array that the array function was called upon!)`
Aeven = A.filter((d,i)=>(i%2==0))
md`## Array Reduce: A.reduce(reducerFn, initialValue)
This function executes a reducer function (that you provide) on each element of the array, returns a single output value.
The reducer functions takes one extra argument compared to other callback functions mentioned above. They are
- Accumulator (acc)
- Current Value (cur)
- Current Index (idx)
- Source Array (src)
The accumulator must be used in the reducerFn to accumulate value.
*initialValue* is the starting value that the Accumulator takes.
For example: to compute the average of a number array A, we can use the following statement:
(A.reduce((acc,cur)=>acc = acc+cur, 0))/A.length
`
A
A.slice(1,4)
sum = (A.slice(1).reduce((acc,cur)=>acc = acc+cur, 0))
covid = d3.csv(
"https://covid.ourworldindata.org/data/owid-covid-data.csv",
d3.autoType
)
covid.columns
[...new Set(covid.map(d=>d.continent))]
Object.keys(covid.reduce((o,d)=>{
o[d.continent] = d.continent;
return o;
},{}))
md `##### Thre are many more array functions. For more array functions refer to a cheet sheet line https://www.shortcutfoo.com/app/dojos/javascript-arrays/cheatsheet.`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.