holtzy / react-graph-gallery Goto Github PK

A "categorical rectangular circle packing" visualizes older and more up to date events of different categories affecting a certain amount of entities:

rectangular bars side by side each with a title (position: top or bottom): representing categories.
brightness/shade: older -> darker colored circle, new-> brighter colored circle (timestamp: based on creation date or last updated date)
circle size: corresponding to affected entities by the event
color (optional): a) just one color or b) one color per category or c) one color and a special color (e.g. red) to mark important/urgend events

The points in the data appear to be plotted y,x vs. x,y.

Shouldn't this be the following?

cx={xScale(d.x)}
cy={yScale(d.y)}

Hi there! First of all thank you for blessing us with these beautiful charts and visualizations. I do have a question about the source data though - why is the range for Data Analyst so much higher than Data Scientist? From my experience, I actually think it should be the other way around.

Even from the linked article you provided here, it seems that Data Scientist is considerably higher than Data Analyst.

hello I want to know if I can get the radius only from the ResponsiveCirclePackingCanvas function and then I want use them to generate circleGeometry using react three fiber so can I get this because I searched a lot but don't find the code location
thank you so much

If something causes an SVG to resize in the page without a browser resize occurring -
say, as in my app, you're using Flexbox and waiting for your data to load and fill in the page -
then the useDimensions hook you recommend becomes stuck using the original element dimensions.

Here is an upgraded copy I made which seems to run properly for any kind of element resizing.
I relied upon https://github.com/que-etc/resize-observer-polyfill for cross-browser resize detection.

import React from "react"
import ResizeObserver from 'resize-observer-polyfill';

export const useDimensions = (targetRef) => {
  const getDimensions = () => {
    const box = targetRef.current
      ? targetRef.current.getBoundingClientRect()
      : {}
    return {
      width: box.width || 0,
      height: box.height || 0
    };
  };

  const [dimensions, setDimensions] = React.useState(getDimensions);
  const handleResize = () => setDimensions(getDimensions());
  const ro = new ResizeObserver((entries, observer) => handleResize());

  React.useEffect(() => {
    if(targetRef.current) return ro.observe(targetRef.current);
  }, [targetRef])

  return dimensions;
}

This hook is mainly copied from https://www.react-graph-gallery.com/histogram#responsiveness .
I'm releasing this upgraded sample as public domain.

if i go to https://www.react-graph-gallery.com/ directly, everything is ok, but
if i get refered by an email newsletter like https://www.react-graph-gallery.com/?utm_source=midudev&utm_medium=email&utm_campaign=noticias-dev-chatgpt-lo-vuelve-a-hacer-reddit
looks like this

https://www.nytimes.com/interactive/2023/07/16/world/world-demographics.html?smid=nytcore-ios-share&referringSource=articleShare

see network tab for JSON

How to zoom at a particular point in heatmap?

Some pages don't have any image in it. Resulting in poor google preview and no google image result

https://bost.ocks.org/mike/constancy/

In the section "Line chart application" of timeseries, it looks like the ChartOrSandbox isn't rendering the same thing between the chart and when actually opening up the sandbox:

Without sandbox open (time series):

With sandbox open (group demo):

Apologies in advanced if this was expected!

https://twitter.com/RottenInDenmark/status/1666811192940331009

• Most of lib do not offer all chart types. Example, the Tan Stack is proud of it.
  https://react-charts.tanstack.com

• You will always find a limitation to the customisation you can make

• You need to learn a new syntax

I'm curious what open source license is this released under, if any?

I checked for a LICENSE file and in package.json but did not find any license.

It would be awesome to clarify the license. MIT or ISC would be a great fit I think.

Thank you for this amazing work!

The code snippet you are here, is not the expected one since its code is not related to the code for the Y axis.

I believe this is the correct code snippet:

import { useMemo } from "react";
import { ScaleLinear } from "d3";

type AxisLeftProps = {
  yScale: ScaleLinear<number, number>;
  pixelsPerTick: number;
  width: number;
};

const TICK_LENGTH = 10;

export const AxisLeft = ({ yScale, pixelsPerTick, width }: AxisLeftProps) => {
  const range = yScale.range();

  const ticks = useMemo(() => {
    const height = range[0] - range[1];
    const numberOfTicksTarget = Math.floor(height / pixelsPerTick);

    return yScale.ticks(numberOfTicksTarget).map((value) => ({
      value,
      yOffset: yScale(value),
    }));
  }, [yScale]);

  return (
    <>
      {/* Ticks and labels */}
      {ticks.map(({ value, yOffset }) => (
        <g
          key={value}
          transform={`translate(0, ${yOffset})`}
          shapeRendering={"crispEdges"}
        >
          <line
            x1={-TICK_LENGTH}
            x2={width + TICK_LENGTH}
            stroke="#D2D7D3"
            strokeWidth={0.5}
          />
          <text
            key={value}
            style={{
              fontSize: "10px",
              textAnchor: "middle",
              transform: "translateX(-20px)",
              fill: "#D2D7D3",
            }}
          >
            {value}
          </text>
        </g>
      ))}
    </>
  );
};

This is just my small contribution so far to this amazing gallery 😉

I've read a bunch of your old content and learned a lot from it. Thanks for your time and effort on this project 👍

Hope to contribute more to it soon!