ethanjones-git

@ethanjones-git·11 public vizzes

Cars Report

This example displays a static text message, “hellow,” inside a large `<pre>` element on a centered page. It imports a hard-coded JSON array of car objects from a separate module using ES6 `import` syntax. The page loads D3 v7 from a CDN but does not use any D3 methods. Instead, the script directly sets the `textContent` property of the `message-element` to demonstrate basic DOM manipulation with plain JavaScript. The visualization relies on the exported `cars` data, though that data is not rendered or processed visually.

Mar 15, 2023

Loading thumbnail…

Untitled

A hierarchical circle-packing visualization displays the distribution of militant organizations across ideological categories and time periods. The code uses D3.js to produce a packed circle layout, encoding each organization as a leaf node with a clipped text label, while internal nodes represent hierarchical groupings. Data is sourced from a JSON file with a nested structure. The visualization is rendered using D3’s `pack` layout, `d3.group`, and SVG elements, with circles colored by tree depth and a drop shadow filter applied for visual separation.

May 11, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting days since the first attack against distance from it, with points colored by region. Hovering over a region in the color legend highlights matching data points and fades the rest, providing a clear way to explore categorical groupings. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and a custom `ColorLegend` component that tracks hover state.

May 11, 2021

Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes monthly NOAA climate data from SFO and Oceanside stations between 1946 and 2020, plotting temperature measurements against time. Users can switch the y-axis attribute through a React dropdown menu, while hovering over the color legend highlights data points from a specific station. The visualization uses React with D3 v6 scales (scaleTime, scaleLinear, scaleOrdinal) to render SVG circles, with interactive brushing effects applied through opacity changes when legend items are hovered.

May 9, 2021

Loading thumbnail…

Untitled

This visualization displays a hierarchical dataset of political organizations, grouped by categories such as "Armed," "Communist," and "Islam," and filtered by the years they were active. It uses a sankey diagram to show the flow from these top-level categories down to specific organization names. The code loads data from a local `data.json` file and renders it using the Google Charts Sankey package alongside D3.js (v5). The diagram is displayed in a large, wide container to accommodate the many connections between categories and individual groups.

May 6, 2021

Loading thumbnail…

fork

A streamgraph visualizes COVID-19 case counts across Africa, Asia, Europe, America, and Oceania over time. D3 stacked areas with silhouette offset show daily and monthly data, using an ordinal color scale for regions. The code implements tooltips with mouseover events and uses `d3.time.scale` for the x-axis. An alternative view uses `d3.stack` with `stackOffsetSilhouette`, rendering SVG paths with `d3.area` and interactive highlighting to emphasize regional trends.

May 5, 2021

Loading thumbnail…

Sankey Diagram

This interactive Sankey diagram visualizes a two-level hierarchy of militant and political group names, from eight broad keywords to a large set of specific factions. Node colors are assigned by the first word of each name. The visualization is built with D3.js (v3) and rendered as SVG, using the `d3.sankey` API for layout and custom bezier `path` elements for the links. Users can drag nodes and click on a node to highlight all connected links, with opacity changes revealing the flow network. The data structure is provided as a JSON file with `nodes` and `links` arrays.

May 2, 2021

Loading thumbnail…

Untitled

A hierarchical tree chart displays nested data from `data.json`, organizing entries by organization, armed group, year, city, and province. The visualization uses D3.js’ `tree` layout with `linkHorizontal` paths and zoom functionality, rendering each node as text with font sizes scaled by depth for readability. The data, which includes armed forces groups and their locations, is loaded via `json()`, and interactive panning and zooming are enabled through D3’s `zoom` API.

Apr 29, 2021

Loading thumbnail…

Terror Tree

This visualization displays a hierarchical tree of terrorist organizations, categorized by ideology (such as armed forces, communist, and islam) and organized by year of origin. The data is loaded from a local JSON file and rendered as an SVG using the D3.js v5 library. The tree layout uses `d3.tree` and `d3.hierarchy` to compute node positions, while `d3.linkHorizontal` draws the connecting paths. Text labels have varying font sizes based on depth, and the entire visualization supports pan and zoom via `d3.zoom`.

Apr 27, 2021

Loading thumbnail…

Smiley Face Part

This example demonstrates a basic React application that renders a static HTML page with a title and a simple message. The code uses `ReactDOM.render` to mount a functional component, `App`, which returns a JSX heading reading “HELLO JSX”. The page includes commented-out SVG circle elements, suggesting an intended smiley face graphic that is not active. The implementation relies on React 17 and ReactDOM from unpkg CDN, with the component defined in `index.js` and executed through a bundled script.

Apr 8, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text "Hello HTML" in large, centered type. It uses standard web technologies, including CSS for styling and JavaScript for logging a message to the browser console. The implementation relies on core HTML elements like the `<style>` and `<script>` tags, with no external libraries or frameworks. The page serves as a bare-bones starting point for web-based visualization projects, showing how static content and console output work together in a simple document.

Apr 8, 2021