J

JamesHop31

@JamesHop31·36 public vizzes

Loading thumbnail…

Axes about population

This horizontal bar chart displays the populations of the top ten most populous countries, with each bar colored according to its flag. The data comes from 2018 United Nations estimates, with population values multiplied by 1000 for display. Built with D3 v7, the visualization uses `scaleLinear` and `scaleBand` to map population and country names, while `axisLeft` and `axisBottom` generate the axes. Bar colors are read directly from the CSV file, and tick labels are formatted using D3's `format(".3s")` to abbreviate large numbers.

Loading thumbnail…

Fork of Customizing Axes

This horizontal bar chart displays the populations of the top 10 most populous countries, with the 2018 UN estimates scaled by 1,000 and each bar colored according to a per-country field. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with population values formatted using d3.format and the tick labels converted from billions to a readable format. The chart is rendered as SVG, with axes created via d3.axisLeft and d3.axisBottom, and includes a custom axis-label and title.

Loading thumbnail…

Axes

A horizontal bar chart displays the population of the top 10 most populous countries, with each bar colored by country. The chart uses d3.scaleLinear and d3.scaleBand to map population and country names, while d3.axisBottom and d3.axisLeft render labeled axes with custom formatting. Data comes from a CSV file of 2018 UN estimates, and the SVG rendering includes a title and axis label.

Loading thumbnail…

Making Axes

This interactive chart, built with React and D3.js, traces how a numeric value changes over time, with data points colored by threshold—green below 50, amber between 50 and 75, and red above 75. Dashed reference lines at 50 and 75 mark these risk zones, and hovering over a circle reveals the exact percentage. The visualization uses a time-scaled x-axis and a linear y-axis, rendering an SVG connected scatter plot from CSV data.

Loading thumbnail…

Dataset #3

This example displays a summary of a CSV dataset, showing the row count, column count, and file size in kilobytes, followed by the first ten rows as JSON. The page uses D3 v7 via `d3.csv` to load the data and the `select` and `append` methods to render the text into `pre` elements. The data source is a local `data.csv` file containing exam scores, and the styling is minimal with a yellow background and large monospaced text.

Loading thumbnail…

data set #2

This example displays a plain-text summary of a CSV dataset about the world’s most populous countries in 2018, sourced from the United Nations World Population Prospects. It uses d3.csv to load the data, then prints the row and column counts, file size in kilobytes, and the first ten rows as JSON. The page is styled with a black background and green monospaced text, and relies on d3’s csvFormat for size calculation.

Loading thumbnail…

Untitled

This example demonstrates a React-based interactive visualization built with D3.js, displaying a force-directed network graph. The code uses `d3.forceSimulation` with forceLink, forceManyBody, and forceCenter to position nodes and edges, while SVG elements render the relationships. Nodes are draggable through `d3.drag`, and the visualization updates smoothly using React state management. The data source is embedded inline in the JavaScript, featuring a small set of interconnected entities. The example highlights how React and D3 can work together for dynamic graph exploration.

Loading thumbnail…

Fork of datasets #3

This example renders a single large text message, “Hello HTML!”, centered on the page using CSS styling. It demonstrates a minimal HTML document that combines CSS for layout and JavaScript, though no JavaScript logic is executed. The page uses plain HTML and CSS with a `.message` class defining a 13em font size and text alignment. The code does not load any external libraries or frameworks, relying solely on native browser rendering. The data source is static text embedded directly in the HTML structure, with no interactive or dynamic visualization elements present.

Loading thumbnail…

datasets #3

This example displays a static HTML page showing the message “Hello HTML!” in large, centered text. It uses plain CSS for styling and JavaScript is referenced but not implemented in the visible code. The page relies on standard HTML tags, with a `div` element carrying the message, and does not incorporate any external libraries or data visualization frameworks. The rendering approach is a basic document layout, with no interactive or dynamic behavior beyond the initial page load.

Loading thumbnail…

Fork of making face

A blank SVG canvas of 690 by 500 pixels awaits a single circle, which is appended via D3’s `select` and given a radius of 200. The code, built with React and rendered via SVG, sets up the basic geometric element without specifying fill, stroke, or position, leaving the visualization minimal and abstract. Using only `d3.select` to manipulate the SVG, this example demonstrates a bare-bones starting point for a face-like composition, though no actual facial features or data are present in the current implementation.

Loading thumbnail…

Fork of Fork of

This example demonstrates a minimal static web page that displays the message “Hello HTML!” in large, centered text. Built with plain HTML and CSS, it uses a `div` element with a class of `message` and inline style rules to set the font size and text alignment. No JavaScript libraries or data sources are involved; the page renders entirely in the browser without interaction or dynamic content. The code serves as a simple starter template for integrating CSS and HTML.

Loading thumbnail…

Fork of

This is a minimal HTML page demonstrating the use of CSS and JavaScript within a React starter template. It displays a large, centered message reading "Hello HTML!" using a `div` with a CSS class for styling. The page contains no data or interactive elements, serving purely as a bare-bones example of static content rendered in the browser. The code uses standard HTML, CSS, and vanilla JavaScript without any external libraries or frameworks beyond the referenced React setup.

Loading thumbnail…

Fork of making face

A blank SVG canvas of 690 by 500 pixels awaits a single circle, which is appended via D3’s `select` and given a radius of 200. The code, built with React and rendered via SVG, sets up the basic geometric element without specifying fill, stroke, or position, leaving the visualization minimal and abstract. Using only `d3.select` to manipulate the SVG, this example demonstrates a bare-bones starting point for a face-like composition, though no actual facial features or data are present in the current implementation.

Loading thumbnail…

Fork of Untitled

This fork displays a simple text summary of a dataset listing the populations of the world’s most populous countries in 2018, sourced from the United Nations World Population Prospects 2017. It prints the number of rows, columns, and file size in kilobytes, followed by the first ten rows of the data. The code uses D3’s `select`, `csv`, and `csvFormat` APIs to fetch and parse the data, then appends `<pre>` elements to the page body. A commented video tutorial is also embedded in the source.

Loading thumbnail…

Untitled

This example displays a plain-text summary of a CSV dataset listing the populations of the most populous countries, based on 2018 United Nations estimates. The page prints the total row count, column count, and file size in kilobytes, followed by the first ten rows of data in a formatted JSON structure. The implementation uses D3 v7 methods `select`, `csv`, and `csvFormat` to load the data, compute its metadata, and render the output as HTML `pre` elements. Styling is provided by an external CSS file.

Loading thumbnail…

Untitled

This example displays a black terminal-style interface that reports the dimensions of a dataset loaded from a CSV file, showing the row count, column count, and file size in kilobytes. It also prints the first ten rows of the data, which contains country populations, as formatted JSON. The visualization uses the d3.csv function to parse the data and d3.select to append multiple pre elements to the page body. The code imports d3.csvFormat to calculate the data size and uses d3.v7.

Loading thumbnail…

dataset#2

This example renders a single large circle inside an SVG canvas. The visualization uses D3’s selection API to append a circle element to an existing `<svg>` tag and sets its radius to 200 pixels. The circle occupies most of the 690×500 pixel viewport, with the page margin removed via CSS for a full-bleed display. React manages the DOM container, while the direct SVG manipulation happens through D3’s `select` and `append` methods. The data source is minimal, showing a static geometric shape rather than a dynamic dataset.

Loading thumbnail…

Uploading datasets #1

This example displays a text-based summary of the auto-mpg dataset, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows of data in JSON format. Using D3 v7, the code fetches the CSV from the UCI Machine Learning Repository via `d3.csv`, formats the data with `d3.csvFormat`, and appends the output to the body using `d3.select`. The interface renders in a monospace console-like style with black background and green text.

Loading thumbnail…

Fork of Auto MPG Summary

This example summarizes the Auto MPG dataset from the UCI Machine Learning Repository by displaying text-based statistics on a black terminal-style interface. It shows the total row count, column count, and computed dataset size in kilobytes, followed by a JSON-formatted preview of the first ten rows. The code uses `d3.csv` to load the data and `csvFormat` to measure its size, while `select` and `append` from D3 v5 build the `<pre>` elements that render the glyph-like green text.

Loading thumbnail…

Untitled

This example displays a list of cars retrieved from a database query, showing each vehicle's name and description. The React app renders a static "Hello React!" message, while the accompanying Java code defines a `Cars_dtset` class and uses an `Actual_Query` interface with a `@Select` annotation to fetch rows from the dataset, iterating through the results to print car attributes. The code demonstrates a basic React rendering setup combined with a database access pattern using a custom query interface.

Loading thumbnail…

Fork of React Starter

This example demonstrates a minimalist React application that renders the text “Hello React!” in a large, centered message. The page loads React and ReactDOM from a CDN, then uses the `ReactDOM.render` method to mount a functional `App` component into the `#root` div. All styling is handled with a simple CSS class, and the component returns a single JSX element. No external data or interactive features are present; the visualization is purely a static text display. The code shows how React can be integrated into a standalone HTML file with a bundled JavaScript entry point.

Loading thumbnail…

Fork of Fork of Fork of Fork of Auto MPG Summary

This visualization displays a plain-text summary of the Auto MPG dataset from the UCI Machine Learning Repository, presenting the row count, column count, and file size in kilobytes. It then prints the first 10 rows of the data as formatted JSON. The code uses d3.csv to load the data and d3.csvFormat to calculate its size, appending the results as styled `` elements with a green-on-black terminal aesthetic via CSS.

Loading thumbnail…

Fork of Auto MPG Summary

This visualization summarizes an automobile dataset from the UCI Machine Learning Repository. It displays the total number of rows, column count, and data size in kilobytes, followed by the first ten rows rendered as pretty-printed JSON. The example uses D3 v5 functions such as `csv`, `csvFormat`, and `select` to fetch and process the data, while styling the output with black background and green monospace text via CSS.

Loading thumbnail…

Fork of Fork of Fork of Auto MPG Summary

This visualization displays a plain-text summary of the Auto MPG dataset from the UCI Machine Learning Repository, showing the row count, column count, file size in kilobytes, and the first ten rows as JSON. The page uses d3.csv to load the data from a remote URL, then d3.select and append to create three `<pre>` elements with monospaced text. The styling uses black background with green terminal-like text via CSS. The code computes file size using d3.csvFormat to estimate the dataset’s kilobyte size.

Loading thumbnail…

Fork of Auto MPG Summary

This fork displays a text-based summary of the Auto MPG dataset from the UCI Machine Learning Repository, showing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses d3.csv to load the data and d3.csvFormat to calculate the dataset’s size, then appends the results to the body using d3.select and pre elements. The page is styled with minimal CSS, setting a white background and large monospace text for readability.

Loading thumbnail…

Fork of Fork of Auto MPG Summary

This visualization displays a text-based summary of the Auto MPG dataset from the UCI Machine Learning Repository, showing the row and column counts, data size in kilobytes, and the first 10 rows of data as formatted JSON. Rendered in a terminal-inspired black-and-green aesthetic, the page uses d3.csv to fetch and parse the remote CSV file, then appends `<pre>` elements to the document body via d3.select. The code computes the data size using csvFormat and presents the summary in a large monospace font.

Loading thumbnail…

Fork of Auto MPG Summary

This example summarizes the Auto MPG dataset from the UCI Machine Learning Repository by displaying text-based statistics on a black terminal-style interface. It shows the total row count, column count, and computed dataset size in kilobytes, followed by a JSON-formatted preview of the first ten rows. The code uses `d3.csv` to load the data and `csvFormat` to measure its size, while `select` and `append` from D3 v5 build the `<pre>` elements that render the glyph-like green text.

Loading thumbnail…

Fork of Auto MPG Summary

This visualization displays a text-based summary of the Auto MPG dataset, showing the row count, column count, and approximate file size, followed by the first ten rows in JSON format. The data is loaded from a CSV file hosted on VizHub, which originates from the UCI Machine Learning Repository. The program uses D3’s `csv` module for fetching and parsing the data, `csvFormat` to calculate the size in kilobytes, and `select` to manage DOM elements. The output is styled with monospaced green text on a black background.

Loading thumbnail…

Fork of Fork of Cool Art : generated line data with d3 line generator api : circle on path

This visualization displays a web of 7,000 randomly generated data points connected by a smooth, curving line that spirals across a black SVG canvas. The line, created using the d3.line generator with curveBasis interpolation, produces an organic, art-like structure. Each data point is rendered as a small colored circle along the path, with randomized RGB fill colors that add visual variety. The example demonstrates how d3.v7 can transform array-based coordinate data into dynamic, generative artwork using basic SVG elements and the line generator API.

Loading thumbnail…

Confident

A simple SVG face rendered with D3 v5 appears as a confident expression, featuring a light blue circular head, red outline, two eyes, and a smile created using the `d3.arc` path generator. The animation shows the eyebrows rising and falling repeatedly via chained `transition().duration(2000)` calls, which change the transform attribute to shift them upward then back down. This demonstrates basic shape construction with `circle`, `rect`, and `path` elements, along with declarative transition chaining for a looping effect.

Loading thumbnail…

confident

A cheerful face occupies the center of the SVG canvas, drawn with a light blue circle for the head, two dark eyes, and a curved mouth. The animation brings the eyebrows to life as they rise and fall over two seconds, creating a confident, expressive blink-like motion. The visualization is built with D3 v5, using SVG shapes and transitions to animate the eyebrow rectangles. The face’s geometry is defined by explicit pixel coordinates for the eye spacing, eyebrow dimensions, and mouth arc, with the head positioned at the canvas center.

Loading thumbnail…

making face

A blank SVG canvas with a large circle positioned by D3's `select` and `append` methods, while the page loads React and ReactDOM from a CDN though the circle is drawn without them. The example demonstrates a minimal static SVG rendering, using D3 to set the circle's radius to 200 pixels, with the SVG dimensions defined in the HTML. The styling hides the body margin and overflow, and the visualization shows only this single, unlabeled shape.

Loading thumbnail…

Fork of Gun Deaths in Florida

This fork of the Gun Deaths in Florida visualization shows annual firearm murder counts in Florida from 1989 to 2016 as a red area chart with a black line and point markers. It also displays a vertical annotation marking the 2005 enactment of the "Stand Your Ground" law. The chart uses D3 v5 with SVG rendering, employing `d3.area`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for the encodings. Data comes from the Florida Department of Law Enforcement’s UCR offense data.

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with a 13em font size. It uses plain HTML and CSS, with a single `div` element and a CSS class to manage layout and typography. The code is a minimal starter template that demonstrates how to combine static markup with basic styling, requiring no JavaScript or external libraries. It serves as a foundational reference for building more complex visualizations.

Loading thumbnail…

Untitled

This example uses D3.js to draw a human face from scratch, constructing each facial feature with a series of SVG paths generated from data arrays. The visualization builds the face procedurally, showing how individual shapes—eyes, nose, mouth, and hair—combine into a recognizable portrait. The code relies on D3’s selection and data-join methods to append and style these paths, with coordinates defined directly in the script. The result is a static, data-driven illustration that demonstrates how fine-grained geometry can be controlled through D3’s scalable vector graphics pipeline.

Loading thumbnail…

Fork of HTML StarterFork of HTML Starter

This example demonstrates a simple HTML page that renders the message “Hello HTML!” using CSS for styling and JavaScript for a minimal script. The page includes a `<script type="module">` block that imports the D3 library, though no D3 functions are called. The CSS applies a large, centered font size to the message container. The project serves as a bare-bones starter template for building web visualizations with HTML, CSS, and JavaScript, with a corresponding React starter variant noted in the README.