Skip to main content
SimilarExport ZIP
100%

DVS SOTI Challenge Data 2023

✓ Published1🌍 Public
CCurran Kelleher
Last edited Mar 11, 2024
Created on Mar 7, 2024

This example presents a data preview of the 2023 Data Visualization Society State of the Industry Challenge. It imports five CSV files covering job titles, characteristics, employment, dataviz practices, and challenges, then displays a table count summary. The code uses React with WebGL rendering, and the main function renders a JSON preview of dataset dimensions. The data is sourced from the DVS SOTI Challenge and has been cleaned for import.

AI-generated description

Data from Data Visualization Society: State of the Industry Challenge 2023.

Data was exported directly from the site, and cleaned up manually to remove invalid CSV rows that appeared at the end of the files.

It has been packaged here in VizHub so you can use the following code to import the data into your viz and start coding right away:

import { data } from '@curran/dvs-soti-challenge-data-2023';

Good luck!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of DVS SOTI Challenge Data

This example displays the raw contents of the first data table from a CSV import, presenting a JSON string of the first row in a large monospace font. The code imports the `test.csv` file using a static ES module import, while other dataset files are commented out for potential inclusion. The React-based visualization renders the parsed data preview into a container using a template literal, showing the table structure with its rows and columns.

CCurran Kelleher
80% match
Loading thumbnail…

DV ICE-5

This example demonstrates loading a CSV dataset via D3.js and displaying its size in kilobytes, row count, and column count on a styled HTML page. The page also renders a collection of SVG vector graphics, including paths, circles, ellipses, and complex curves, all drawn with SVG elements. The visualization uses the `d3.csv` API to fetch and parse the data, and the SVG shapes are embedded directly in the markup. The design uses distinct background colors for headings and a large text block for output.

Ssowmyanagula@my.unt.edu
72% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset into a React application using D3 utilities. It fetches the CSS named colors dataset from a GitHub gist and displays a summary of the data, including its size in kilobytes, row count, and column count. The React state management tracks the loaded data, initially showing a "Loading..." message until the asynchronous fetch completes. The visualization uses React 16.9, D3 7.0.1, and renders the summary text as HTML.

Mmattbwebster
71% match
Loading thumbnail…

ICE-5: Data visualization

This example demonstrates a web page that displays the file size, row count, and column count of a CSV dataset, alongside a static SVG graphic titled "star.svg." The page uses D3.js version 7.3 to fetch the remote CSV file via `d3.csv`, then formats and injects the summary statistics into a styled `<pre>` element. The rendering is plain HTML and CSS, with a React framework noted in metadata but not used in the visible markup. The SVG contains simple geometric shapes with gray and blue fills.

Ssowmyanagula@my.unt.edu
71% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3, displaying the file size, row count, and column count as text. The visualization relies on React's `useState` hook to manage data asynchronously, fetching the remote dataset via `d3.csv` and formatting the summary with `d3.csvFormat`. Initially, the page shows “loading” until the data arrives. The output is rendered as SVG-less HTML text via ReactDOM, with styling set globally in the document structure. The data source is a Gist-hosted CSV of named colors.

TTOKIHISA
71% match
Loading thumbnail…

Loading Data with React & D3

This example shows how React state and D3 utilities can work together to load and display CSV data. The page fetches a CSS Named Colors dataset from a GitHub gist and uses the d3 `csv` function to parse it, storing the result in React state via a `useEffect` hook. The visualization output is a simple SVG-based text summary rendered inside a `<pre>` element, displaying the total file size in kilobytes, the number of rows, and the number of columns. The code relies on React 16.9.0, ReactDOM, and D3 v6.5.0, with all rendering handled through SVG.

Ssinghjy
71% match
Loading thumbnail…

Import data with D3

This visualization demonstrates how to import and summarize a CSV dataset using D3. It loads the CSS named colors dataset from a GitHub gist via `d3.csv`, then displays the file size in kilobytes, row count, and column count in a large text format. The page uses D3 v6 and plain HTML, with the results rendered into a `<pre>` element. The example highlights the promise-based data loading pattern and formatting utilities like `d3.csvFormat`.

Kkragovic
71% match
Loading thumbnail…

11525657_ICE5

This example demonstrates basic data loading and parsing with D3. It fetches a CSV file from a GitHub gist using `d3.csv`, then displays the file size, row count, and column count in a large, styled text element. A static ornamental SVG image is also embedded on the page. The visualization uses D3 v7 within a plain HTML page, with styling applied via CSS to highlight the parsed data summary.

BBVNPK001
71% match