Add VT2-examples: all 6 chapters of 'Visualize This' (110 files) — data scraping, ETL, trends, categorical, multivariate, spatial, distribution analysis
This commit is contained in:
neo committed
1 parent
088771a9cf
commit
b42b866a8c
110 files changed
+400895
No files matched your search
@@ -0,0 +1,139 @@
|
||||
// Dimensions of chart.
|
||||
let margin = { top: 20, right: 30, bottom: 50, left: 55 },
|
||||
// width = parseInt(d3.select('#chart').style('width'), 10) - margin.left - margin.right,
|
||||
width = 600 - margin.left - margin.right,
|
||||
// height = width/.8 - margin.top - margin.bottom;
|
||||
height = width - margin.top - margin.bottom;
|
||||
|
||||
let svg = d3.select("#chart").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
// Scales: x and y and r
|
||||
let x = d3.scaleLinear()
|
||||
// .domain([3, 6])
|
||||
.domain([4, 6])
|
||||
.range([0, width]);
|
||||
let y = d3.scaleLinear()
|
||||
// .domain([2, 6])
|
||||
.domain([3, 6])
|
||||
.range([height, 0]);
|
||||
let r = d3.scaleSqrt()
|
||||
.domain([0, 10])
|
||||
.range([0, 25]);
|
||||
|
||||
// Point color
|
||||
let ptcolor = "#5a8171";
|
||||
|
||||
|
||||
|
||||
// x-axis
|
||||
let xAxis = d3.axisBottom(x)
|
||||
// .ticks(7)
|
||||
.ticks(4)
|
||||
.tickSize(-height-8)
|
||||
.tickPadding(5);
|
||||
let xAxisEl = svg.append("g")
|
||||
.attr("class", "x axis bottom")
|
||||
.attr("transform", "translate(0,"+(height+8)+")");
|
||||
xAxisEl.append("text")
|
||||
.attr("class", "axistitle")
|
||||
.attr("text-anchor", "start")
|
||||
.attr("x", 0).attr("y", 0)
|
||||
// .attr("dx", "-.25em")
|
||||
.attr("dx", "-.8em")
|
||||
.attr("dy", "2.5em")
|
||||
.text("Meaningfulness Score Average");
|
||||
xAxisEl.call(xAxis);
|
||||
|
||||
|
||||
// y-axis
|
||||
let yAxis = d3.axisLeft(y)
|
||||
// .ticks(7)
|
||||
.ticks(5)
|
||||
.tickSize(-width-8)
|
||||
.tickPadding(5);
|
||||
let yAxisEl = svg.append("g")
|
||||
.attr("class", "y axis left")
|
||||
.attr("transform", "translate("+(-8)+",0)");
|
||||
yAxisEl.append("text")
|
||||
.attr("class", "axistitle")
|
||||
.attr("x", 0).attr("y", 0)
|
||||
.attr("dx", "4px")
|
||||
// .attr("dy", "-2em")
|
||||
.attr("dy", "-3em")
|
||||
.style("text-anchor", "end")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.text("Happiness Score Average");
|
||||
yAxisEl.call(yAxis);
|
||||
|
||||
|
||||
let activities;
|
||||
let circle, labeltext;
|
||||
|
||||
// Load data
|
||||
const activitiesData = Promise.all([
|
||||
d3.tsv("data/act_means.tsv", d3.autoType)
|
||||
]);
|
||||
activitiesData.then(function(data) {
|
||||
|
||||
activities = data[0].sort((a, b) => b.relwt - a.relwt);
|
||||
console.log(activities);
|
||||
|
||||
// Initialize chart now that data is loaded.
|
||||
initChart();
|
||||
});
|
||||
|
||||
|
||||
function initChart() {
|
||||
// Circle for each node.
|
||||
circle = svg.append("g")
|
||||
.selectAll("circle")
|
||||
.data(activities)
|
||||
.join("circle")
|
||||
.attr("id", d => "circle"+d.activity)
|
||||
.attr("cx", d => x(d.meaning_mean))
|
||||
.attr("cy", d => y(d.schappy_mean))
|
||||
.attr("fill", ptcolor)
|
||||
.attr("fill-opacity", .75)
|
||||
.attr("r", d => r(d.relwt))
|
||||
.attr("stroke", "#fff")
|
||||
.attr("stroke-width", ".5px");
|
||||
|
||||
setInteraction();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function setInteraction() {
|
||||
|
||||
// Create label
|
||||
labeltext = svg.append("text")
|
||||
.attr("text-anchor", "middle");
|
||||
|
||||
// Hover events
|
||||
circle.on("mouseover", function(e,d) {
|
||||
d3.selectAll(".current").classed("current", false);
|
||||
d3.select(this).classed("current", true);
|
||||
|
||||
let curract = d3.select(this).datum();
|
||||
|
||||
labeltext.text(curract.descrip)
|
||||
.attr("x", x(curract.meaning_mean))
|
||||
.attr("y", y(curract.schappy_mean)-r(curract.relwt)-5);
|
||||
})
|
||||
// .on("mousemove", function(e,d) {
|
||||
// d3.select(this).classed("current", true);
|
||||
// })
|
||||
.on('mouseout', function(d) {
|
||||
d3.select(this).classed('current', false);
|
||||
labeltext.text('');
|
||||
}); // @end mouseover
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
// https://d3js.org v7.4.0 Copyright 2010-2022 Mike Bostock
|
||||
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";function n(t,n){return null==t||null==n?NaN:t<n?-1:t>n?1:t>=n?0:NaN}function e(t){let e=t,r=t,i=t;function o(t,n,e=0,o=t.length){if(e<o){if(0!==r(n,n))return o;do{const r=e+o>>>1;i(t[r],n)<0?e=r+1:o=r}while(e<o)}return e}return 2!==t.length&&(e=(n,e)=>t(n)-e,r=n,i=(e,r)=>n(t(e),r)),{left:o,center:function(t,n,r=0,i=t.length){const a=o(t,n,r,i-1);return a>r&&e(t[a-1],n)>-e(t[a],n)?a-1:a},right:function(t,n,e=0,o=t.length){if(e<o){if(0!==r(n,n))return o;do{const r=e+o>>>1;i(t[r],n)<=0?e=r+1:o=r}while(e<o)}return e}}}function r(t){return null===t?NaN:+t}const i=e(n),o=i.right,a=i.left,u=e(r).center;var c=o;function f(t,n){let e=0;if(void 0===n)for(let n of t)null!=n&&(n=+n)>=n&&++e;else{let r=-1;for(let i of t)null!=(i=n(i,++r,t))&&(i=+i)>=i&&++e}return e}function s(t){return 0|t.length}function l(t){return!(t>0)}function h(t){return"object"!=typeof t||"length"in t?t:Array.from(t)}function d(t,n){let e,r=0,i=0,o=0;if(void 0===n)for(let n of t)null!=n&&(n=+n)>=n&&(e=n-i,i+=e/++r,o+=e*(n-i));else{let a=-1;for(let u of t)null!=(u=n(u,++a,t))&&(u=+u)>=u&&(e=u-i,i+=e/++r,o+=e*(u-i))}if(r>1)return o/(r-1)}function p(t,n){const e=d(t,n);return e?Math.sqrt(e):e}function g(t,n){let e,r;if(void 0===n)for(const n of t)null!=n&&(void 0===e?n>=n&&(e=r=n):(e>n&&(e=n),r<n&&(r=n)));else{let i=-1;for(let o of t)null!=(o=n(o,++i,t))&&(void 0===e?o>=o&&(e=r=o):(e>o&&(e=o),r<o&&(r=o)))}return[e,r]}class y{constructor(){this._partials=new Float64Array(32),this._n=0}add(t){const n=this._partials;let e=0;for(let r=0;r<this._n&&r<32;r++){const i=n[r],o=t+i,a=Math.abs(t)<Math.abs(i)?t-(o-i):i-(o-t);a&&(n[e++]=a),t=o}return n[e]=t,this._n=e+1,this}valueOf(){const t=this._partials;let n,e,r,i=this._n,o=0;if(i>0){for(o=t[--i];i>0&&(n=o,e=t[--i],o=n+e,r=e-(o-n),!r););i>0&&(r<0&&t[i-1]<0||r>0&&t[i-1]>0)&&(e=2*r,n=o+e,e==n-o&&(o=n))}return o}}class InternMap extends Map{constructor(t,n=m){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:n}}),null!=t)for(const[n,e]of t)this.set(n,e)}get(t){return super.get(v(this,t))}has(t){return super.has(v(this,t))}set(t,n){return super.set(_(this,t),n)}delete(t){return super.delete(b(this,t))}}class InternSet extends Set{constructor(t,n=m){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:n}}),null!=t)for(const n of t)this.add(n)}has(t){return super.has(v(this,t))}add(t){return super.add(_(this,t))}delete(t){return super.delete(b(this,t))}}function v({_intern:t,_key:n},e){const r=n(e);return t.has(r)?t.get(r):e}function _({_intern:t,_key:n},e){const r=n(e);return t.has(r)?t.get(r):(t.set(r,e),e)}function b({_intern:t,_key:n},e){const r=n(e);return t.has(r)&&(e=t.get(r),t.delete(r)),e}function m(t){return null!==t&&"object"==typeof t?t.valueOf():t}function x(t){return t}function w(t,...n){return k(t,x,x,n)}function M(t,...n){return k(t,Array.from,x,n)}function A(t,n){for(let e=1,r=n.length;e<r;++e)t=t.flatMap((t=>t.pop().map((([n,e])=>[...t,n,e]))));return t}function T(t,n,...e){return k(t,x,n,e)}function S(t,n,...e){return k(t,Array.from,n,e)}function E(t){if(1!==t.length)throw new Error("duplicate key");return t[0]}function k(t,n,e,r){return function t(i,o){if(o>=r.length)return e(i);const a=new InternMap,u=r[o++];let c=-1;for(const t of i){const n=u(t,++c,i),e=a.get(n);e?e.push(t):a.set(n,[t])}for(const[n,e]of a)a.set(n,t(e,o));return n(a)}(t,0)}function N(t,n){return Array.from(n,(n=>t[n]))}function C(t,...n){if("function"!=typeof t[Symbol.iterator])throw new TypeError("values is not iterable");t=Array.from(t);let[e]=n;if(e&&2!==e.length||n.length>1){const r=Uint32Array.from(t,((t,n)=>n));return n.length>1?(n=n.map((n=>t.map(n))),r.sort(((t,e)=>{for(const r of n){const n=z(r[t],r[e]);if(n)return n}}))):(e=t.map(e),r.sort(((t,n)=>z(e[t],e[n])))),N(t,r)}return t.sort(P(e))}function P(t=n){if(t===n)return z;if("function"!=typeof t)throw new TypeError("compare is not a function");return(n,e)=>{const r=t(n,e);return r||0===r?r:(0===t(e,e))-(0===t(n,n))}}function z(t,n){return(null==t||!(t>=t))-(null==n||!(n>=n))||(t<n?-1:t>n?1:0)}var D=Array.prototype.slice;function R(t){return()=>t}var F=Math.sqrt(50),q=Math.sqrt(10),O=Math.sqrt(2);function U(t,n,e){var r,i,o,a,u=-1;if(e=+e,(t=+t)===(n=+n)&&e>0)return[t];if((r=n<t)&&(i=t,t=n,n=i),0===(a=I(t,n,e))||!isFinite(a))return[];if(a>0){let e=Math.round(t/a),r=Math.round(n/a);for(e*a<t&&++e,r*a>n&&--r,o=new Array(i=r-e+1);++u<i;)o[u]=(e+u)*a}else{a=-a;let e=Math.round(t*a),r=Math.round(n*a);for(e/a<t&&++e,r/a>n&&--r,o=new Array(i=r-e+1);++u<i;)o[u]=(e+u)/a}return r&&o.reverse(),o}function I(t,n,e){var r=(n-t)/Math.max(0,e),i=Math.floor(Math.log(r)/Math.LN10),o=r/Math.pow(10,i);return i>=0?(o>=F?10:o>=q?5:o>=O?2:1)*Math.pow(10,i):-Math.pow(10,-i)/(o>=F?10:o>=q?5:o>=O?2:1)}funLine truncated
|
||||
Reference in new issue
Block a user