import React from 'react'; import { createRoot } from 'react-dom'; import * as d3 from "d3"; ////////////////////////////////////////////////////////////////////// "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var react_1 = require("react"); //var d3 = require("d3"); var csvUrl = "https://gist.githubusercontent.com/nitanagdeote/8776bf38ebaf0e948fb446b41540f388/raw/8f53255514751647f9adfea772609025e780d906/Chargesheet-rate-2021-crime-data-India.csv"; // csv file url ///////////////////////////////////////////////////////////////////////////// var dataReturn = function () { var _a = (0, react_1.useState)([]), data = _a[0], setdata = _a[1]; (0, react_1.useEffect)(function () { d3.csv(csvUrl).then(function (data) { for (var _i = 0, data_1 = data; _i < data_1.length; _i++) { var d = data_1[_i]; d["Chargesheet-Rate-2021"] = +d["Chargesheet-Rate-2021"]; } // sort crime rate in descending order data.sort(function (a, b) { return a["Chargesheet-Rate-2021"] - b["Chargesheet-Rate-2021"]; }); setdata(data); }); console.log(data[0]); }, []); if (!data) { return Loading; //pre>;; } else { console.log("data loaded"); } return data; }; //exports.default = dataReturn; dataReturn() ///////////////////////////////////////////////////////////////////////////// "use strict"; var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; var _a; Object.defineProperty(exports, "__esModule", { value: true }); var react_1 = require("react"); var dataReturn_1 = require("./dataReturn"); var Text_1 = require("./Text"); //////////////////////////////////////////// var margin = { top: 100, right: 150, bottom: 200, left: 200 }; var width = 1000; var height = 1000; var innerHeight = height - margin.top - margin.bottom; var innerWidth = width - margin.left - margin.right; ///////////////////////////////////////////////////// /////////////////////////////////////////////////// // Data function /////////////////////////////////////////////////// var BarChart = function () { var _a = (0, react_1.useState)(0.5), opacityVar = _a[0], setopacityVar = _a[1]; var _b = (0, react_1.useState)(0.1), strokeWidthVar = _b[0], setstrokeWidthVar = _b[1]; var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1]; var data = (0, dataReturn_1.default)(); var _d = (0, react_1.useState)(""), display_text_mouseover = _d[0], setdisplay_text_mouseover = _d[1]; var xValue = function (d) { return d["Chargesheet-Rate-2021"]; }; var yValue = function (d) { return d["State/UT"]; }; var yAxisLabel = "State/UT"; var xAxisLabel = "Chartsheet Rate per State/UT (2021)"; var xScale = d3 .scaleLinear() .domain([0, d3.max(data, xValue)]) .range([0, innerWidth]) .nice(); var yScale = d3 .scaleBand() .domain(data.map(yValue)) .range([0, innerHeight]) .padding(0.3); /////////////////////////////////////////////////////////////////////////// var color = d3.scaleSequential(d3.interpolateBlues(0.8)).domain([0, 300]); ////////////////////////////////////////////////////////////////////////// // Axis// var yAxis = d3.axisLeft(yScale); var yAxisG = d3.select("g"); yAxisG.call(yAxis); ////////////////////////////////////////////////////////////////////////// var xAxis = d3.axisBottom(xScale); var xAxisG = d3.select("g").append("g").call(xAxis); xAxisG.attr("transform", "translate(0,".concat(innerHeight + margin.top - margin.bottom / 2, ")")); //////////////////////////////////////////////////////////////////////// // ////////////////////////////////////////////////////////////////////// return width = { width: width }; height = { height: height } > x; { 300; } y = 50 ; fontSize = "22"; fontWeight = "bold" ; opacity = 0.8 > "Chartsheet Rate per State/UT (2021)" < /text> < text; x = { 380: }; y = { innerHeight: innerHeight } + 150; }, fontSize = "16", fontWeight = { "normal": } > { " ": }; { xAxisLabel; } /text> < g; transform = {}(templateObject_1 || (templateObject_1 = __makeTemplateObject(["translate(", ",", ") scale(1)"], ["translate(", ",", ") scale(1)"])), margin.left, margin.top); > { data: data, : .map(function (d, i) { var _a; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// return key = (_a = { d: d }, _a["Chargesheet-Rate-2021"] = , _a); width = { xScale: function (d, _a, ) { } }; }) }; height = { yScale: yScale, : .bandwidth() }; x = { 0: as, any: any }; y = { yScale: function (d, _a, ) { } }; //fill={color(d["Chargesheet-Rate-2021"])} fill = "steelblue"; stroke = { "none": }; onClick = {}(); { setIndex(i); setdisplay_text_mouseover(d["state"]); } onMouseOver = {}(); { setIndex(i); setopacityVar(1); // setdisplay_text_mouseover(d["state"]); } // strokeOpacity={i == index ? 1 : 0} opacity = { i: i } == index ? opacityVar : 0.5; strokeWidth = { i: i } == index ? 3 : strokeWidthVar; /> < text; key = { Math: Math, : .random() }; x = { xScale: function (d, _a, ) { }, as: as, any: any }; y = { yScale: function (d, _a, ) { } }; dy = "0.8em"; dx = "0.5em"; fill = "black"; fontSize = "12"; textAnchor = "start" > (_a = { d: d }, _a["Chargesheet-Rate-2021"] = , _a) < /text> < Text_1.default; style = {}; { fontSize: "16px", fill; "black", opacity; 1, fontWeight; "bold", ; } key = { Math: Math, : .random() + Math.random() * 300 }; x = { xScale: function (d, _a, ) { } } + 40; y = { yScale: function (d, _a, ) { } }; text = { i: i } === index ? d["State/UT"] + " " + "( " + d["Chargesheet-Rate-2021"] + " )" : null; /> < />; ; /> < /g> < /svg> < />; ; ; exports.default = BarChart; var templateObject_1; /////////////////////////////////////////////////////////////////////// const App = () =>

Hello React!

; const root = createRoot(document.getElementById('root')); root.render();

bar-chart

Nita