├── .gitignore
├── 00-boiler
├── src
│ ├── index.ts
│ └── index.html
├── .babelrc
├── tsconfig.json
├── package.json
└── webpack.config.js
├── 01-boiler-d3
├── .babelrc
├── src
│ ├── index.html
│ └── index.ts
├── tsconfig.json
├── package.json
└── webpack.config.js
├── 02-basic-chart
├── .babelrc
├── src
│ ├── index.html
│ └── index.ts
├── tsconfig.json
├── package.json
└── webpack.config.js
├── README.md
└── LICENSE
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .parcel-cache
3 | dist
--------------------------------------------------------------------------------
/00-boiler/src/index.ts:
--------------------------------------------------------------------------------
1 | console.log("Hello from typescript");
2 |
--------------------------------------------------------------------------------
/00-boiler/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-typescript"]
3 | }
4 |
--------------------------------------------------------------------------------
/01-boiler-d3/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-typescript"]
3 | }
4 |
--------------------------------------------------------------------------------
/02-basic-chart/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-typescript"]
3 | }
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # d3-ts-bar-chart-example
2 |
3 | Demos del video-post de [Lemoncode Tv](https://www.lemoncode.tv/).
4 |
--------------------------------------------------------------------------------
/00-boiler/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/01-boiler-d3/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/02-basic-chart/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/00-boiler/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "module": "es6",
5 | "moduleResolution": "node",
6 | "declaration": false,
7 | "noImplicitAny": false,
8 | "sourceMap": true,
9 | "jsx": "react",
10 | "noLib": false,
11 | "allowJs": true,
12 | "suppressImplicitAnyIndexErrors": true,
13 | "skipLibCheck": true,
14 | "esModuleInterop": true,
15 | "baseUrl": "./src/"
16 | },
17 | "include": ["./src/**/*"]
18 | }
19 |
--------------------------------------------------------------------------------
/01-boiler-d3/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "module": "es6",
5 | "moduleResolution": "node",
6 | "declaration": false,
7 | "noImplicitAny": false,
8 | "sourceMap": true,
9 | "jsx": "react",
10 | "noLib": false,
11 | "allowJs": true,
12 | "suppressImplicitAnyIndexErrors": true,
13 | "skipLibCheck": true,
14 | "esModuleInterop": true,
15 | "baseUrl": "./src/"
16 | },
17 | "include": ["./src/**/*"]
18 | }
19 |
--------------------------------------------------------------------------------
/02-basic-chart/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "module": "es6",
5 | "moduleResolution": "node",
6 | "declaration": false,
7 | "noImplicitAny": false,
8 | "sourceMap": true,
9 | "jsx": "react",
10 | "noLib": false,
11 | "allowJs": true,
12 | "suppressImplicitAnyIndexErrors": true,
13 | "skipLibCheck": true,
14 | "esModuleInterop": true,
15 | "baseUrl": "./src/"
16 | },
17 | "include": ["./src/**/*"]
18 | }
19 |
--------------------------------------------------------------------------------
/01-boiler-d3/src/index.ts:
--------------------------------------------------------------------------------
1 | import * as d3 from "d3";
2 |
3 | const svgDimensions = { width: 400, height: 400 };
4 | const margin = { left: 5, right: 5, top: 10, bottom: 10 };
5 | const chartDimensions = {
6 | width: svgDimensions.width - margin.left - margin.right,
7 | height: svgDimensions.height - margin.bottom - margin.top,
8 | };
9 |
10 | const svg = d3
11 | .select("body")
12 | .append("svg")
13 | .attr("width", chartDimensions.width)
14 | .attr("height", chartDimensions.height)
15 | .attr("style", "background-color: #FBFAF0");
16 |
--------------------------------------------------------------------------------
/02-basic-chart/src/index.ts:
--------------------------------------------------------------------------------
1 | import * as d3 from "d3";
2 |
3 | const svgDimensions = { width: 400, height: 400 };
4 | const margin = { left: 5, right: 5, top: 10, bottom: 10 };
5 | const chartDimensions = {
6 | width: svgDimensions.width - margin.left - margin.right,
7 | height: svgDimensions.height - margin.bottom - margin.top,
8 | };
9 |
10 | const svg = d3
11 | .select("body")
12 | .append("svg")
13 | .attr("width", chartDimensions.width)
14 | .attr("height", chartDimensions.height)
15 | .attr("style", "background-color: #FBFAF0");
16 |
--------------------------------------------------------------------------------
/00-boiler/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "start": "run-p -l type-check:watch start:dev",
4 | "type-check": "tsc --noEmit",
5 | "type-check:watch": "npm run type-check -- --watch",
6 | "start:dev": "webpack serve",
7 | "build": "webpack --mode development"
8 | },
9 | "devDependencies": {
10 | "@babel/cli": "^7.13.16",
11 | "@babel/core": "^7.13.16",
12 | "@babel/preset-env": "^7.13.15",
13 | "@babel/preset-typescript": "^7.13.0",
14 | "babel-loader": "^8.2.2",
15 | "clean-webpack-plugin": "^4.0.0-alpha.0",
16 | "css-loader": "^5.2.4",
17 | "html-loader": "^2.1.2",
18 | "html-webpack-plugin": "^5.3.1",
19 | "mini-css-extract-plugin": "^1.5.0",
20 | "npm-run-all": "^4.1.5",
21 | "sass": "^1.32.11",
22 | "sass-loader": "^11.0.1",
23 | "typescript": "^4.2.4",
24 | "webpack": "^5.35.1",
25 | "webpack-cli": "^4.6.0",
26 | "webpack-dev-server": "^3.11.2"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/01-boiler-d3/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "start": "run-p -l type-check:watch start:dev",
4 | "type-check": "tsc --noEmit",
5 | "type-check:watch": "npm run type-check -- --watch",
6 | "start:dev": "webpack serve",
7 | "build": "webpack --mode development"
8 | },
9 | "devDependencies": {
10 | "@babel/cli": "^7.13.16",
11 | "@babel/core": "^7.13.16",
12 | "@babel/preset-env": "^7.13.15",
13 | "@babel/preset-typescript": "^7.13.0",
14 | "@types/d3": "^6.3.0",
15 | "babel-loader": "^8.2.2",
16 | "clean-webpack-plugin": "^4.0.0-alpha.0",
17 | "css-loader": "^5.2.4",
18 | "html-loader": "^2.1.2",
19 | "html-webpack-plugin": "^5.3.1",
20 | "mini-css-extract-plugin": "^1.5.0",
21 | "npm-run-all": "^4.1.5",
22 | "sass": "^1.32.11",
23 | "sass-loader": "^11.0.1",
24 | "typescript": "^4.2.4",
25 | "webpack": "^5.35.1",
26 | "webpack-cli": "^4.6.0",
27 | "webpack-dev-server": "^3.11.2"
28 | },
29 | "dependencies": {
30 | "d3": "^6.7.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/02-basic-chart/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "start": "run-p -l type-check:watch start:dev",
4 | "type-check": "tsc --noEmit",
5 | "type-check:watch": "npm run type-check -- --watch",
6 | "start:dev": "webpack serve",
7 | "build": "webpack --mode development"
8 | },
9 | "devDependencies": {
10 | "@babel/cli": "^7.13.16",
11 | "@babel/core": "^7.13.16",
12 | "@babel/preset-env": "^7.13.15",
13 | "@babel/preset-typescript": "^7.13.0",
14 | "@types/d3": "^6.3.0",
15 | "babel-loader": "^8.2.2",
16 | "clean-webpack-plugin": "^4.0.0-alpha.0",
17 | "css-loader": "^5.2.4",
18 | "html-loader": "^2.1.2",
19 | "html-webpack-plugin": "^5.3.1",
20 | "mini-css-extract-plugin": "^1.5.0",
21 | "npm-run-all": "^4.1.5",
22 | "sass": "^1.32.11",
23 | "sass-loader": "^11.0.1",
24 | "typescript": "^4.2.4",
25 | "webpack": "^5.35.1",
26 | "webpack-cli": "^4.6.0",
27 | "webpack-dev-server": "^3.11.2"
28 | },
29 | "dependencies": {
30 | "d3": "^6.7.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Lemoncode
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/00-boiler/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin");
3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
4 | const path = require("path");
5 |
6 | const basePath = __dirname;
7 |
8 | module.exports = {
9 | context: path.join(basePath, "src"),
10 | resolve: {
11 | extensions: [".js", ".ts"],
12 | },
13 | entry: {
14 | app: "./index.ts",
15 | },
16 | output: {
17 | filename: "[name].[chunkhash].js",
18 | path: path.resolve(process.cwd(), "dist"),
19 | },
20 | module: {
21 | rules: [
22 | {
23 | test: /\.tsx?$/,
24 | exclude: /node_modules/,
25 | loader: "babel-loader",
26 | },
27 | {
28 | test: /\.scss$/,
29 | exclude: /node_modules/,
30 | use: [
31 | MiniCssExtractPlugin.loader,
32 | {
33 | loader: "css-loader",
34 | options: {
35 | modules: {
36 | exportLocalsConvention: "camelCase",
37 | localIdentName: "[path][name]__[local]--[hash:base64:5]",
38 | localIdentContext: path.resolve(__dirname, "src"),
39 | localIdentHashPrefix: "my-custom-hash",
40 | },
41 | },
42 | },
43 | {
44 | loader: "sass-loader",
45 | options: {
46 | implementation: require("sass"),
47 | },
48 | },
49 | ],
50 | },
51 | {
52 | test: /\.css$/,
53 | use: [MiniCssExtractPlugin.loader, "css-loader"],
54 | },
55 | {
56 | test: /\.(png|jpg)$/,
57 | type: "asset/resource",
58 | },
59 | {
60 | test: /\.html$/,
61 | loader: "html-loader",
62 | },
63 | ],
64 | },
65 | devtool: "eval-source-map",
66 | devServer: {
67 | port: 8080,
68 | stats: "errors-only",
69 | },
70 | plugins: [
71 | //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
72 | new HtmlWebpackPlugin({
73 | filename: "index.html", //Name of file in ./dist/
74 | template: "index.html", //Name of template in ./src
75 | }),
76 | new CleanWebpackPlugin(),
77 | new MiniCssExtractPlugin({
78 | filename: "[name].css",
79 | chunkFilename: "[id].css",
80 | }),
81 | ],
82 | };
83 |
--------------------------------------------------------------------------------
/01-boiler-d3/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin");
3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
4 | const path = require("path");
5 |
6 | const basePath = __dirname;
7 |
8 | module.exports = {
9 | context: path.join(basePath, "src"),
10 | resolve: {
11 | extensions: [".js", ".ts"],
12 | },
13 | entry: {
14 | app: "./index.ts",
15 | },
16 | output: {
17 | filename: "[name].[chunkhash].js",
18 | path: path.resolve(process.cwd(), "dist"),
19 | },
20 | module: {
21 | rules: [
22 | {
23 | test: /\.tsx?$/,
24 | exclude: /node_modules/,
25 | loader: "babel-loader",
26 | },
27 | {
28 | test: /\.scss$/,
29 | exclude: /node_modules/,
30 | use: [
31 | MiniCssExtractPlugin.loader,
32 | {
33 | loader: "css-loader",
34 | options: {
35 | modules: {
36 | exportLocalsConvention: "camelCase",
37 | localIdentName: "[path][name]__[local]--[hash:base64:5]",
38 | localIdentContext: path.resolve(__dirname, "src"),
39 | localIdentHashPrefix: "my-custom-hash",
40 | },
41 | },
42 | },
43 | {
44 | loader: "sass-loader",
45 | options: {
46 | implementation: require("sass"),
47 | },
48 | },
49 | ],
50 | },
51 | {
52 | test: /\.css$/,
53 | use: [MiniCssExtractPlugin.loader, "css-loader"],
54 | },
55 | {
56 | test: /\.(png|jpg)$/,
57 | type: "asset/resource",
58 | },
59 | {
60 | test: /\.html$/,
61 | loader: "html-loader",
62 | },
63 | ],
64 | },
65 | devtool: "eval-source-map",
66 | devServer: {
67 | port: 8080,
68 | stats: "errors-only",
69 | },
70 | plugins: [
71 | //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
72 | new HtmlWebpackPlugin({
73 | filename: "index.html", //Name of file in ./dist/
74 | template: "index.html", //Name of template in ./src
75 | }),
76 | new CleanWebpackPlugin(),
77 | new MiniCssExtractPlugin({
78 | filename: "[name].css",
79 | chunkFilename: "[id].css",
80 | }),
81 | ],
82 | };
83 |
--------------------------------------------------------------------------------
/02-basic-chart/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin");
3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
4 | const path = require("path");
5 |
6 | const basePath = __dirname;
7 |
8 | module.exports = {
9 | context: path.join(basePath, "src"),
10 | resolve: {
11 | extensions: [".js", ".ts"],
12 | },
13 | entry: {
14 | app: "./index.ts",
15 | },
16 | output: {
17 | filename: "[name].[chunkhash].js",
18 | path: path.resolve(process.cwd(), "dist"),
19 | },
20 | module: {
21 | rules: [
22 | {
23 | test: /\.tsx?$/,
24 | exclude: /node_modules/,
25 | loader: "babel-loader",
26 | },
27 | {
28 | test: /\.scss$/,
29 | exclude: /node_modules/,
30 | use: [
31 | MiniCssExtractPlugin.loader,
32 | {
33 | loader: "css-loader",
34 | options: {
35 | modules: {
36 | exportLocalsConvention: "camelCase",
37 | localIdentName: "[path][name]__[local]--[hash:base64:5]",
38 | localIdentContext: path.resolve(__dirname, "src"),
39 | localIdentHashPrefix: "my-custom-hash",
40 | },
41 | },
42 | },
43 | {
44 | loader: "sass-loader",
45 | options: {
46 | implementation: require("sass"),
47 | },
48 | },
49 | ],
50 | },
51 | {
52 | test: /\.css$/,
53 | use: [MiniCssExtractPlugin.loader, "css-loader"],
54 | },
55 | {
56 | test: /\.(png|jpg)$/,
57 | type: "asset/resource",
58 | },
59 | {
60 | test: /\.html$/,
61 | loader: "html-loader",
62 | },
63 | ],
64 | },
65 | devtool: "eval-source-map",
66 | devServer: {
67 | port: 8080,
68 | stats: "errors-only",
69 | },
70 | plugins: [
71 | //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
72 | new HtmlWebpackPlugin({
73 | filename: "index.html", //Name of file in ./dist/
74 | template: "index.html", //Name of template in ./src
75 | }),
76 | new CleanWebpackPlugin(),
77 | new MiniCssExtractPlugin({
78 | filename: "[name].css",
79 | chunkFilename: "[id].css",
80 | }),
81 | ],
82 | };
83 |
--------------------------------------------------------------------------------