Abishek-Dulal

@Abishek-Dulal·14 public vizzes

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to compare any two numeric car attributes. Dropdown menus built with a custom `dropdownMenu` module let viewers select which columns map to the X and Y axes. The visualization uses d3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while circles transition smoothly to new positions over two seconds using `transition().duration(2000)`. SVG rendering and animated updates are driven by a reusable `scatterPlot` function.

Jul 21, 2020

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using an ordinal color scale based on `d3.scaleOrdinal` and `d3.schemeSpectral`. The visualization also includes an interactive color legend, built with reusable D3 components, that allows users to filter countries by clicking on a category. Geographic boundaries are rendered as SVG paths using `d3.geoPath` with a natural Earth projection, while the data comes from the World Atlas TopoJSON and TSV datasets. Zooming is enabled through `d3.zoom`, and hovering highlights individual countries.

Jul 20, 2020

Loading thumbnail…

Untitled

This example shows an interactive world map that displays country borders and names, with a dark blue ocean sphere and light green landmasses. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features as SVG paths generated by `d3.geoPath`. Hovering over a country changes its fill to red, and a `zoom` behavior applies pan and zoom transforms to the map group. Country data comes from the world-atlas TopoJSON file, converted with `topojson.feature`.

Jul 19, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two reusable legend components for D3 visualizations: a color legend and a size legend. The color legend maps ordinal fruit categories (apple, lemon, lime, orange) to distinct colors, while the size legend uses a square-root scale to encode tick values as circle radii. Both legends employ the general update pattern, using selection joins with `enter()`, `merge()`, and `exit()` to handle dynamic data. The code uses D3 v5 APIs like `scaleOrdinal`, `scaleSqrt`, and `selection.selectAll` to render SVG circle and text elements with applied transforms.

Jul 19, 2020

Loading thumbnail…

Bowl of fruit

Five fruit shapes sit in a row as SVG circles and labels, using d3.scaleOrdinal to map apple and lemon types to distinct radii and colors. Clicking a fruit highlights it with a black stroke. Over time, d3 transitions remove fruits, change an apple into a lemon, and filter out another, demonstrating data joins with enter, update, and exit selections.

Jul 19, 2020

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries, organized by continent and subregion, as a tree diagram with horizontal links and labeled nodes. The layout uses the `d3.tree` and `d3.hierarchy` functions to compute node positions, while `d3.linkHorizontal` draws the connecting paths. Node labels are rendered as SVG text with font sizes scaled by depth, and the entire tree supports pan and zoom through `d3.zoom`. The data is loaded from a local JSON file via `d3.json`.

Jul 18, 2020

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries organized by continent and subregion, using an indented horizontal layout. It renders the structure with SVG paths representing links between parent and child nodes, employing D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` generator. The data is loaded from a JSON file containing the nested country classification. The visualization uses a fixed viewport sized to the browser window, with styled paths and text elements for a clean presentation.

Jul 18, 2020

Loading thumbnail…

Untitled

This example demonstrates a blank SVG canvas with no visible marks, where the code initializes an SVG element using the d3.select API and computes height and width from the document body’s client dimensions. The stylesheet defines a `.lines` class for black strokes with a width of 10 and blue path elements with round line joins, but the JavaScript bundle does not render any shapes or data. The static SVG remains empty, showing only the underlying setup for potential line-based visualizations.

Jul 18, 2020

Loading thumbnail…

Untitled

This example displays a world population area chart over time, using a maroon filled path with a smooth curve to emphasize the data’s upward trend. The SVG rendering relies on D3 v5’s `area`, `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with data loaded from a CSV file. The y-axis labels are formatted in billions, and the x-axis labels are rotated vertically for readability, alongside custom tick grids and a descriptive title.

Jul 17, 2020

Loading thumbnail…

Untitled

This example displays a week of temperature data for San Francisco as a smooth filled area chart. The SVG visualization uses time-series data from a CSV file loaded via `d3.csv`, with temperature mapped to the vertical axis and timestamp to the horizontal axis using `scaleTime` and `scaleLinear`. The chart is rendered with D3 v5, including axis components (`axisLeft`, `axisBottom`) and a filled path generated by the `area` generator with a `curveBasis` interpolation. Grid lines from tick marks and custom axis labels enhance readability.

Jul 17, 2020

Loading thumbnail…

Untitled

This example shows a line chart of temperature readings over one week in San Francisco, plotted as a smooth basis curve. Time is mapped to the horizontal axis and temperature to the vertical axis, with labels rotated for readability. Built with D3 v5, the code fetches CSV data, then uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path and axes. Grid lines and descriptive text titles are included.

Jul 17, 2020

Loading thumbnail…

Untitled

This example displays a scatterplot of automobile data, plotting engine horsepower against vehicle weight. Each point represents a car, with axes labeled clearly and a title reading "Bar chart of population." The visualization uses D3 v5 to load CSV data from an auto-mpg dataset, applying linear scales, axes with tick marks, and SVG circles for rendering. The code demonstrates axis customization, including rotated tick labels and grid lines with negative tick sizes.

Jul 17, 2020

Loading thumbnail…

Untitled

A dot plot displays population counts for the world's most populous countries, with each circle's vertical position encoding the population value and horizontal position distributed by country name. The chart uses D3 v5's scaleLinear, scalePoint, axisLeft, axisBottom, and csv loading to parse the data file. SVG circles are rendered on a 960×500 canvas, with gridlines, rotated country labels, and a title, while populations are formatted using abbreviations like "B" for billions.

Jul 17, 2020

Loading thumbnail…

Untitled

This bar chart displays the population of 22 countries, sorted by country name along the horizontal axis with population values on the vertical axis. The visualization is rendered as an SVG using D3 v5, with the data loaded from a CSV file. The chart uses D3's `scaleBand` and `scaleLinear` for scaling axes, `axisLeft` and `axisBottom` for ticks, and includes rotated country labels for readability.

Jul 16, 2020