Y

ylzami40

@ylzami40·43 public vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors the world’s countries by economic classification using a spectral color scale, with country names and values shown on hover. The visualization also places a set of fixed coordinates as small circles on the map, though these are filled with the same color scale. Built with D3.js, it projects geographic data from a TopoJSON world atlas using the Natural Earth projection (`d3.geoNaturalEarth1`) and renders paths via `d3.geoPath`. Interactive zooming is enabled through a `d3.zoom` event, which transforms the SVG group containing the map.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries by their economy type, using a spectral color scale applied via `d3.scaleOrdinal` and `d3.schemeSpectral`. It projects geographic data with `d3.geoNaturalEarth1` and renders shapes through `d3.geoPath` in an SVG, with topojson data loaded from the World Atlas. The map supports zooming via `d3.zoom`, and hovering highlights individual countries. Country names and economy values appear as tooltips from appended title elements.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical color scale based on the World Atlas TopoJSON dataset. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while a legend built from d3.scaleOrdinal and schemeSpectral displays the color categories. Hovering highlights individual countries, and d3.zoom enables pan and zoom interactions on the SVG.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical color scale based on the World Atlas TopoJSON dataset. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while a legend built from d3.scaleOrdinal and schemeSpectral displays the color categories. Hovering highlights individual countries, and d3.zoom enables pan and zoom interactions on the SVG.

Loading thumbnail…

Map it

This visualization presents a world map created from TopoJSON data loaded via `d3.json` and tab-separated country names from `d3.tsv`. The map is rendered as SVG elements using the `d3.geoPath` projection, with the code structuring asynchronous data loading through `Promise.all`. The example demonstrates basic geographic data binding and SVG rendering, where the map fills a 960×500 canvas with a minimal, clean aesthetic. It serves as a starting point for adding interactive features or choropleth styling.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a natural Earth projection map of the world with circular markers plotted at the locations of Indian military regiments and cantonments. Each marker is positioned using a geographic projection, and hovering over a marker displays a tooltip with the regiment’s name. The visualization uses D3 v5 with `geoNaturalEarth1` and `geoPath` for map rendering, and TopoJSON to load world country boundaries from the World Atlas dataset. The markers are appended as SVG circles with a transform based on the projected latitude and longitude coordinates.

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of machine learning concepts, from broad categories like classical learning and neural networks down to specific algorithms such as K-Means and XGBoost. The tree uses a horizontal layout with curved links, and nodes are labeled with their corresponding technique names. Built with D3 v5, it leverages `d3.tree` and `d3.hierarchy` to compute the layout, `d3.linkHorizontal` for the path generator, and `d3.zoom` for pan and zoom interactions. Text color highlights certain parent nodes, and the SVG rendering includes a Playfair Display font for labels.

Loading thumbnail…

World Countries Tree

This interactive visualization presents a hierarchical tree of machine learning algorithms, organized by categories such as Classical Learning, Ensemble Methods, and Neural Nets. The tree uses a horizontal layout with curved links and labeled nodes. Built with D3.js v5, it leverages `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute and draw the structure, along with `d3.zoom` for pan and zoom capabilities. Data is loaded from a local JSON file, and the SVG rendering includes a download option for the graph.

Loading thumbnail…

World Countries Tree

This example displays a hierarchical tree of machine learning algorithms, organized from broad categories like classical learning and ensemble methods down to specific techniques such as linear regression and XGBoost. The D3 v5 code uses a `tree()` layout with `linkHorizontal` paths to draw the branching structure, while `zoom` enables panning and scaling. Node labels are rendered as SVG `<text>` elements, and the visualization is generated from a local `data.json` file.

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with each node labeled by name. It uses D3 v5's `tree` layout and `linkHorizontal` generator to draw curved paths between parent and child nodes, while `zoom` enables panning and scaling. The SVG rendering applies a serif font and a teal stroke color, with node text sized by depth. Data is loaded from a local JSON file, making the structure purely hierarchical rather than geographic.

Loading thumbnail…

Cars Report

This example renders a simple bar chart of five car prices using D3 v5’s `select` and data-join pattern. Each rectangle’s height corresponds to a price value from the embedded `cars` JSON array, while the x position is computed from the index. The SVG is appended directly to the body, with `rect` elements styled via a CSS rule that sets a steelblue fill. No axes or labels are included, focusing solely on the raw geometric encoding of the data.

Loading thumbnail…

Cars Report

This example displays a short list of used cars with their make, model, year, and price, sourced from a static JSON array defined in `cars.js`. The visualization renders the data as plain text on a webpage, with a large "Hello" message styled via CSS. It uses D3 v5, loaded from a CDN, but the code primarily relies on standard JavaScript `JSON.parse` and DOM manipulation rather than D3-specific data-binding or layout methods.

Loading thumbnail…

Cars Scatter Plot with Menu

This interactive scatter plot visualizes car characteristics from the UCI Auto MPG dataset, displaying weight on the y-axis while allowing users to select the x-axis attribute from a dropdown menu of data columns. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and circle elements to plot each car. A dropdown menu built with a reusable `dropdownMenu` function updates the x-axis scale and re-renders the scatter plot when the user changes the selected column, highlighting relationships like horsepower versus weight.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles represent individual vehicles, with axes labeled and a title displayed. The visualization is built with D3 v5, using scaleLinear, extent, axisBottom, axisLeft, and csv to load and render the data as SVG elements. Axis labels and tick styling are handled through appended text and CSS classes.

Loading thumbnail…

Cars Scatter Plot with Menu

This interactive scatter plot visualizes the relationship between weight and various car attributes from the UCI Auto MPG dataset. A dropdown menu allows users to select which attribute (e.g., horsepower, acceleration) appears on the x-axis, while weight remains on the y-axis. The visualization uses d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv to load the data. Red semi-transparent circles are rendered as SVG elements, with axis labels and a title updated dynamically.

Loading thumbnail…

Cars Scatter Plot with Menu

This interactive scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A dropdown menu lets users change the x-axis variable among the dataset’s columns, triggering a re-render of the SVG visualization. The implementation uses d3’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while a custom `dropdownMenu` module handles the selection UI and callback.

Loading thumbnail…

Auto MPG Summary

This example visualizes the relationship between miles per gallon and vehicle weight for a dataset of cars, with each car represented as a semi-transparent red circle. The scatter plot uses linear scales for both axes, with axis gridlines and labels. The visualization is built with D3 v5, using `d3.csv` to load the data, `scaleLinear` to map values, and `axisLeft` and `axisBottom` to render the axes. Circle positions are set via the `cx` and `cy` attributes based on the scaled data values.

Loading thumbnail…

Scatter with menus

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as SVG circles, the plot uses D3 v5 scales and axes to map the data, with labels for both axes and a title. The code includes a dropdown menu for selecting options, built with a custom `dropdownMenu` function. The data is loaded via D3’s `csv` method from a remote source, and the chart updates with the selected menu values.

Loading thumbnail…

Let's make a face with D3.js!

This visualization uses D3.js to construct a stylized face from geographic map data. It renders a world map projected using a Mercator projection, with country boundaries drawn via `d3.geoPath`, and then overlays facial features on top. The data comes from the world-atlas TopoJSON and TSV files loaded from jsdelivr. The code sets up an SVG canvas and uses `d3.geoMercator` for projection, though the facial feature construction is incomplete in the provided snippet.

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to render a world map on an SVG canvas, with each country filled in light green and the globe projected using a Natural Earth projection. It displays country names as tooltips by merging data from the World Atlas TopoJSON and TSV files. The map supports zoom interaction through D3's zoom behavior, and hover states highlight countries in red. The code relies on d3.geoPath, d3.geoNaturalEarth1, topojson.feature, and d3.json/tsv for data loading.

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries colored in light green against a blue globe, with red highlighting on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features with `d3.geoPath`. Country boundaries and identifiers come from the World Atlas TopoJSON dataset, while country names are joined from a TSV file. Interactive tooltips show each country’s name through appended SVG `<title>` elements, and the map supports zooming via D3’s zoom behavior.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using color to distinguish region boundaries and a blue sphere to represent the Earth’s surface. It loads geographic data from the World Atlas TopoJSON and TSV files via Promise.all, then renders each country as an SVG path using d3.geoPath with the d3.geoNaturalEarth1 projection. Hovering turns countries red, and tooltips display country names through appended title elements. The visualization supports zoom interaction via d3.zoom, with light green fills and black strokes for borders.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with each country filled in light green and outlined in black. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, using `d3.geoPath` and `geoNaturalEarth1` to project and render country boundaries. Countries are colored by their assigned fill, and hovering over a country turns it red, while a tooltip displays the country name. The map includes a blue sphere background and supports zoom interactions through D3’s zoom behavior.

Loading thumbnail…

Let's make a MAP!

This example displays a world map with country boundaries and a blue ocean background, rendered using the Natural Earth projection. It shows a static geographic visualization of countries filled in brown with subtle black outlines. The visualization is built with D3 v5, using `geoPath` for map projections and `geoNaturalEarth1` for the projection type. Country data is loaded from the world-atlas TopoJSON file, converted to GeoJSON features with the `topojson` library's `feature` function, and rendered as SVG paths.

Loading thumbnail…

Let's make a world map with D3.js!

A simple world map renders countries as filled brown shapes on a blue ocean sphere, using D3.js v5 with a Natural Earth projection from `d3.geoNaturalEarth1`. The SVG paths are generated by `d3.geoPath` and features are extracted from a TopoJSON dataset (world-atlas countries-110m) via topojson's `feature` function. Countries are styled in CSS, with ocean fill applied to the initial sphere path.

Loading thumbnail…

Let's make a MAP!

This map visualizes world countries as SVG paths on a Mercator projection. The example loads geographic data from a world-atlas JSON file, converts it into TopoJSON features, and renders each country as a path element. It uses D3's `geoPath` and `geoMercator` to project the coordinates, while the TopoJSON `feature` API extracts the country boundaries from the dataset.

Loading thumbnail…

Bowl of fruit!

Five apples are displayed as red circles with labels, arranged horizontally across the screen. After one second, the last fruit is removed; a moment later, the third apple changes to a yellow lemon with a smaller radius. The example uses d3-selection with data joins to bind an array of fruit objects to SVG groups, circles, and text elements. The `scaleOrdinal` function maps fruit types to color and radius values, while `setTimeout` calls trigger the sequential updates.

Loading thumbnail…

Bowl of fruit!

A bowl of fruit animates as apples and lemons appear, shrink, and disappear in a horizontal row. The visualization uses D3 v5 with an SVG renderer, binding data to circles and applying ordinal scales for color and radius based on fruit type. Updates trigger via `setTimeout`, modifying the array and re-rendering, with enter, update, and exit selections transitioning circle attributes like `cx` and `r` over one-second durations.

Loading thumbnail…

Population Chart

This chart visualizes global population trends over time using an area chart, sourced from the 2018 United Nations World Population Prospects. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map years and population values, with axes created via d3.axisBottom and d3.axisLeft. A maroon-filled path is generated by d3.area with curveBasis, while tick formats abbreviate large numbers using d3.format. The data is loaded asynchronously from a CSV file using d3.csv.

Loading thumbnail…

Line Chart

This line chart displays temperature in San Francisco over time, with time on the x-axis and temperature on the y-axis. The visualization uses a filled area path with a smooth curve to emphasize temperature trends. Data is loaded from a CSV file using `d3.csv`, and the scales, axes, and area generator are built with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` with `curveBasis`. The chart includes grid lines, axis labels, and a title, all rendered as SVG.

Loading thumbnail…

Line Chart

This line chart visualizes temperature data over time, using a smooth basis curve to connect data points. The chart is rendered as SVG in a D3.js v5 application, with axes created using `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom`. The line is drawn with the `line` generator and `curveBasis` for a smooth path. The data is loaded from a CSV file hosted on VizHub, and the plot includes labeled time and temperature axes with a title.

Loading thumbnail…

Temp SanFransisco Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with each circle representing a data point plotted on time (x-axis) and temperature (y-axis) scales. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while data is loaded via `csv` from a remote dataset. The chart includes axis labels and a title, with circles styled in steelblue and rendered as SVG elements. Axes are customized with tick lines and padding, and the temperature scale is inverted so higher values appear toward the top of the plot.

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot displays the relationship between horsepower and weight for a dataset of cars, using a red semitransparent circle for each vehicle. The visualization uses D3 v5’s `select`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with axes and labels styled via CSS. Data is loaded from a remote CSV file using `csv`, and each column is parsed into numeric values before rendering. The plot includes a title and handles axis tick removal, providing a clean view of how these two attributes correlate.

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot displays the population of the top 10 most populous countries using 2018 estimates from United Nations World Population Prospects data. Each country appears as a steel-blue circle positioned along a linear population scale on the x-axis and a point scale for country names on the y-axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, with SVG rendering for the chart elements. Grid lines span the full chart width and height, while formatted tick labels abbreviate large numbers.

Loading thumbnail…

Scatter Plot

This scatter plot depicts the populations of the top 10 most populous countries in 2018, based on United Nations data. It uses D3 v5 with an SVG rendering, employing `scaleLinear` for the population axis and `scalePoint` for the categorical country axis. Customized axes include formatted tick labels that convert large numbers to abbreviations, and grid lines extend through the plot area. Circles represent each country, and the visualization highlights axis customization techniques.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using data from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Axes are customized with `axisBottom` and `axisLeft`, including tick formatting that abbreviates large numbers with the `format` function. The chart also includes axis labels and a title, with styling applied through CSS.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the top 10 most populous countries using 2018 population estimates from the United Nations. The chart orders countries vertically with horizontal bars representing population size, styled as scatter points. Built with D3 v5, it uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and custom axes with tick formatting that converts units to billions. The SVG rendering includes styled axis lines, labels, and a title, with data loaded from a CSV file.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the top 10 most populous countries, using data from the United Nations 2018 estimates. The chart initially appears as a bar chart but renders the data points as SVG circles, with the y-axis listing country names and the x-axis scaled linearly to population values. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, while customizing axis labels and removing tick lines for a cleaner presentation. The data is loaded from a local CSV file.

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. It highlights how to customize D3 axes, including removing domain lines and tick lines, adding an axis label, and formatting tick values with `d3.format` to abbreviate large numbers. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with SVG rendering and custom tick styling via CSS.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, including rotated tick labels, custom tick formatting that converts billions to the letter B, and removed axis lines. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom with SVG rendering. Population values are loaded from a CSV file and multiplied by 1000 before scaling.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, including rotated tick labels, custom tick formatting that converts billions to the letter B, and removed axis lines. The visualization uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom with SVG rendering. Population values are loaded from a CSV file and multiplied by 1000 before scaling.

Loading thumbnail…

Customizing Axes

The chart displays a horizontal bar ranking of the top 10 most populous countries, with population values converted from thousands to raw counts and formatted as abbreviated labels using `format('.3s')`. The visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering as SVG. Data is loaded from a CSV file, with bars styled via CSS and the y-axis gridlines removed.

Loading thumbnail…

Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows population values on a horizontal axis with country names on a vertical axis, using D3’s `scaleLinear` and `scaleBand`. The example demonstrates axis customization, including a custom tick format that abbreviates numbers and converts G to B, and removes default axis lines and ticks. It builds on a previous bar chart example, rendering in SVG with D3 v5.