Skip to main content
Log in
M

Mert Gürkan

@mertgurkan0·9 public vizzes

Loading thumbnail…

Scatter Plot

A scatter plot displays dummy data from a CSV file, mapping the numeric `value` field to the x-axis and the categorical `index` field to the y-axis, with circle size fixed and fill color transitioning from yellow to green based on value. Using D3 v5, the code employs `d3.scaleLinear` for both x and y scales, `d3.scalePoint` for categorical positioning, and `d3.axisBottom` with a `~s` format tick label for the value axis. Circles are rendered as SVG elements with a color scale, while the chart includes axis labels and a title.

Jun 16, 2021
Loading thumbnail…

choropleth map

This choropleth map shows global economic classifications by country, with a color legend that supports interactive highlighting. Using D3 v5 and topojson, it renders GeoJSON features through `d3.geoNaturalEarth1` and `d3.geoPath` onto an SVG, while a `scaleOrdinal` maps the discrete economy values to a `schemeSpectral` palette. Clicking a legend entry filters the map via opacity changes. The map fetches world-atlas TopoJSON and TSV data, with hover and zoom enabled through D3’s zoom behavior.

May 13, 2021
Loading thumbnail…

map interactions

This interactive map displays world countries with hover effects, highlighting each nation in red. The visualization uses the Natural Earth dataset for country boundaries, loaded from the world-atlas package via TSV and JSON files. Built with D3 v5, it employs geoNaturalEarth1 projection, geoPath for path generation, and the topojson feature function. The zoom interaction is implemented through d3's zoom and event modules, allowing users to pan and scale the map. Countries display names as tooltips by joining the TSV data with the geometry.

Feb 16, 2021
Loading thumbnail…

Bar Chart

A bar chart displays dummy data with nine index-value pairs, using a linear color scale for fill intensity so higher values appear darker blue. The chart renders bars in an SVG, with a quantitative x-axis and categorical y-axis, and includes titles and gridlines. The implementation uses d3.csv to load data, d3.scaleLinear for both the color interpolation and x-axis domain, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom with tick formatting for readable labels.

Feb 16, 2021
Loading thumbnail…

scatter plot w/ menu

This interactive scatter plot displays relationships between pairs of variables from the auto-mpg dataset, with dropdown menus allowing users to select which columns appear on the x- and y-axes. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and SVG circles with a staggered transition.animation when selections change, delaying each circle's update by 10 milliseconds for a cascading effect. Custom dropdown menu components manage the column selection, and the data values are parsed to numeric types before rendering.

Jul 20, 2020
Loading thumbnail…

click and hover to select

A bowl of fruit demonstrates selection and dynamic updating. Apples and a lemon are shown as circles with radii and colors mapped via `d3.scaleOrdinal`. Clicking or hovering over a fruit triggers a callback that updates a `selectedFruit` ID, adding a black stroke to the selected item and clearing it on mouse-out. The `bowl` function uses SVG `<circle>` and `<rect>` elements, with `transition().duration(750)` animating position and radius changes when the fruit array is modified over time.

Jul 17, 2020
Loading thumbnail…

d3 enter/update/exit patterns

This example demonstrates the classic D3 enter/update/exit pattern for animating changes to a dataset. Over a timed sequence, fruits are removed, a lemon replaces an apple, and another item is filtered out, all while the visualization smoothly transitions the circles' positions and radii. The code uses D3's selection `merge` and `.transition().duration()` methods to animate attribute changes, with `circles.exit()` shrinking departing elements to a radius of zero before removing them. The scene is rendered as SVG with a static bowl rect, and data is generated randomly with a color scale mapping fruit types.

Jul 15, 2020
Loading thumbnail…

Line Chart

This line chart depicts temperature changes over time in San Francisco, with a smooth curve and a shaded area beneath it. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `line`, and `curveBasis` to render SVG paths. Data is loaded from a CSV file containing timestamp and temperature values, with axes labeled "Time" and "Temperature" and a title "Temperature in Time."

Jul 14, 2020
Loading thumbnail…

moodchange

This example shows a yellow smiley face that transitions from a neutral to a changed mood over two seconds. The eyes and mouth shift downward while the entire SVG rotates 180 degrees, creating a visual mood change. Built with React and D3 v5, the code selects an SVG element and uses `arc()` for the mouth path and chained `transition().duration()` calls to animate the eye group, mouth transform, and overall rotation. The rendering approach uses SVG with animated attribute changes.

Jul 8, 2020