S

Simmer999

@Simmer999·16 public vizzes

Loading thumbnail…

Scatter Plot

This bar chart displays the population of the top 10 most populous countries, with countries listed on the y-axis and their population values extending horizontally. The data, sourced from a CSV file, is rendered as SVG rectangles using D3 v5. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization, with tick labels formatted using `d3.format` and axis grid lines styled via CSS.

Loading thumbnail…

practice_oct_4

This example presents a nearly empty HTML page that renders the text "practice_oct_4" centered on the screen. The page uses basic CSS styling with `text-align: center` and a very large `font-size` of 13em. The embedded JavaScript script is empty, so no dynamic behavior or data visualization occurs. Built with React, it relies solely on standard HTML and CSS without any additional libraries or APIs.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text "Hello HTML" at a very large font size, styled via embedded CSS with centered alignment. The page also includes a small JavaScript snippet that logs "Hello JavaScript!" to the browser console, illustrating basic scripting. Additionally, a separate `test.js` file uses the D3.js library to load and log JSON data from `output.json`, though this script is not referenced in the HTML and remains unexecuted in the current setup.

Loading thumbnail…

WIP D3 Git History.viz

This animated visualization displays the history of commits to the D3.js repository, showing the number of commits per month stacked by repository. The data is loaded from a JSON file containing commit dates and repository names, then aggregated using d3.group and transformed with d3.stack to create stacked layers for each repo. The visualization is built with D3 v6 and React, using d3.timeParse to parse dates.

Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render an interactive area chart of weekly temperature data for San Francisco. The visualization shows temperature readings over time, with tooltips displaying the temperature value on hover. The code imports data from a CSV file using d3.csv and then passes it to a Vega-Lite specification that defines the x-axis as timestamps and the y-axis as quantitative temperature values. The chart is configured with custom axis styling and uses vega, vega-lite, and vega-tooltip libraries to handle rendering and interactive tooltips.

Loading thumbnail…

Vega-Lite API Template

This example shows a bare-bones HTML page that renders static text and logs a message to the browser console. It demonstrates the minimal setup for a Vega-Lite API project, where the `vis.js` file defines a scatter plot using `vl.markPoint()` with `vl.x().fieldQ('acceleration')`, `vl.x().fieldQ('horsepower')`, and `vl.tooltip().fieldN('name')`. However, the visualization is not actually rendered in the page, which only contains inline CSS and a JavaScript `console.log` call.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset using React hooks and D3. The React component displays the data’s file size in kilobytes, row count, and column count after fetching it from a GitHub gist via `d3.csv`. While the data loads, the screen shows “Loading…” until the asynchronous operation completes. The code uses `useState` and `useEffect` to manage state and trigger the CSV request, then formats the result with `d3.csvFormat`. The output is rendered as an SVG-less `<pre>` element.

Loading thumbnail…

Loading and Parsing CSV Data 2

This visualization demonstrates the basic workflow of loading and parsing CSV data with D3. It fetches a remote CSV file containing CSS named colors, parses it using `d3.csvParse`, and then displays summary statistics about the dataset. The large-font output shows the approximate file size in kilobytes, the total number of rows, and the number of columns, providing immediate feedback on the parsed data structure. The example uses the `fetch` API to retrieve the text file and D3 v6's parsing capabilities to convert it into a tabular data object.

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor's movement within an interactive SVG canvas. The visualization uses React's `useState` and `useCallback` hooks to track the mouse position, updating the circle's `cx` and `cy` attributes on every movement event. The code integrates React and D3.js version 5, rendering the circle as an SVG element within a React component. The coordinate system is initialized to the center of a 960 by 500 pixel canvas, and the circle is drawn with a fixed radius of 30 pixels.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with countries on the y-axis and population values on the x-axis. Data is loaded from a CSV file and rendered as SVG circles using D3 v5. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the categorical y-axis, with axes generated via `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using a linear x-scale for population values and a point y-scale for country names. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG with gridlines and labeled axes. Data is loaded from a CSV file, with population values multiplied by 1000. Circles are appended to represent each country, with a title annotation and formatted tick labels that abbreviate large numbers.

Loading thumbnail…

Customizing axes

This example displays a horizontal bar chart of the top ten most populous countries. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map population and country names. The chart features a customized x-axis that formats large numbers using `format('.3s')` and replaces 'G' with 'B'. Both axes remove their default domain lines, while `axisBottom` adds population labels and grid ticks from the CSV data.

Loading thumbnail…

Let's Mak a Map with D3js

This example shows a natural Earth projection map of the world’s countries, rendered as SVG paths against a blue sphere background. It loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using topojson.feature, and draws each country with d3.geoPath and d3.geoNaturalEarth1. The visualization uses d3.json to fetch the data and d3.select to append the simple, static map paths.

Loading thumbnail…

Bar Chart

This bar chart displays population counts for ten countries, with a horizontal layout that emphasizes the comparative scale between nations. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis, `scaleBand` for categorical country labels, and `axisLeft` and `axisBottom` to generate the chart’s axes. Data is loaded asynchronously via `d3.csv` from a local CSV file, then parsed into numeric values for population. The bars themselves are drawn as styled `rect` elements filled with steelblue, and the chart applies fixed margins to position the plotting area within the 960x500 viewport.

Loading thumbnail…

k of HTML Starter

This example demonstrates rendering “Hello HTML” as large, centered text on a blank page, with a JavaScript console message. It shows the minimal structure of an HTML page using inline CSS for styling and a script tag for JavaScript execution. The code uses the DOM and the browser’s console API, with no external libraries or data sources.

Loading thumbnail…

Population

A yellow circle with a smiling face animates its eyebrows upward and back down. The face, built with SVG shapes in D3 v5, includes eyes as circles, rectangular eyebrows, and an arc-based mouth. A React project structure frames the code, which uses D3 transitions to move the eyebrow group, while the static face elements are positioned with SVG attributes.