Add VT2-examples: all 6 chapters of 'Visualize This' (110 files) — data scraping, ETL, trends, categorical, multivariate, spatial, distribution analysis

2026-06-24 14:49:15 +05:00
1 parent 088771a9cf
commit b42b866a8c
@@ -0,0 +1,110 @@
+Year,Beef,Chicken
+1909,51.1,10.4
+1910,48.5,11.0
+1911,47.2,11.1
+1912,44.5,10.6
+1913,43.6,10.3
+1914,42.7,10.3
+1915,38.8,10.2
+1916,40.6,9.6
+1917,44.6,9.4
+1918,47.2,9.4
+1919,42.4,10.1
+1920,40.7,9.7
+1921,38.2,9.5
+1922,40.7,10.1
+1923,41.1,10.4
+1924,41.0,9.7
+1925,41.0,10.1
+1926,41.5,10.1
+1927,37.5,10.8
+1928,33.6,10.4
+1929,34.2,10.1
+1930,33.7,11.1
+1931,33.4,10.0
+1932,32.1,10.2
+1933,35.5,10.4
+1934,43.9,9.6
+1935,36.6,9.3
+1936,41.6,9.6
+1937,38.0,9.7
+1938,37.4,9.0
+1939,37.6,10.0
+1940,37.8,10.0
+1941,42.6,11.0
+1942,45.9,12.7
+1943,43.0,16.0
+1944,46.6,15.3
+1945,48.0,15.1
+1946,44.2,13.9
+1947,49.2,12.5
+1948,44.2,12.6
+1949,44.7,13.5
+1950,44.6,14.3
+1951,41.2,15.0
+1952,43.9,15.2
+1953,54.5,15.1
+1954,56.0,15.6
+1955,57.2,14.7
+1956,59.5,16.8
+1957,58.7,17.5
+1958,55.9,19.2
+1959,56.6,19.7
+1960,59.1,19.1
+1961,61.0,20.5
+1962,61.7,20.5
+1963,65.4,21.0
+1964,70.6,21.3
+1965,70.4,22.8
+1966,73.7,24.5
+1967,75.3,25.1
+1968,77.3,25.2
+1969,77.8,26.3
+1970,79.8,27.4
+1971,79.2,27.4
+1972,80.5,28.3
+1973,76.0,27.1
+1974,80.7,27.0
+1975,83.2,26.4
+1976,88.8,28.5
+1977,86.3,29.0
+1978,82.2,30.4
+1979,73.5,32.8
+1980,72.1,32.7
+1981,72.8,33.7
+1982,72.5,33.9
+1983,74.1,34.0
+1984,73.8,35.3
+1985,74.6,36.4
+1986,74.4,37.2
+1987,69.5,39.4
+1988,68.6,39.6
+1989,65.1,40.5
+1990,63.9,42.5
+1991,62.9,44.2
+1992,62.4,46.5
+1993,61.0,48.1
+1994,62.9,48.7
+1995,63.5,48.2
+1996,64.0,48.6
+1997,62.6,50.0
+1998,63.6,50.4
+1999,64.3,53.6
+2000,64.5,54.2
+2001,63.1,54.0
+2002,64.5,56.8
+2003,61.9,57.6
+2004,63.0,59.3
+2005,62.5,60.5
+2006,62.8,60.9
+2007,62.1,59.9
+2008,59.4,58.7
+2009,58.1,56.1
+2010,56.7,58.0
+2011,54.4,58.4
+2012,54.5,56.7
+2013,53.6,57.7
+2014,51.5,58.8
+2015,51.4,62.6
+2016,52.9,63.2
+2017,54.3,64.1
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>Beef vs. Chicken</title>
+<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
+</head>
+
+<div id="main-wrapper">
+    <h1>Beef vs. Chicken</h1>
+    <div id="chart"></div>
+</div>
+
+<script src="js/d3.v7.min.js"></script>
+<script src="js/differencechart.js"></script>
@@ -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
@@ -0,0 +1,156 @@
+// Dimensions of chart.
+let margin = { top: 30, right: 10, bottom: 30, left: 45 },
+    // 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;
+    
+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
+let x = d3.scaleLinear()
+    .domain([1909, 2017])
+	.range([0, width]);
+let y = d3.scaleLinear()
+    .domain([0, 100])
+	.range([height, 0]);
+    
+
+// Geometries
+let area = d3.area()
+    .x(d => x(d.year))
+    .y1(d => y(d.amt));
+let line = d3.line()
+    .x(d => x(d.year))
+    .y(d => y(d.amt));
+    
+
+let xAxis, yAxis, xAxisEl, yAxisEL;
+
+let meats, beef, chicken;
+
+    
+// Load data
+const meatData = Promise.all([
+    d3.csv("data/beef-vs-chicken-difference.csv", d3.autoType)
+]);
+meatData.then(function(data) {
+    
+    meats = data[0];
+    console.log(meats);
+    
+    svg.datum(meats);
+    
+    // Initialize chart now that data is loaded.
+    initChart();
+});
+
+
+
+function initChart() {
+    
+    // x-axis
+    xAxis = d3.axisBottom(x)
+        .ticks(4)
+        .tickFormat(d => d)
+	    .tickSize(-height-8)
+	    .tickPadding(5);
+    xAxisEl = svg.append("g")
+	    .attr("class", "x axis bottom")
+	    .attr("transform", "translate(0,"+(height+8)+")");
+    xAxisEl.call(xAxis);
+
+    // y-axis
+    yAxis = d3.axisLeft(y)
+        // .ticks(7)
+        .ticks(5)
+	    .tickSize(-width-8)
+	    .tickPadding(5);
+    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", "-2.25em")
+        .attr("dy", "-1.5em")
+        .style("text-anchor", "start")
+        .text("Pounds per capita");
+    yAxisEl.call(yAxis);
+    
+    // Area clipping paths
+    svg.append("clipPath")
+        .attr("id", "clip-above")
+      .append("path")
+        .attr("d", d3.area()
+            .x(d => x(d.Year))
+            .y0(0)
+            .y1(d => y(d.Chicken)));
+    svg.append("clipPath")
+        .attr("id", "clip-below")
+        .append("path")
+        .attr("d", d3.area()
+            .x(d => x(d.Year))
+            .y0(height)
+            .y1(d => y(d.Chicken)));
+
+    // Area differences
+    svg.append("path")
+        .attr("class", "area above")
+        .attr("clip-path", "url(#clip-above)")
+        .attr("fill", "#fdad94")
+        .attr("d", d3.area()
+            .x(d => x(d.Year)).y0(height).y1(d => y(d.Beef)));
+    svg.append("path")
+        .attr("class", "area below")
+        .attr("fill", "#f9e59f")
+        .attr("clip-path", "url(#clip-below)")
+        .attr("d", d3.area()
+            .x(d => x(d.Year)).y0(0).y1(d => y(d.Beef)));
+
+    // Lines
+    svg.append("path")
+        .attr("class", "line chicken")
+        .attr("fill", "none")
+        .attr("stroke", "#bf980d")
+        .attr("stroke-width", "2px")
+        .attr("d", d3.line()
+            .x(d => x(d.Year))
+            .y(d => y(d.Chicken)));
+    svg.append("path")
+        .attr("class", "line beef")
+        .attr("fill", "none")
+        .attr("stroke", "#fb470e")
+        .attr("stroke-width", "2px")
+        .attr("d", d3.line()
+            .x(d => x(d.Year))
+            .y(d => y(d.Beef)));
+    
+    
+    setAnnotation();
+}
+
+
+
+
+function setAnnotation() {
+    svg.append("text")
+        .attr("class", "mainlab")
+        .attr("fill", "#fb470e")
+        .attr("x", x(1962))
+        .attr("y", y(40))
+        .text("BEEF");
+    
+    svg.append("text")
+        .attr("text-anchor", "end")
+        .attr("class", "mainlab")
+        .attr("fill", "#bf980d")
+        .attr("x", x(2017))
+        .attr("y", y(65))
+        .text("CHICKEN");
+}
+
@@ -0,0 +1,69 @@
+/* #Reset & Basics (Inspired by E. Meyers)
+================================================== */
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline; }
+	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+		display: block; }
+	body {
+		line-height: 1; }
+	ol, ul {
+		list-style: none; }
+	blockquote, q {
+		quotes: none; }
+	blockquote:before, blockquote:after,
+	q:before, q:after {
+		content: '';
+		content: none; }
+	table {
+		border-collapse: collapse;
+		border-spacing: 0; }
+        
+
+/* Main layout
+============================ */        
+
+#main-wrapper {
+    width: 600px;
+    margin: 40px auto;
+}        
+h1 {
+    font-family: Georgia, serif;
+    font-size: 1.45em;
+    text-align: center;
+}
+        
+        
+/* Chart
+============================ */
+
+#chart {
+    position: relative;
+    margin: 0 auto;
+}
+text {
+    font-family: "Courier New", Courier, monospace;
+    font-size: .8rem;
+}
+text.mainlab {
+    font-weight: bold;
+}
+.axis .axistitle {
+	text-transform: uppercase;
+    fill: #333;
+	font-size: .8rem;
+}
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1px;
+  shape-rendering: crispEdges;
+}
+.x.axis path, .y.axis path {
+  display: none;
+}