30:Ta7c,{ const color = { a0: "#f9a03c", a1: "#f7974e", b0: "#f26d58", b1: "#f9a03c", c0: "#b84e51", c1: "#f68e48" }; return md`

[Logo của D3](https://observablehq.com/@d3/logo) được cấu thành bởi các hình tròn và các đoạn thẳng - những đơn vị hình khối cơ bản nhất.

`; }31:T771,chart1 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, lHeight]); const xAxis = svg.append("g").call(lXAxis); const yAxis = svg .append("g") .attr("class", "y axis") .call(lYAxis); const line = svg .append("path") .datum(lData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lLine); const random = d3.randomInt(-9, -38); yield svg.node(); let s = 0; const xTickLabels = xAxis.selectAll("text"); const yTickLabels = yAxis.selectAll("text:first-of-type"); console.log([...yTickLabels]); while (true) { await Promises.delay(6000, ++s); const t = d3.transition().duration(1000); if (s % 2 === 1) { xAxis .transition(t) .attr("transform", `translate(0,${lMargin.top}) scale(0.9)`); xTickLabels .transition(t) .delay((_, i) => i * 75) .attr("color", (_, i) => d3.schemeTableau10[i % 10]); yAxis .transition(t) .attr( "transform", `translate(${width - lMargin.right - 20},20) scale(0.9)` ); yTickLabels .transition(t) .delay((_, i) => i * 100) .attr("x", _ => random()); line .transition(t) .attr("transform", `translate(${lMargin.left},50) scale(0.8)`); } else { xAxis .transition(t) .attr("transform", `translate(0,${lHeight - lMargin.bottom})`); xTickLabels .transition(t) .delay((_, i) => i * 75) .attr("color", "black"); yAxis.transition(t).attr("transform", `translate(${lMargin.left},0)`); yTickLabels .transition(t) .delay((_, i) => i * 100) .attr("x", -9); line.transition(t).attr("transform", `translate(0,0)`); } yield svg.node(); } }32:T4aa,{ const svg = d3.create("svg").attr("viewBox", [0, 0, width, lHeight]); function y(s) { const scale = s === "linear" ? d3.scaleLinear : d3.scaleSqrt; return scale() .domain([0, d3.max(lData, d => d.value)]) .nice() .range([lHeight - lMargin.bottom, lMargin.top]); } const lY = y(scale); const lLine = d3 .line() .defined(d => !isNaN(d.value)) .x(d => lX(d.date)) .y(d => lY(d.value)); function lYAxis(g, y) { g.attr("transform", `translate(${lMargin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(lData.y) ); } const xAxis = svg.append("g").call(lXAxis); const yAxis = svg.append("g").call(lYAxis, lY); const line = svg .append("path") .datum(lData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lLine); return svg.node(); }33:[{"id":"117c9b99cfbaf1b5b70a568b92766462b2a0f4b0452135dacb9c474ef3764d1bd9b99fb5bc795871554136bb40aec357b0965aef296158e843ff32ed956e993f","href":"https://static.observableusercontent.com/files/117c9b99cfbaf1b5b70a568b92766462b2a0f4b0452135dacb9c474ef3764d1bd9b99fb5bc795871554136bb40aec357b0965aef296158e843ff32ed956e993f","name":"nytimes_upshot@1.gif","type":"image/gif","lastModified":1600658665492.348,"size":3246672},{"id":"a9fbfa5793fe477c9f03be670406c38ad458cfc94423da4e75264f70ada79db5a94aa7028ff023256485ff7d4e7bd8beaae823b70bf0670631255299cbf48619","href":"https://static.observableusercontent.com/files/a9fbfa5793fe477c9f03be670406c38ad458cfc94423da4e75264f70ada79db5a94aa7028ff023256485ff7d4e7bd8beaae823b70bf0670631255299cbf48619","name":"wapo.gif","type":"image/gif","lastModified":1600659760458.884,"size":4564264},{"id":"a4455452e659670d837d51ae2c8ab7d9acb0fea7d4314b1653a1f635cf3f1033de3d2b7146020f9efcfbc50776f2cb3dc889a791e3434f13dd4fad9455ecdc78","href":"https://static.observableusercontent.com/files/a4455452e659670d837d51ae2c8ab7d9acb0fea7d4314b1653a1f635cf3f1033de3d2b7146020f9efcfbc50776f2cb3dc889a791e3434f13dd4fad9455ecdc78","name":"mbostock.png","type":"image/png","lastModified":1600569896659.06,"size":935606}] 2e:{"title":"Xin chào, D3.js!","cells":[{"id":0,"value":"md`# Xin chào, D3.js!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`[D3](https://d3js.org/), viết tắt của Data-Driven Documents, là một **thư viện JavaScript** dành riêng cho Trực quan hoá Dữ liệu (Data Visualization).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md` D3 được sáng lập bởi Mike Bostock, từng làm việc tại tờ New York Times trên cương vị Biên tập Đồ hoạ. Năm nay, thư viện đã bước sang tuổi thứ 9.\n\n

[Twitter](https://twitter.com/mbostock) của Bostock

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`Điểm khác nhau *lớn nhất* giữa D3 và các thư viện (hoặc ứng dụng) TQHDL khác (Plotly, Tableau, Excel, Highcharts, v.v.) đó là trong khi các dịch vụ khác đã có sẵn **mẫu đồ thị** (chart template) và chỉ cần bạn nhập dữ liệu, D3 chỉ cung cấp những **nguyên liệu cơ bản** để bạn tự vẽ đồ thị của mình.\n\nTheo mình, những nguyên liệu này có thể được chia làm 2 nhóm: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`\n- Nguyên liệu **hữu hình**, ví dụ như đoạn thẳng tạo nên các trục, hoặc các đơn vị hình khối khác (tròn, chữ nhật, đa giác, v.v.) được hỗ trợ sẵn trên nền tảng Web. Đây là những yếu tố cấu thành một biểu đồ.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"caption(\n \"Các nguyên liệu cấu thành của một biểu đồ đường bao gồm: trục hoành & tung, được tạo bởi các đoạn thẳng (line) và kí tự (text); đường số liệu là một đường gấp khúc (path). Theo [Line Chart](https://observablehq.com/@d3/line-chart), Mike Bostock. Số liệu: Giá đóng cửa AAPL, Yahoo Finance.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`\n- Nguyên liệu **trừu tượng**, điển hình là thang (scale). Nếu ví sản phẩm trực quan như một ngôi nhà, còn nguyên liệu hữu hình là những viên gạch hay tấm kính, thì nguyên liệu trừu tượng có vai trò như một bản vẽ sơ cấp. (Nói là sơ cấp vì bạn có thể thay đổi, và thường sẽ phát triển từ nó.)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"viewof scale = radio({\n title: \"Thang cho trục tung (y-axis)\",\n options: [\n { label: \"Linear scale (Thang tuyến tính)\", value: \"linear\" },\n { label: \"Square-root scale (Thang căn bậc 2)\", value: \"sqrt\" }\n ],\n value: \"linear\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"caption(\n \"Ví dụ, thang có vai trò quyết định vị trí của điểm dữ liệu (data point) trên biểu đồ đường, dựa trên giá trị của điểm dữ liệu đó. Cùng một điểm dữ liệu, nhưng các thang khác nhau sẽ thể hiện điểm đó taị các vị trí khác nhau trên đồ thị.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`Mọi đồ thị, kể cả đồ thị mẫu của những ứng dụng TQHDL khác, đều được tạo nên bởi 2 loại nguyên liệu này. Vậy nên cũng không có gì lạ khi mà những ứng dụng đó thực chất đều sử dụng D3 tại cấp độ mã nguồn. \n\nTrở lại ví dụ ngôi nhà, nếu việc sử dụng D3 giống như tự xây nhà từ gạch, vữa và bản vẽ, sử dụng những ứng dụng đó giống như mua nhà dự án và chỉ trang trí thêm. \n\n*Vậy làm thế nào để quyết định nên mua nhà hay xây nhà?*\n\nTheo mình, nếu \n- thời gian của bạn **có hạn**, và \n- sản phẩm đầu ra **không cần quá cầu kì**,\n\nsử dụng thư viện có sẵn sẽ hợp lí hơn. Nhưng nếu trong quá trình phát triển sẩn phẩm,\n- bạn luôn ước rằng mình có thể **tuỳ chỉnh** (customize) yếu tố này đến yếu tố khác, hoặc thậm chí,\n- ý tưởng sản phẩm **rất độc đáo**, các ứng dụng TQHDL không thể xây dựng được,\n\nD3 là lựa chọn số 1. Khi có gạch, vữa và bản vẽ để phát triển, bạn có thể xây bất cứ thứ gì bạn muốn. Giới hạn duy nhất là sự sáng tạo của bạn (và tất nhiên, dữ liệu thích hợp).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`Dưới đây là một số ví dụ cho thấy bạn có thể làm được gì với D3:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"FileAttachment(\"wapo.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"caption(\n \"Bản đồ về sự phân bố chủng tộc trên nước Mĩ.
Nguồn: [America is more diverse than ever — but still segregated](https://www.washingtonpost.com/graphics/2018/national/segregation-us-cities/), Aaron Williams và Armand Emamdjomeh, Washington Post.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"FileAttachment(\"nytimes_upshot@1.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"caption(\n `[\"Nên thuê nhà hay mua nhà?\"](https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html) của Mike Bostock, Shan Carter và Archie Tse là một bài kinh điển của New York Times. Nhưng riêng nhà này là phải tự xây ;)`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"importCell(\"embed\", \"@duynguyen1678/viewing-bl-ocks-on-observable\", {\n url:\n \"https://gist.githubusercontent.com/duynguyen158/6b753b933e63033ad6ae7fcddd28ca2e/raw/85316570dc818afc188d498a77c1a5165085a820/index.html\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"caption(\n \"Ma trận biểu đồ đường, so sánh giá nhà theo quý của Mỹ (cam) với một số nước khác (xanh) từ 1975 đến 2019. Di chuột để thấy giá trị cụ thể.
Nguồn: [Line-Chart Matrix](https://bl.ocks.org/duynguyen158/6b753b933e63033ad6ae7fcddd28ca2e), Duy Nguyen.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"importCell(\"chart\", \"@mbostock/hertzsprung-russell-diagram\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"caption(\n \"[Biểu đồ Hertzsprung–Russell](https://www.greelane.com/vi/khoa-h%E1%BB%8Dc-c%C3%B4ng-ngh%E1%BB%87-to%C3%A1n/khoa-h%E1%BB%8Dc/hertzsprung-russell-diagram-4134689/) thể hiện mối quan hệ giữa độ sáng và nhiệt độ của một ngôi sao trong suốt cuộc đời của nó.
Nguồn: [Hertzsprung–Russell Diagram](https://observablehq.com/@mbostock/hertzsprung-russell-diagram), Mike Bostock.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"importCell(\"chart\", \"@toja/gridded-population-of-the-world\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"caption(\n \"Mật độ dân số trên thế giới, theo từng ô 1°×1°. Nhấn và di chuột để thấy những nơi đang bị che khuất.
Nguồn: [Gridded Population of the World](https://observablehq.com/@toja/gridded-population-of-the-world), Torben Jansen.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"viewof replay = button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"importCell(\n \"annimatedBrusselsStreetsMap\",\n \"@karimdouieb/brussels-streets-gender-inequality\",\n {\n replay\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"caption(\n \"Đường phố Brussels, Bỉ, tô màu theo giới tính của danh nhân (nam - xanh, nữ - đỏ). Nhấn replay để phát lại hoạt ảnh (animation).
Nguồn: [Brussels Streets Gender Inequality](https://observablehq.com/@karimdouieb/brussels-streets-gender-inequality), Karim Douïeb.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"viewof replay2 = button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"{\n replay2;\n return importCell(\"digitalClock\", \"@rkaravia/p\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"caption(\n \"Thể hiện đồng hồ điện tử bằng các đồng hồ kim, thời gian tự động cập nhật. Nhấn replay để phát lai hoạt ảnh.
Nguồn: [Ψηφιακό ρολόι](https://observablehq.com/@rkaravia/p), Roman Karavia.\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`Và còn rất, rất, rất nhiều ví dụ khác. \n\nD3 không hề đơn giản. Muốn [học D3](https://observablehq.com/@d3/learn-d3), trước hết cần phải học HTML, CSS và JavaScript. Muốn dùng D3 thì chỉ còn cách xắn tay áo lên và code 😩\n\nNhưng qua bài viết này, mình mong các bạn thấy rõ những gì D3 có thể mang lại, đặc biệt trong bối cảnh TQHDL tại Việt Nam vẫn còn non trẻ. Xin cảm ơn vì đã đọc bài của mình, và mong rằng trong tương lai nước ta sẽ không chỉ có thêm nhiều *sản phẩm*, mà còn thật nhiều *tác phẩm* trực quan 🇻🇳🎉`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`___\n## Mã nguồn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"import {\n data as lData,\n line as lLine,\n x as lX,\n xAxis as lXAxis,\n yAxis as lYAxis,\n height as lHeight,\n margin as lMargin\n} from \"@d3/line-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"import { caption } from \"@duynguyen1678/caption\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"import { importCell } from \"@mbostock/dataflow\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"import { radio, button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}