KonJoDot

@KonJoDot·31 public vizzes

Fork of Coronavirus Deaths Cross 10,000

A line chart tracks the cumulative global death toll from COVID-19 over time, using a black stroke on an SVG rendered through React and D3 v5. The chart displays a dashed horizontal marker at one million deaths and a vertical marker at the most recent date, labeled “now.” Data comes from the Johns Hopkins Coronavirus dataset, loaded via `d3.csv` and aggregated by summing daily totals across countries. Axes are generated with `d3.axisBottom`, while scales and the line path are built using `scaleTime`, `scaleLinear`, and `d3.line`.

Nov 7, 2022

Loading thumbnail…

Fork of Coronavirus Basic Line Chart With 10,000 Marker Line

A line chart tracks the daily cumulative global COVID-19 death toll over time, with a horizontal marker line highlighting the 10,000-death threshold. The visualization uses React to render an SVG, employing D3 v5 scales and the `d3.line` path generator for the trend line, and a simple SVG `<line>` element for the marker. Data is loaded as CSV from the Johns Hopkins CSSE repository, transformed with `d3.csv` and `d3.timeParse`, and the chart fills the browser viewport.

Nov 7, 2022

Loading thumbnail…

Fork of Coronavirus Basic Line Chart With 10,000 Marker Line

A line chart tracks cumulative global COVID-19 deaths over time, with a horizontal marker line at 10,000 deaths. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `line` generators to map dates and death totals, rendering an SVG path with a thick black stroke. The marker line is drawn as a separate SVG `<line>` element, while the React component structure (via `useData`) loads the Johns Hopkins CSSE time-series CSV, aggregating daily death sums. The X-axis is delegated to a separate component using `d3.select`.

Nov 5, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

This example renders a grid of eighteen smiley faces, each with randomized facial features such as eye offset, eye radius, mouth width, and stroke thickness. Built with React components and ES6 modules, it uses d3’s `range` and `arc` APIs to generate the mouth paths and control the layout. The faces are drawn as SVGs via a `FaceContainer`, with reusable components for the background circle, eyes, and mouth.

Nov 4, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors data from a CSV file hosted on GitHub. It displays basic statistics about the dataset, including the file size in kilobytes, the number of rows, and the number of columns. The visualization uses D3.js version 5's `d3.csv` method to fetch and parse the remote CSV asynchronously, then updates the page’s text content via the DOM. The code relies on React for the overall framework setup, with the styling and layout defined in the HTML file.

Nov 3, 2022

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width. Points are colored by species with a color legend on the right. Using React with a declarative SVG rendering approach, the visualization reads data from a CSV via d3.csv() and displays it using d3.scaleLinear for axes and d3.scaleOrdinal for colors. When hovering over the legend items, the code filters the data to highlight the corresponding species.

Oct 27, 2022

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset with two dropdown menus for selecting which flower measurements to compare on the x and y axes, showing sepal and petal length and width. The visualization uses D3 v5 scales and axes to map the selected attributes, while React manages the interactive state and renders the plot as SVG circles. Data is loaded via `d3.csv` from a gist, and the React Dropdown component handles the menu selections.

Oct 26, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset rendered with SVG in React, displaying sepal and petal measurements as points. The visualization uses d3.scaleLinear for both axes and d3.extent to compute domains, with React state managing selection of the x and y attributes. Two react-dropdown menus let users swap any of the four numeric flower measurements on each axis. The data loads asynchronously via d3.csv, and the axes are drawn with custom React components that generate SVG ticks, lines, and text labels.

Oct 26, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements (sepal length/width, petal length/width) by selecting which attribute corresponds to each axis via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` to compute domains from the CSV data loaded through `csv`, and renders SVG circles with native `<title>` tooltips. The chart includes styled axis labels using the Poppins font and provides dynamic axis tick formatting with `format`.

Oct 26, 2022

Loading thumbnail…

React Starter Code

A React starter example demonstrates a basic interactive user interface: a dropdown menu for selecting a pet. The React application uses the `useState` hook to track the current selection, logging each change to the console. The custom `Dropdown` component, built with React's event handling, accepts options and an `onSelectedValueChange` callback. The page is rendered with `ReactDOM.render`, and the interface is styled with CSS, featuring a large label and select font.

Oct 26, 2022

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face composed of a yellow circle with a black outline, two black eyes, and a black mouth arc, all rendered as SVG. The components are split into separate React files using ES6 modules, with React Fragments used to group the eyes. The mouth is drawn using the d3.arc API to create a path, while the layout is controlled by SVG transforms within a React app.

Oct 26, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over time, using a smooth natural curve to connect data points drawn from the Data Canvas Sense Your City Dataset. Built with React and D3 v5, it renders SVG elements including axes, grid lines, and a path generated by `d3.line` with `curveNatural`. The code uses `scaleTime` and `scaleLinear` for scales, `extent` for domains, and `timeFormat` for tick labels. The map data is fetched as JSON with `d3.json` from the World Atlas TopoJSON.

Oct 25, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the Stylized Scatter Plot visualizes weekly temperature measurements over time, using a smooth line to connect each data point. The chart is rendered as an SVG within a React component, employing D3's `scaleTime` and `scaleLinear` for axes and `line` with `curveNatural` to create the path. The underlying data is loaded via D3's `csv` function from a remote SF temperature dataset. Styling uses the Poppins font and CSS rules for tick marks, circles, and a labeled time series.

Oct 24, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the Iris dataset as a scatter plot of sepal length against sepal width, with each flower represented by a circle. Built with React and D3 v5, it uses `d3.scaleLinear` for axes and `d3.extent` to set domains, while `d3.csv` loads data from a GitHub-hosted CSV. The SVG rendering includes custom axis components and circle marks with tooltips showing the sepal length value.

Oct 24, 2022

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries, using React to render SVG elements and D3 v5’s `scaleBand`, `scaleLinear`, and `max` to map country names and population values. Axis components built with D3 scales draw ticks and labels, with custom CSS styling for green tick lines and orange text. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and filtered to the first 10 rows. The chart intentionally omits axis titles and value labels, presenting only the bars and tick marks.

Oct 24, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries using a bar chart that intentionally omits axes, result in a "pathetic" visualization. React component renders SVG rectangles, with bar lengths proportional to each country's 2020 population. Data comes from the United Nations World Population Prospects 2019, loaded via D3’s `csv`. The chart uses D3 scales: `scaleBand` for the categorical country labels and `scaleLinear` for the population values. D3’s `ticks()` generates vertical gridlines, though no axis labels or tick text appear.

Oct 23, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example displays a bar chart of the top 10 most populous countries using React and D3 v5. It shows horizontal bars representing population data from the United Nations World Population Prospects 2019, with manually drawn axes and tick labels. The code uses React hooks like `useState` and `useEffect` to fetch CSV data, and D3's `csv`, `scaleBand`, `scaleLinear`, and `max` to scale and render the visualization as SVG elements.

Oct 23, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

A pathetic bar chart displays the ten most populous countries from the United Nations World Population Prospects 2019 dataset, rendered as horizontal rectangles without any axes or labels. Using d3.csv to load the data, d3.scaleBand and d3.scaleLinear map country names and populations to SVG rectangle positions and widths within a React component. The visualization intentionally omits visual encoding cues like ticks or gridlines, leaving only the raw bars to compare population magnitudes.

Oct 22, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as horizontal bars, with bar length encoding population size and no axes or labels. It uses React hooks to fetch and manage data from the United Nations World Population Prospects 2019 CSV, then renders SVG rectangles with d3.scaleBand for vertical positioning and d3.scaleLinear for bar widths. The visualization updates asynchronously after loading, showing a loading state until the data arrives.

Oct 22, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates loading CSS named color data from a CSV file using D3’s `csv` utility, with React state managing the asynchronous data fetch. Once the data arrives, the application renders a collection of SVG paths, each representing a color through a mouth-like arc shape. The code uses React hooks like `useState` and `useEffect` to trigger and store the data, while the SVG rendering relies on `d3.csv` for parsing and React’s declarative component structure. A loading message appears until the data is ready.

Oct 21, 2022

Loading thumbnail…

Fork of Fork of Loading Data with React & D3

This example displays a loading screen followed by a vertical stack of colored horizontal bars, one for each CSS named color. The page initially shows a large “Loading...” message, then renders the dataset by mapping each color’s RGB hex value to a thin div’s background. The code uses React’s `useState` and `useEffect` to asynchronously fetch the CSS named colors CSV via D3’s `csv` utility, then maps the resulting array to styled divs with a fixed width of 960 pixels and height of 4 pixels each.

Oct 21, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays CSS named colors as horizontal swatches stacked vertically, each rendered as a colored div. It fetches the CSS named colors dataset from a GitHub gist using D3’s `csv` utility, then stores the parsed result in React state via the `useState` and `useEffect` hooks. While the data loads, the interface shows a large “Loading…” message; once loaded, it maps each row to a div whose background color matches the row’s RGB hex value, creating a full-width color spectrum strip.

Oct 21, 2022

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse across the screen, smoothly updating its position in real time. The React component uses the `useState` and `useCallback` hooks to track the mouse’s coordinates, and ReactDOM renders the result into the DOM. The example builds on a previous version and is implemented with React 16.9, relying on CDN-hosted production builds of React and ReactDOM, with no additional visualization library. The circle’s movement is driven entirely by mouse events, and the sparse `index.js` file indicates a placeholder that is completed elsewhere in the bundled source.

Oct 20, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse pointer across an SVG canvas in this React-based visualization. The app tracks mouse movements through the SVG's `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes via React's `useState` hook. The example demonstrates real-time, state-driven rendering using React 16.9 and ReactDOM, with the circle positioned at the cursor's client coordinates on a 960x500 viewport.

Oct 19, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial steps of loading and parsing a CSV file using JavaScript within an HTML page. It fetches the data with the standard `fetch` API and converts the response to plain text, logging the raw CSV content to the browser console. The page does not yet parse the text into a table or visualization, instead highlighting the foundational workflow of acquiring external data. The code relies on the Promise-based `fetchText` helper function and the console for output, using no additional libraries.

Oct 19, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the Fetch API, with the page structure built on a minimal HTML document. The visualization fetches a CSV file from a remote source and processes it for display, though the incomplete script suggests a focus on the foundational steps of data acquisition rather than a completed rendering. The code relies on native browser APIs for data retrieval and parsing, avoiding external libraries. The example appears intended as a starting point for users learning to integrate tabular data into web-based visualizations, referencing the standard CSV format for structured information.

Oct 18, 2022

Loading thumbnail…

Fork of Smiley Face Part V

Built with React and D3 v5, this example renders a yellow smiley face as modular SVG components in separate ES6 modules. The code defines `BackgroundCircle`, `Eyes`, and `Mouth` components, with the latter using the `arc` generator from D3 to create a curved path. A `FaceContainer` wraps the SVG and positions all elements via a translated group. The face’s geometry—eye offsets, radii, and mouth width—is passed as props, and the final composition is mounted with `ReactDOM.render`.

Oct 18, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face with black-outlined eyes and a curved mouth, rendered as an SVG graphic. The face is assembled using React components that generate SVG circles and a path, with the mouth drawn using D3’s `arc` generator. Positioned at the center of a 960x500 viewport, the face uses fixed constants for eye offsets, radius, and stroke width. The code leverages ReactDOM for rendering and D3 v5’s `arc` API, integrating both libraries within a single component structure.

Oct 18, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiley face entirely through React components and D3 shape APIs. It draws a yellow background circle, two static eyes, and a mouth arc using `d3.arc` with specified inner and outer radii and angle constraints, all transformed to the center of a fixed SVG canvas. The visualization demonstrates how D3’s geometry helpers can be integrated into a React render tree, with the face constructed from declarative SVG elements rather than data-driven bindings.

Oct 17, 2022

Loading thumbnail…

Fork of Smiley Face Part III

Oct 17, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with two smaller black circles forms an incomplete smiley face, missing its mouth. The face is rendered as SVG elements using React components, with all coordinates calculated relative to a 960×500 viewport. The code uses React 16.9 and ReactDOM to manage the SVG circle elements, explicitly setting fill, stroke, stroke-width, and radius properties based on derived constants. The example demonstrates a step-by-step approach to building a face, with the current state showing only the head and eyes before adding the smile.

Oct 16, 2022