M

mavercikalvin

@mavercikalvin·27 public vizzes

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example builds a choropleth-style world map using D3.js v5, displaying country boundaries from the world-atlas TopoJSON dataset. The visualization renders the map as SVG paths, with countries filled in light green and a blue sphere for the background. It uses `d3.geoPath` with a `geoNaturalEarth1` projection to project the geographical data, while `topojson.feature` extracts the country geometries. Population data from a CSV file is loaded, though the code only logs country data to the console rather than encoding values visually, and includes a hover effect that turns countries red.

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive map displays world countries on a natural Earth projection, with a blue sphere background and light green landmasses that turn red on hover. Built with d3.geoPath and d3.geoNaturalEarth1, it loads geographic data from the world-atlas package, combining TopoJSON country boundaries with TSV names. The visualization implements pan and zoom functionality through d3.zoom, updating the SVG group’s transform on zoom events. Country names appear as tooltips via SVG title elements.

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by economy category using a spectral color scale, with hover highlighting and a custom color legend. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and render TopoJSON world-atlas data, while `d3.zoom` enables pan and zoom. The legend, rendered with reusable SVG components, displays ordinal color swatches and labels. Data is loaded from the world-atlas package, combining TopoJSON geometry with TSV metadata.

Loading thumbnail…

Fork of asg 2

This interactive choropleth map visualizes global internet usage rates per country in 2015, with population data from Kaggle and country boundaries from a TopoJSON world atlas. Users can hover to see country names and usage statistics, zoom and pan via d3.zoom, and switch between years 2018–2022 through a dropdown menu. The map uses d3.geoNaturalEarth1 projections, d3.geoPath, and a sequential color scale based on d3.schemeGreens to encode population ranges.

Loading thumbnail…

Fork of Let's make a map with D3.js!

This fork of the “Let’s make a map with D3.js!” example renders a world map using an SVG canvas with a natural Earth projection. It uses `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw country boundaries from TopoJSON data loaded via `topojson.feature`. The map displays a blue sphere outline and light green countries with thin black strokes, based on the world-atlas 110m dataset. The code loads D3 v5 and TopoJSON v3 from unpkg, with styling applied via an external CSS file.

Loading thumbnail…

withoutlabel

A world map rendered with D3's geoNaturalEarth1 projection displays countries as light green shapes with subtle black strokes against a dark blue sphere. The visualization uses d3.geoPath to generate SVG paths from TopoJSON data loaded from the world-atlas package, with the sphere drawn first as a background layer. The map fills a 1300 by 500 pixel SVG canvas, providing a straightforward geographic reference without supplementary labels or interactive elements.

Loading thumbnail…

Untitled

This interactive map of the United States shows state-level carbon pricing policies and renewable energy targets, with a dropdown menu to toggle between the two datasets. Each state’s color encodes its policy status, from “No” to “Yes + Proposed,” using a categorical color scale. The visualization uses d3.geoPath and d3.geoAlbersUsa for the geographic projection, d3.csv to load the policy data, and d3 transitions to animate the color changes. A custom tooltip displays each state’s details on hover, while a legend explains the color categories.

Loading thumbnail…

d3 Updating Bar Chart With Dropdown

A dropdown menu lets viewers choose a country, triggering an animated bar chart update that displays population values across seven census years. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `transition().duration()` for smooth bar height and position changes. Data comes from a CSV file mapping countries to population figures from 1970 through 2022.

Loading thumbnail…

asg 2

This visualization displays a 2015 world map of internet users per 100 people, using data from a Kaggle dataset. Countries are shaded with a sequential green color scale based on percentage ranges, with hover tooltips showing exact values and a color legend at the left. The map uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoGraticule for rendering, while d3.zoom enables interactive pan and zoom with stroke-width adjustment. Missing data appears light gray, and hover states highlight countries in blue.

Loading thumbnail…

withoutlabel

The visualization displays graduate admissions across six departments, with counts grouped into four gender-outcome categories: male admit, male reject, female admit, and female reject. The data comes from the `admissions.csv` file and is rendered as a grouped bar chart using D3 v4 within a React application. The code uses `d3.nest()` to aggregate data, `d3.scaleBand()` for the categorical axes, and `d3.scaleOrdinal()` for color encoding. An interactive tooltip appears on mouseover, though mouseout behavior is not implemented. The chart includes axes and a legend, with bars drawn as SVG rectangles.

Loading thumbnail…

Untitled

This example shows the age distribution of populations across six U.S. states, with grouped bars for seven age brackets. It uses d3.csv to load the data, d3.scaleBand for the categorical axes, and d3.scaleOrdinal to assign colors to age groups. The SVG is rendered with React, and d3.axisBottom and d3.axisLeft generate the axes, while a manual legend maps color to each age range.

Loading thumbnail…

Untitled

A grouped bar chart displays population estimates for six U.S. states across seven age brackets, colored by age group via a categorical color scale. Using D3 v4, the visualization loads CSV data with `d3.csv`, employs `d3.scaleBand` and `d3.scaleLinear` for axes, and renders SVG rectangles for bars. A legend maps age ranges to colors, while axis labels and a title clarify the data. The chart is built with a `svg` element and D3’s selection, scale, and axis APIs.

Loading thumbnail…

withoutlabel

This example shows grouped bar charts of admission counts by department and gender, with male and female bars side by side for each department. The chart uses a steelblue style and compares counts across six academic departments. The code employs D3.js v4 to load CSV data, process it with `d3.rollups`, and render with `d3.scaleBand` and `d3.scaleLinear`. It generates SVG output, uses `d3.axisBottom` and `d3.axisLeft` for axes, and manually positions bars with a 40-pixel width for each gender.

Loading thumbnail…

Fork of Fork of Bar chart with a Sequential color scale

A horizontal bar chart displays the average horsepower of seven car brands, from Volkswagen to Mercedes-AMG, sorted in ascending order. Bars use a sequential color scale from the ColorBrewer Reds palette, rendered as SVGs via D3 v6, with a hover tooltip showing exact values. The code loads data from a CSV, applies `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize`, and uses the d3-legend library to generate a color legend.

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower for seven car manufacturers, sorted from lowest to highest, with a sequential red color scale encoding the same value. The visualization is rendered in SVG using D3 v6 and the d3-legend plugin, with a quantized color scale from colorbrewer. Hovering over a bar triggers a tooltip with the exact horsepower value. The chart includes labeled axes, a legend, and animated opacity transitions on the tooltip.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Each horizontal bar represents a country, with population values formatted in billions. The visualization uses React with D3 v5 scales (scaleBand and scaleLinear) for layout, and renders SVG rectangles. Axis components are custom-built, and a native SVG `<title>` element provides tooltips showing population values.

Loading thumbnail…

Fork of Grouped Bar Chart

This example shows the ten most populous countries grouped by continent as horizontal bar charts, with each continent displayed in a distinct band. The chart uses a linear x-scale for population and band scales for both continents and countries, rendering the bars as SVG rectangles via React components. The code loads CSV data with `d3.csv` and formats population labels with `d3.format`. Each continent’s chart includes axis labels, grid lines, and a zero line, all styled with the Noto Sans JP font.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This interactive stacked bar chart displays the estimated 2010 religious composition of the world's 20 most populous countries, sourced from Pew Research data. Each horizontal bar represents a country, with colored segments showing the population adhering to different religions. Users can hover over bars to see exact population numbers for each faith, or hover over the legend to highlight a single religion across all countries. The visualization is built with D3.js, utilizing its layout, stacking, axis, legend, and tooltip modules for rendering and interaction.

Loading thumbnail…

Fork of Green house gas bar chart

This bar chart displays 2019 greenhouse gas emissions for the top 11 GDP countries, using population data from a CSV file. Horizontal bars are rendered as SVG rectangles, with countries ordered along the y-axis and emissions scaled linearly on the x-axis. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and includes interactive tooltips that appear on mouseover, showing each country’s emission value in MtCO₂e.

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a bar chart of population by country for 2015, with countries sorted in descending order along the x-axis. It uses the Vega-Lite API to define the bar marks and encodings, and renders the visualization through a custom D3-based setup in `index.js` that loads data from a CSV URL via d3.csv. The chart leverages vega, vega-lite, and vega-lite-api libraries, with a custom dark-themed configuration for axes and labels, and automatically sizes itself to the full window.

Loading thumbnail…

Fork of D3 Starter

This example creates a static bar chart visualizing food-related data from an external CSV file. It uses D3 v7 scales and axes—`d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`—to map years and values, with y-axis labels formatted as dollar amounts. The chart is drawn inside an SVG with a fixed margin, and the data is loaded asynchronously via `d3.csv`. Only the axes are rendered; no bars or other marks are added.

Loading thumbnail…

week 3

This piece reproduces a Sol LeWitt wall drawing as an interactive web visualization. It displays a grid of alternating horizontal and vertical black-and-white stripes that intersect within two circular mask regions at the center of the screen. The code builds the artwork using raw SVG elements created via the `createElementNS` API, applying `mask` and `mask2` with circular cutouts to selectively reveal the stripe patterns. One hundred horizontal rectangles and one hundred vertical rectangles are generated programmatically, with each set clipped by a different mask to achieve the layered visual effect.

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This gallery example reproduces a Sol LeWitt-inspired piece using D3.js, displaying a sequence of German state abbreviations as bold, colored text and a horizontal row of red rectangles whose widths and positions are driven by numeric data. The visualization builds its SVG canvas and HTML elements entirely through the `d3.select` API, using methods like `.append`, `.enter()`, and `.attr()` to assign styling and layout. The code pairs explicit data arrays for both the text labels and rectangle dimensions, with conditional color logic applied to the text elements.

Loading thumbnail…

Untitled

This example reproduces a Sol LeWitt art piece using raw SVG primitives. It shows a static composition of geometric shapes: a blue square, a green circle, a purple ellipse, a diagonal gray line, and red text reading “SVG TEXT,” arranged horizontally. The rendering relies entirely on hand-coded SVG elements within an `index.html` file, using direct `<rect>`, `<circle>`, `<ellipse>`, `<line>`, and `<text>` tags, without any JavaScript or external libraries beyond the declared D3 dependency, which is not actually invoked. The visual output is a simple, flat, non-interactive illustration.

Loading thumbnail…

Fork of Marks and Channels

Fork of Marks and Channels demonstrates five distinct visual encodings for a dataset of indices 0 through 4: x-position, y-position, size, length, and shape, plus a final panel showing hue with `schemeCategory10`. Each panel renders as a separate SVG using `d3.select` and data joins via `.join()`. The code imports specific D3 APIs such as `symbol()` and `symbolsFill` for shape encoding, alongside basic `attr` assignments for positioning and scaling.

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG and JavaScript, creating a grid of alternating horizontal and vertical bands. Two circular masks reveal the layered strokes: the first mask exposes vertical strips within a centered circle, while the second inverts that region to show horizontal strips outside it. The code generates 100 rectangles per direction, each 10 pixels thick, using the `document.createElementNS` API and SVG `mask` elements to compose the visual interplay. The result is a clean, geometric abstraction that mimics the artist’s instructional art style.

Loading thumbnail…

SVG Fundamental

This example demonstrates the fundamental building block of SVG visualization: a single circle element rendered on an HTML page. The circle, positioned at coordinates (50, 50) with a radius of 500, fills an SVG canvas that is 960 pixels wide and 500 pixels high. The code uses raw SVG markup directly within an HTML document, with no external JavaScript or CSS libraries. It shows how SVG provides a declarative XML-based syntax for defining vector shapes, serving as the base layer for more complex data visualizations built with frameworks like React and tools such as VizHub.