nkarinti

@nkarinti·19 public vizzes

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width for individual iris flowers. The data is loaded from a CSV file using d3.csv and rendered as SVG circles with React components. Axes are generated via custom AxisBottom and AxisLeft components using d3.scaleLinear for positioning, with d3.format applied to tick labels for compact number display. The visualization uses React state via useEffect to manage asynchronous data loading, and includes native SVG title elements for tooltips.

Jul 24, 2023

Loading thumbnail…

Fork of Fork of Linechart

This interactive line chart displays temperature over time for San Francisco, using a time-based x-axis and linear y-axis. The data is loaded from a CSV file using D3’s `csv` utility and parsed into timestamps and numeric temperatures. The chart is rendered in SVG with React components, using D3’s `scaleTime`, `scaleLinear`, and `line` generator to draw the path. Circles with native SVG `<title>` tooltips mark each data point, while axes are built from custom React components that map D3 ticks to SVG groups.

Jul 24, 2023

Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes temperature readings over time using React and D3 v7. The visualization employs scaleTime and scaleLinear to map timestamps and temperature values to SVG coordinates, while custom AxisBottom and AxisLeft components render the time-formatted x-axis and numeric y-axis. The data is loaded asynchronously from a CSV file containing weekly San Francisco temperature measurements using D3's csv utility. Each data point is rendered as a circle mark with a tooltip displaying the day of the week.

Jul 5, 2023

Loading thumbnail…

Styled Bar Chart

This styled bar chart displays the population of the top ten countries from a United Nations 2019 dataset, loaded via the `csv` function in D3. The horizontal bars are positioned and scaled using D3's `scaleBand` and `scaleLinear`. Orange rectangles represent population values, with axis labels and tick marks generated from the scales. The React application, using `useState` and `useEffect`, manages the asynchronous data fetching and renders the SVG chart, with custom components for axes and marks.

Jul 3, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Rendering Data With REACT

A horizontal bar chart displays the top ten countries by population for 2020, loaded from a CSV file via D3's `csv` utility. React components for axes and marks use D3's `scaleBand` and `scaleLinear` to map data to SVG rectangles and text. The `useData` hook fetches and slices the data, while `AxisBottom`, `AxisLeft`, and `Marks` render the SVG output using React's functional component pattern.

Jul 3, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Rendering Data With REACT

This example displays a horizontal bar chart comparing the 2020 populations of the top ten countries from a UN population dataset loaded via `d3.csv`. The visualization uses React state to store the parsed data, and renders SVG elements dynamically. D3’s `scaleBand` and `scaleLinear` position bars and axis ticks, while React’s `useEffect`, `useState`, and `useCallback` manage data fetching and component updates. Axes and gridlines are generated using `xScale.ticks()`, with text labels for both countries and population values.

Jul 3, 2023

Loading thumbnail…

Fork of Fork of Fork of Rendering Data With REACT

This example displays a horizontal bar chart of the top ten countries by population, according to the UN Population 2019 dataset. It shows both how D3 can load and scale data and how React manages the rendering state asynchronously. The code loads data with `d3.csv`, maps values using a scaleBand for the categorical country axis and a scaleLinear for the numeric population axis, and renders `d3.rect` SVG elements. React’s `useState` and `useEffect` hooks control the data loading and display a loading message before the chart appears.

Jun 30, 2023

Loading thumbnail…

Fork of Fork of Rendering Data With REACT

This visualization displays the top 10 countries by 2020 population as horizontal bars in an SVG. The code loads the data using D3’s `csv` utility, stores it in React state via `useState` and `useEffect`, and maps each country to a `rect` positioned with `scaleBand` and scaled by `scaleLinear`. The chart updates on load, showing population values from the UN_Population_2019 dataset. React renders the SVG elements, while D3 v7 handles the data processing and scales.

Jun 30, 2023

Loading thumbnail…

Fork of Rendering Data With REACT

This example visualizes a dataset of CSS named colors as a pie chart, where each slice corresponds to a color and is filled with its hex value. The visualization is built using React and D3, with D3’s `csv` utility loading the data from a remote URL. React state manages the asynchronous data loading, while D3’s `pie` and `arc` functions compute the slice geometry. Each slice is rendered as an SVG `path` element inside a `<g>` transformed to the chart’s center.

Jun 30, 2023

Loading thumbnail…

Rendering Data With REACT

This example visualizes the CSS named color dataset as a series of horizontal color swatches, each representing a single row from the CSV file. The visualization loads data asynchronously using D3’s `csv` function and manages the loading state with React’s `useState` and `useEffect` hooks. Once the data arrives, React renders a stacked list of dark-colored divs, with each row’s background color set to its corresponding RGB hex value from the dataset. The code combines React 16.9 with D3 v7, using React’s component model to generate the SVG-compatible DOM output.

Jun 30, 2023

Loading thumbnail…

Fork of Fork of Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a line chart of San Francisco weekly temperature data from a CSV file loaded via d3.csv. The visualization encodes timestamps on the x-axis and temperature on the y-axis, with a customized dark theme and larger axis labels for readability. The chart automatically resizes to fit the browser window and includes interactive tooltips via vega-tooltip. The code registers Vega-Lite with the API wrapper and uses the markLine specification to draw the single series.

Jun 30, 2023

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

A line chart displays temperature readings over time, with a tooltip that reveals the exact temperature on hover. The visualization is built using the Vega-Lite API, which translates a concise specification into a rendered Vega graphic. Data is loaded from a CSV file of San Francisco weekly temperatures via the `d3.csv` method. The chart's appearance, including axis styling and label fonts, is customized through a configuration object, and the visualization resizes to fit the browser window.

Jun 30, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a line chart of temperature readings over time, using the Auto MPG dataset. The chart is built using the Vega-Lite API, which is registered with Vega, Vega-Lite, and D3. Data is loaded via D3’s CSV parser from a remote gist. The visualization renders as an SVG, configured with a custom dark theme and tooltips, and displays temperature trends with a non-zero y-axis scale.

Jun 30, 2023

Loading thumbnail…

Fork of Loading Data with React & D3

This example uses React state to manage data loading from a CSV file, displaying a simple text summary of the dataset. The `useEffect` hook triggers a `d3.csv` request to fetch the `cssNamedColors` dataset, and the resulting data object is stored in state. Once loaded, the text reports the file size in kilobytes, the number of columns, and the number of rows. The app initializes with a “Loading…” message and updates upon data arrival, all rendered as an SVG element.

Jun 29, 2023

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset into a React application using D3 utilities, then displaying summary statistics about the data in plain text. The app fetches a CSS named colors dataset from a GitHub gist via D3’s `csv` method, storing the parsed result in React state with the `useState` and `useEffect` hooks. Once loaded, the `message` function formats the file size, column count, and row count using `d3.csvFormat` and `Math.round`. While loading, the interface shows a "Loading..." placeholder. The rendering is minimal, using only a `<pre>` element without any SVG.

Jun 29, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing CSV data with D3.js. It displays statistics about the dataset—file size in kilobytes, column count, and row count—in a large pre-formatted text block. The program fetches a CSV file containing named CSS colors from a GitHub gist using `d3.csv()`, then formats the parsed data back into a string with `d3.csvFormat()` to measure its size. The code also includes an alternative commented-out approach using `fetch()` and `d3.csvParse()` for comparison.

Jun 28, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using D3 v7. It fetches a dataset of CSS named colors and displays summary statistics, including the file size in kilobytes, the number of columns, and the number of rows, in a large text element. The code uses `d3.csv` to asynchronously load and parse the data, then `d3.csvFormat` to measure its length and `data.columns` to report the column count. A commented alternative shows using the Fetch API with `async`/`await` and `d3.csvParse`.

Jun 28, 2023

Loading thumbnail…

Smileyface Finished

A grid of 18 randomly generated smiley faces renders as SVG through React components. Each face uses nested circle elements for the background and eyes, plus a D3 arc path generator for the mouth, with randomized stroke widths, eye positions, eye radii, and mouth dimensions. The code leverages React 18 and D3 v7, composing reusable components like Face, Eyes, and Mouth within a FaceContainer that translates the SVG coordinate system.

Jun 27, 2023

Loading thumbnail…

Smileyface part 1

A grid of 18 smiley faces, each randomly varied in eye position, eye radius, mouth size, and stroke width, is rendered using React and SVG. The faces are composed from reusable components—BackgroundCircle, Eyes, Mouth, and FaceContainer—with each face’s properties randomized via JavaScript’s `Math.random()`. The Mouth uses `d3.arc` to generate a curved path, while the other components are plain SVG shapes. The example demonstrates a modular React-based approach to assembling scalable, data-driven visual elements within a fixed 160×160 tile layout.

Jun 27, 2023