{tooltipFormat(d.y)}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_127":-5,"_63":16,"_128":-5,"_129":130,"_131":132},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":73,"_106":73,"_44":107,"_108":-7,"_109":52,"_110":50,"_111":-5,"_112":113,"_114":16,"_115":116,"_117":118,"_119":43,"_120":-7,"_70":121,"_72":122,"_123":-5,"_124":69,"_125":126},"vizContent",{"_42":73,"_74":75,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":67,"_68":69,"_70":71,"_72":71},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/Pavan-CSGO/552e928bfb8649be9eb553a52a8c8876","author","Pavan-CSGO","id","c54bae4d356d40eeb2341ed851ec20cb","title","Fork of Missing Migrants Date Histogram","ownerHandle","gnanendraprasad","ownerDisplayName","gnanendra097@gmail.com","v3-user-pavan-csgo","accountType","user","email","pavanstudy36@gmail.com","displayName","Pavan Nimmagadda","avatar","https://avatars.githubusercontent.com/u/145924239?v=4","oauthProvider","github","oauthId","145924239","isAdmin","stripeCustomerId","handle","handleNormalized","pavan-csgo","lifecycleEmailsEnabled",true,"createdAt",1791491307578,"updatedAt","552e928bfb8649be9eb553a52a8c8876","files",{"_76":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":89},"1a7a347f",{"_90":104,"_92":105},"29fbc049",{"_90":102,"_92":103},"3c34c559",{"_90":100,"_92":101},"8dbc301e",{"_90":98,"_92":99},"973b2115",{"_90":96,"_92":97},"f4259839",{"_90":94,"_92":95},"f90a6c7a",{"_90":91,"_92":93},"name","index.js","text","// App.js\n\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n scaleLinear,\n scaleTime,\n timeFormat,\n extent,\n histogram as bin,\n timeMonths,\n sum,\n max,\n} from 'd3';\nimport { useData } from './useData';\nimport { AxisBottom } from './AxisBottom';\nimport { AxisLeft } from './AxisLeft';\nimport { Marks } from './Marks'; // Import Marks component\n\nconst width = 960;\nconst height = 500;\nconst margin = {\n top: 20,\n right: 50,\n bottom: 65,\n left: 200,\n};\nconst xAxisLabelOffset = 54;\nconst yAxisLabelOffset = 100;\n\nconst App = () => {\n const data = useData();\n const [hoveredValue, setHoveredValue] = useState(null);\n\n if (!data) {\n return

Loading...

;\n }\n\n const xValue = (d) => d['Reported Date'];\n const xAxisLabel = 'Reported Date';\n\n const yValue = (d) =>\n d['Total Dead and Missing'] / 1000000;\n const yAxisLabel = 'Total Dead (in million)';\n\n const innerHeight = height - margin.top - margin.bottom;\n const innerWidth = width - margin.left - margin.right;\n\n const xAxisTickFormat = timeFormat('%m/%Y');\n\n const xScale = scaleTime()\n .domain(extent(data, xValue))\n .range([0, innerWidth])\n .nice();\n\n const [start, stop] = xScale.domain();\n\n const binnedData = bin()\n .value(xValue)\n .domain(xScale.domain())\n .thresholds(timeMonths(start, stop))(data)\n .map((array) => ({\n y: sum(array, yValue),\n x0: array.x0,\n x1: array.x1,\n }));\n\n const maxYValue = max(binnedData, (d) => d.y);\n const yScale = scaleLinear()\n .domain([0, maxYValue])\n .range([innerHeight, 0]);\n\n // Find the peak bin\n const peak = binnedData.reduce((prev, current) =>\n prev.y > current.y ? prev : current,\n );\n\n return (\n \n );\n};\n\nconst rootElement = document.getElementById('root');\nReactDOM.render(, rootElement);\n","AxisLeft.js","export const AxisLeft = ({ yScale, innerWidth, tickOffset = 3 }) =>\n yScale.ticks().map(tickValue => (\n \n \n \n {tickValue}\n \n \n ));\n","Marks.js","import React, { useEffect, useRef } from 'react';\nimport { select, zoom } from 'd3';\n\nexport const Marks = ({\n binnedData,\n xScale,\n yScale,\n tooltipFormat,\n innerHeight,\n onMouseEnter,\n onMouseLeave,\n peak, // Peak value\n}) => {\n const groupRef = useRef();\n\n useEffect(() => {\n const svg = select(groupRef.current.parentNode); // Select the parent SVG element\n const handleZoom = zoom()\n .scaleExtent([1, Infinity])\n .on('zoom', zoomed);\n\n function zoomed(event) {\n const { transform } = event;\n svg\n .selectAll('.mark')\n .attr('transform', transform)\n .attr(\n 'width',\n (d) =>\n (xScale(d.x1) - xScale(d.x0)) / transform.k,\n )\n .attr(\n 'height',\n (d) => (innerHeight - yScale(d.y)) / transform.k,\n )\n .attr('x', (d) => xScale(d.x0))\n .attr('y', (d) => yScale(d.y));\n }\n\n svg.call(handleZoom);\n\n return () => {\n svg.on('.zoom', null); // Remove zoom behavior when component unmounts\n };\n }, [binnedData, innerHeight, xScale, yScale]);\n\n return (\n \n {binnedData.map((d, i) => (\n onMouseEnter(d)}\n onMouseLeave={onMouseLeave}\n >\n \n {tooltipFormat(d.y)}\n \n \n ))}\n \n );\n};\n","index.html","\n\n \n Missing Migrants Date Histogram\n \n \n \n \n \n \n \n

\n \n \n\n","useData.js","import React, { useState, useEffect } from 'react';\nimport { csv } from 'd3';\n\nconst csvUrl =\n 'https://gist.githubusercontent.com/gnanendraprasad/026abeca0246199dd66c9a3c056b8d87/raw/70a6db79467797ed7da53d6824cdee79484b9159/deaths_covid.csv';\nexport const useData = () => {\n const [data, setData] = useState(null);\n if (data) {\n console.log(data[0]);\n }\n useEffect(() => {\n const row = (d) => {\n d['Total Dead and Missing'] = +d['total_deaths'];\n d['Reported Date'] = new Date(d['date']);\n return d;\n };\n csv(csvUrl, row).then(setData);\n }, []);\n\n return data;\n};\n","README.md","A date histogram showing the sum total dead and missing migrants for each month.\n\nData from the [Missing Migrants Dataset](https://gist.github.com/curran/a9656d711a8ad31d812b8f9963ac441c).\n\nDemonstrates use of [d3.bin](https://github.com/d3/d3-array/blob/master/README.md#bins) and [d3.sum](https://github.com/d3/d3-array/blob/master/README.md#sum).\n\n","AxisBottom.js","export const AxisBottom = ({\n xScale,\n innerHeight,\n tickFormat,\n tickOffset = 3,\n}) =>\n xScale.ticks().map((tickValue) => (\n \n \n \n {tickFormat(tickValue)}\n \n \n ));\n","slug","USA Death vs time","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","a64105dc8cdf4ea0bca8d2376804894a","startCommitId","00f0d6a93dd74ae58c94b1d575ab99bc","forkedFrom","forkedFromVisibility",1714006332000,1714076914000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]