Takashi-KK

@Takashi-KK·10 public vizzes

Fork of Fork of Fork of Iterate my work - bar chart of crime in India_VER1.3

This visualization displays crime data across Indian states, showing the number of cases for various offense types on a horizontal bar chart. Users can filter by year and crime category through dropdown menus. The chart sorts states in descending order and includes hover effects that adjust bar opacity. The code uses D3 v7 with `rollups` for data aggregation, `scaleLinear` and `scaleBand` for axes, and `transition` with `easeLinear` for animated updates. Data comes from a CSV file of crimes against women in India.

Jan 8, 2023

Loading thumbnail…

Smiley Face Part I

The example displays a grid of eighteen smiley faces, each with a yellow circular background, black outline, two eyes, and a curved mouth. It shows how React components compose reusable SVG elements, with each face generated by mapping over a d3.range array. The faces use randomized eye radius and mouth dimensions, while the mouth shape is drawn using the d3.arc() API with specified start and end angles. The SVG rendering is handled through React’s JSX, with a FaceContainer managing the centered coordinate system.

Oct 12, 2022

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top ten countries by 2021 population, using horizontal bars to encode values. The visualization is built with React and SVG, leveraging D3 v7 utilities such as `scaleBand` and `scaleLinear` for positioning and scaling. Data is loaded as CSV from a UN population dataset via D3’s `csv` method. Axes are rendered through custom React components (`AxisBottom` and `AxisLeft`), while the bars themselves are drawn as `rect` elements in a `Marks` component.

Sep 25, 2022

Loading thumbnail…

Refactored Bar Chart

This example displays a horizontal bar chart of the top ten countries by population in 2021, using a linear scale for bar lengths and a band scale for row positions. It loads data from a CSV file via D3’s `csv` utility, then renders SVG rectangles and custom axis components built with React. The `AxisBottom` and `AxisLeft` components create tick marks and labels, while the `Marks` component maps each data row to a `rect` element. React’s state management, via `useState` and `useEffect`, handles asynchronous data loading.

Sep 25, 2022

Loading thumbnail…

Axis with React & D3

This example shows a horizontal bar chart ranking the ten most populous countries in 2021, with labeled axes for population counts and country names. It loads UN population data from a CSV file using D3’s `csv` utility, then passes the parsed data to React state. React renders the SVG, while D3’s `scaleBand` and `scaleLinear` position bars and ticks, and `xScale.ticks()` generates gridline labels. The chart is fully SVG-based, with a margin group translating the plot area.

Sep 11, 2022

Loading thumbnail…

The Margin Convention

This example shows a horizontal bar chart ranking the ten most populous countries in 2021, using data loaded from a CSV file. The visualization applies the margin convention to position the chart within an SVG canvas, with a band scale for country categories and a linear scale for population values. React manages the component state and renders the rectangles, while D3’s `csv` utility fetches and parses the data. The chart displays population sizes proportionally, with country names on the y-axis.

Sep 11, 2022

Loading thumbnail…

Pathetic Bar Chart

This example, titled "Pathetic Bar Chart," displays the top ten countries by population from a 2021 UN dataset, loaded via `d3.csv`. It renders a simple horizontal bar chart where each bar's width is proportional to population, using React components to create SVG rectangles. The code employs D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data mapping handled directly in the React render. The visualization is intentionally minimal, showing raw population values without labels or axes, highlighting the contrast between the data’s significance and the stark presentation.

Sep 9, 2022

Loading thumbnail…

Loading Data with React & D3

This example shows a radial burst of MDN CSS color swatches, with each named color rendered as a wedge around a central point. React manages the component state and lifecycle, using the `useEffect` hook to load the CSV data via D3’s `csv` method, while `d3.pie` and `d3.arc` compute the wedge geometry. The SVG paths are filled with the hex values from the dataset, and a loading message appears until the data arrives.

Sep 9, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7, displaying a summary of the dataset in large text. It fetches the CssNamedColors.csv file from a GitHub gist via d3.csv, then reports the formatted size, row count, and column count. The code also includes commented alternatives using fetch with async/await and d3.csvParse, highlighting different parsing approaches. The page renders the result inside a <pre> element with a 7em font size.

Sep 8, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse as it moves across a blank SVG canvas. The visualization tracks the cursor position in real time, rendering the circle at the exact coordinates of the pointer. Built with React and ReactDOM, it uses SVG’s `onMouseMove` event handler to capture the cursor’s client coordinates and update the circle’s `cx` and `cy` attributes. The circle maintains a constant radius of 30 pixels within a 960 by 500 viewport.

Sep 8, 2022