Walkramis

@Walkramis·6 public vizzes

Fork of Global Coronavirus Deaths

This line chart visualizes global cumulative coronavirus deaths over time, with a horizontal marker highlighting the 10,000-death threshold and a vertical marker indicating the most recent date. The chart loads data from the Johns Hopkins COVID-19 dataset using d3.csv, transforms it with timeParse and reduce, and renders via d3.scaleTime, scaleLinear, and line generators in an SVG. A React component structure manages the state, while d3.axisBottom and custom marker components add reference lines.

Mar 26, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors. It displays a text summary with the data size, row count, and column count. The implementation uses d3.v5 with the `d3.csv` function to fetch and parse the remote CSV data, then formats the output with `d3.csvFormat`. The page also includes a React-style form, though the visible rendering relies on updating a `pre` element with the computed statistics.

Mar 26, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that combines inline CSS and JavaScript. The page centers a large block of text using the `body` style rule, while the script defines event-handling functions for form inputs, including `handleChange` and `valueCallback`, and logs a message to the console. The code references `this.setState`, suggesting React integration despite the plain HTML structure, and uses the DOM `input` element with `onChange` to manage state updates.

Mar 26, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web browser, displaying the dataset's size in kilobytes, row count, and column count as large text. The code uses the D3.js library (version 5) with its `d3.csv` method to fetch and parse a CSV file containing CSS named colors from a GitHub gist. It also includes commented-out alternative approaches using the Fetch API with async/await and `d3.csvParse`. The visualization is built within a React framework and relies on D3's promise-based data loading to handle the asynchronous data retrieval.

Mar 26, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot allows users to explore the classic Iris Dataset by selecting which measurements to display on the x and y axes. It uses two dropdown menus to toggle between sepal length, sepal width, petal length, petal width, and species, with the axis labels updating accordingly. Built with React and d3 v5, the visualization uses `scaleLinear` to map data values to coordinates and `Marks` to draw the circles, with axes rendered by helper components. The styled SVG output is driven by user selections, enabling on-the-fly comparisons of the dataset's features.

Mar 25, 2021

Loading thumbnail…

Fork of Global Coronavirus Deaths

A line chart tracks global cumulative coronavirus deaths over time, using data from the Johns Hopkins Coronavirus Dataset. A horizontal marker highlights the 10,000-death threshold, while a vertical marker labels the most recent date. The visualization is built with React, rendering an SVG via D3 v5’s scales, line generator, and axes.

Mar 24, 2021