Skip to main content
Log in
E

Edward-Elric233

@Edward-Elric233·27 public vizzes

Loading thumbnail…

GraphLayout with Interactive Filtering

This interactive graph layout visualization displays a network of domains, IP addresses, certificates, and ASN relationships. Users can filter edges by clicking on horizontal bar charts in a scrollable sidebar, which highlights or dims corresponding links in the force-directed graph. The visualization uses d3.forceSimulation for layout, with interactive filtering controlled through custom SVG components and a drag-based slider that adjusts edge strengths. Node and edge colors are mapped via d3.scaleOrdinal based on hierarchical categories.

Dec 4, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that combines HTML, CSS, and JavaScript in a single file. The page renders the text “Hello HTML” in large, centered type, while the script logs “Hello JavaScript!” to the browser’s developer console. It uses plain HTML elements, inline CSS styling for layout and typography, and a basic `<script>` tag for console output. The example serves as a simple starting point for building data visualizations with web technologies, with no external libraries or data processing involved.

Nov 17, 2020
Loading thumbnail…

Alpha-Shapes

This example visualizes the alpha-shape boundary of a set of 2D points, highlighting the concave hull that encloses the data. It uses D3.js to compute a Delaunay triangulation via `d3.geom.delaunay`, filters triangles whose edges exceed a squared alpha threshold, and then traces the outer edges with a custom `boundary` function. The points are offset horizontally, and the resulting polygon is rendered in yellow SVG paths over a blue background, while the raw vertices remain hidden. The code relies on D3 v5 and an older D3 geometry module for triangulation.

Nov 13, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes countries colored by economic classification, with interactive filtering through a clickable legend that dims unselected regions. The map uses an equal-Earth projection via d3.geoPath and supports zooming through d3.zoom. World country boundaries come from TopoJSON, enriched with ISO codes from a TSV lookup. Selection updates path opacity and stroke-width, while the legend animates circle radii using transition().duration().

Oct 28, 2020
Loading thumbnail…

Multiple Views with Brushing

A world map displays cities, with circle size encoding the total dead and missing; a time-series histogram below shows the same metric over time. Brushing a date range on the histogram filters the map’s circles to events within that span. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for the projection and graticules, while the histogram uses `d3.scaleTime`, `d3.histogram`, and `d3.brushX`. Data comes from a CSV of missing migrants, rendered as SVG within a React app.

Oct 23, 2020
Loading thumbnail…

Scatter Plot with Menus

This scatter plot lets users explore an automobile dataset by choosing which attributes to compare on the x and y axes via dropdown menus. The plot itself is rendered as an SVG, with each car represented by a colored, semi-transparent circle. The implementation uses D3 v5, relying on `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and a custom `dropdownMenu` module to handle the selection interface. Points animate into place using D3's `.transition()` method.

Oct 3, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications by country, with interactive filtering through a clickable color legend that updates the displayed data. The map uses a dark-blue sphere background with semi-transparent colored regions, rendered via SVG paths generated by `d3.geoPath` with an Equal Earth projection. Users can zoom and pan using `d3.zoom`, while the legend employs `d3.scaleOrdinal` with a spectral color scheme and animated transitions. Data combines TopoJSON country boundaries from world-atlas with TSV metadata, processed through `Promise.all` and the `feature` API.

Sep 26, 2020
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, using a spectral color scale derived from World Atlas TopoJSON data and ISO country codes. Built with D3 v5, it renders the map using geoEqualEarth projection and d3.geoPath, with zoom support via d3.zoom. Country boundaries are stroked in black, and hovering turns a country black. An animated color legend, implemented with custom transitions and scaleOrdinal, displays the color categories.

Sep 20, 2020
Loading thumbnail…

Color and Size Legends

This example presents two interactive legends built with D3.js v5. A categorical color legend maps fruit names—apple, lemon, orange, and lime—to distinct colors using `d3.scaleOrdinal()`, while a sequential size legend uses `d3.scaleSqrt()` to represent numeric values from 0 to 10 with varying circle radii. The code employs D3's `transition()` method to animate the circles’ radii from zero to their final sizes, and both legends are rendered as SVG groups with tick marks, circles, and text labels.

Sep 19, 2020
Loading thumbnail…

World Countries Tree

This interactive visualization presents a hierarchical tree of world countries organized by continent and subregion, rendered as a horizontal dendrogram using D3.js v5. The code loads hierarchical JSON data via `d3.json` and applies `d3.tree` layout with `d3.hierarchy` to position nodes, while `d3.linkHorizontal` generates curved paths for the connections. Text labels display country names with font sizes scaled by depth, and a `d3.zoom` behavior enables pan and zoom interactions. The SVG rendering uses a custom font and subtle text shadows to improve readability.

Sep 11, 2020
Loading thumbnail…

Blank Canvas

This visualization presents a full-screen blank canvas rendered as an SVG rectangle with rounded corners. The page dynamically sizes the SVG to match the browser window dimensions, using `document.body.clientWidth` and `document.body.clientHeight`. The code imports `select` and `arc` from D3 v5, though only `select` is used to append the rectangle. The stylesheet defines fixed positioning and hidden overflow, creating a minimal, immersive empty space ready for further graphical elements.

Sep 11, 2020
Loading thumbnail…

Cheap Tricks for interaction

This interactive map shows world countries on a globe, with each country filled with a distinct color from a rotating palette. Hovering over a country highlights it in black and displays its name via a tooltip, while the entire scene supports zoom and pan interactions. Built with D3 v5, the visualization uses `d3.geoPath` with a Mercator projection to render country outlines from the World Atlas TopoJSON dataset. Zooming is implemented through the `d3.zoom` API, which applies SVG transforms to the group element containing all paths.

Sep 11, 2020
Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered with D3.js using the geoEqualEarth projection, with countries filled in green and a blue sphere background. It demonstrates geographic data visualization by loading the world-atlas TopoJSON dataset and converting it to GeoJSON features via topojson.feature. The map uses d3.geoPath with the projection to draw SVG paths. The code also imports additional projections like geoMercator and geoOrthographic, though only equal-earth is applied here.

Sep 10, 2020
Loading thumbnail…

Bowl of Fruit - Hover to Select

Five fruits sit in a bowl, rendered as SVG circles that transition between apple and lemon types. Hovering strokes the hovered fruit black; removing the cursor clears the stroke. The view uses D3 v5 selections, ordinal color and radius scales, and a 1-second transition on position, radius, and fill. Updates remove fruits with a fading and shrinking exit animation.

Sep 10, 2020
Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit shows five apples in a rounded rectangle, with smooth animated transitions as fruits are removed, a lemon replaces one apple, and another apple exits. Each fruit is a circle colored by type and sized by a d3.scaleOrdinal, with a click handler that toggles a black stroke on the selected fruit. The visualization uses D3 v5 with data joins, enter/update/exit patterns, and transition durations to animate position, radius, and fill changes in SVG.

Aug 22, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3.js general update pattern for animated transitions. Five apples appear as red circles, then one is removed, another changes to a yellow lemon, and a filtered update removes a further item, all with 1000ms durations. The visualization uses D3’s selection methods, including `enter`, `merge`, and `exit`, with `.transition()` to animate circle radii and positions. SVG circles are bound to data via keys, and color and size scales map fruit types to visual attributes.

Aug 22, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates D3’s general update pattern by animating a bowl of fruit as apples are added, removed, or converted to lemons. Circles and labels enter, update, and exit with staggered transitions, using keyed data joins and ordinal scales for color and radius. The code relies on `selection.enter`, `merge`, `exit`, and `transition` to animate position, size, and fill over one-second durations. SVG rendering with D3 v5 drives the visualization, which is orchestrated by timed function calls in `index.js`.

Aug 22, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population by year using D3 v5, with a smooth curve generated by the `area()` function and `curveBasis`. The y-axis uses a reversed linear scale with tick formatting that abbreviates billions as “B,” while the x-axis employs a time scale. SVG rendering displays the filled path, axis labels, and title, with data loaded from a CSV file containing yearly population figures.

Aug 18, 2020
Loading thumbnail…

Temperature in San Francisc Line Chart

A line chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth, filled area curve to emphasize the trend over the period. The visualization is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and axis generators to build the layout. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures converted to numbers.

Aug 18, 2020
Loading thumbnail…

Temperature in San Francisc Line Chart

This line chart visualizes a week of temperature measurements in San Francisco, using a smooth curve to connect the data points and displaying separate axes for time and temperature with formatted tick labels. The visualization is rendered as an SVG using D3 v5, with D3 scales including `scaleTime` and `scaleLinear` for mapping data to pixels, and `line` with `curveBasis` for the smoothed path. Data is loaded via D3’s `csv` from an external dataset, and axes are generated with `axisBottom` and `axisLeft`, complemented by styled grid lines and labels.

Aug 18, 2020
Loading thumbnail…

Temperature in San Francisc Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for scales, `axisLeft` and `axisBottom` for axes, and `csv` to load the data. Each data point is drawn as a red semi-transparent circle, and the visualization includes labeled axes and a title. The data is sourced from a CSV file hosted on VizHub.

Aug 18, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between miles per gallon (MPG) and horsepower for a dataset of cars, with each circle representing a vehicle. The chart uses color to differentiate individual data points, while axes are labeled and scaled using D3's `scaleLinear` and `scaleBand` functions. Built with D3 v5, the visualization renders as an SVG and reads its data from an external CSV file. The code employs D3's `axisLeft`, `axisBottom`, `extent`, and `format` APIs to construct the axes and tick marks.

Aug 18, 2020
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the top ten most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. Each country is represented by a colored circle positioned according to its population value. The chart is built with D3 v5, using `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load the data. The axes include grid lines and tick labels formatted with abbreviated units, while the title and axis labels are styled via CSS.

Aug 18, 2020
Loading thumbnail…

Customizing Axes

A horizontal bar chart shows the populations of the ten most populous countries. The bars are colored with a rotating palette via a custom color getter and labeled with abbreviated axis tick formats using `d3.format`. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load the data, with an SVG rendering that removes default axis lines and adds custom labels.

Aug 17, 2020
Loading thumbnail…

Makign a Bar Chart

This bar chart displays the populations of the top ten most populous countries, with values derived from a data.csv file and scaled by a factor of one thousand. Built with D3 v5, the visualization uses `select` to target the SVG, `scaleLinear` and `scaleBand` for axes, and `axisLeft` and `axisBottom` to render them. Each bar’s height is determined by the band scale, while its width reflects the linear population scale, with colors cycling through a predefined palette.

Aug 16, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged in groups using SVG elements inside an HTML page. The code applies CSS classes to style the line group with a black stroke and a rounded path join. A transform attribute scales the entire drawing by 1.5 times, while groups use translate to position shapes, with fill and stroke properties set directly on elements to control color and borders.

Aug 15, 2020
Loading thumbnail…

Cars Report

This example shows a text-based report of cars priced under a maximum threshold, displayed in large type on a webpage. It demonstrates asynchronous data handling by fetching a hardcoded JSON array of five car objects after a two-second delay, then filtering and formatting the results. The code uses JavaScript modules with exported functions, a `Promise` with `setTimeout` to simulate loading, and the Document Object Model’s `textContent` property to update the page. It highlights array methods like `filter`, `map`, and `join` for report generation.

Aug 11, 2020