ases1996

@ases1996·15 public vizzes

Bono MAP

This map shows the distribution of cities in Turkey, colored by region. The visualization uses a D3 geoEqualEarth projection and d3.geoPath to render the topojson features, with an ordinal color scale based on d3-scale-chromatic. A linked legend, built with custom SVG elements, allows users to filter regions by clicking, and the map supports pan and zoom via d3.zoom. The data comes from a CSV file of city-level analytics metrics.

Jun 4, 2020

Loading thumbnail…

Meyve Sepeti Üzerine Getirme

Five circles representing apples and lemons are rendered in an SVG bowl, with hovering highlighting the selected fruit via a black stroke. The visualization uses D3 v5’s `scaleOrdinal` for color and radius, and `.data()` with key functions to bind fruit objects. Transitions animate circle radius and position over 1000ms, while `mouseover` and `mouseout` events update the selection state. Over time, `setTimeout` triggers data changes: a fruit is removed, one apple becomes a lemon, and another is filtered out.

Jun 3, 2020

Loading thumbnail…

Meyve Sepeti Click

Five apples and a lemon are arranged in a row as colored circles that animate when clicked, with the selected fruit outlined in black. The visualization uses D3 v5 with a custom `fruitBowl` component, employing `scaleOrdinal` for color and radius mapping, and `.transition()` for smooth size and position updates. Data mutates over time—fruit removal and type changes—while the SVG renders the results.

Jun 3, 2020

Loading thumbnail…

Meyve Sepeti

This example shows a fruit bowl visualization where apples and lemons are rendered as colored circles inside a gray bowl. The scene updates over time, removing fruits and changing an apple into a lemon. The code uses `scaleOrdinal` for color and radius mapping, `selectAll` with data joins to manage entering and exiting elements, and SVG `<circle>` and `<text>` elements. Transitions are handled through `setTimeout` calls that modify the fruits array and trigger a re-render with the `fruitBowl` function.

Jun 2, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with a natural Earth projection, where countries are drawn as light green paths with a dark blue ocean background. Users can pan and zoom the map using a D3 zoom behavior, which applies a transform to the entire country group. The map data comes from the world-atlas TopoJSON and TSV files, processed with d3.geoPath and topojson.feature. Hovering over a country turns it red via CSS. The code explicitly uses d3.select, d3.json, d3.tsv, and d3.zoom to implement these interactions.

May 14, 2020

Loading thumbnail…

Bubble Chart

A bubble chart visualizes the relationship between impressions and clicks for various websites, with each black circle representing a site. The data, sourced from a CSV file, is plotted using D3 v5's `scaleLinear` for both axes, with `axisBottom` and `axisLeft` providing labeled tick marks and gridlines. The chart is rendered as an SVG, with circles positioned via `cx` and `cy` attributes, and a title displayed. The visualization focuses on raw counts rather than the derived CTR metric.

May 13, 2020

Loading thumbnail…

Bubble Chart

A bubble chart displays advertising performance metrics for Turkish websites, with impressions on the x-axis and website categories on the y-axis. Each rectangle's width encodes the impression count for that site. The visualization uses D3 v5 with `scaleLinear` and `scaleBand` axes, rendering SVG rectangles from CSV data loaded via `d3.csv`. Axis ticks are formatted with `d3.format` to display values in millions, and gridlines are generated through tick size adjustments.

May 12, 2020

Loading thumbnail…

Bubble Chart

This bubble chart visualizes website traffic data from a CSV file, mapping impression counts to bubble size and click rates to vertical positioning, with color indicating content categories. The visualization uses D3 v5’s `csv` method to load the dataset and renders bubbles as SVG circles within a fixed 960×500 viewport. The code imports `select` and `csv` from D3, though the current implementation only logs the parsed data to the console, leaving the chart rendering incomplete. The page structure includes an SVG element styled with CSS, with the final visualization intended to use D3’s data binding and scaling methods.

May 11, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes. Two dropdown menus allow users to select which columns map to the X and Y axes, enabling exploration of various attribute combinations. The visualization uses D3 v5 with `scaleLinear` scales, `axisBottom`, and `axisLeft` components to render the SVG chart. When menu selections change, the scatter plot updates with a staggered transition animation of circles using D3’s `.transition().duration(2000).delay()`.

May 11, 2020

Loading thumbnail…

GDN Websiteleri N Kolay Bono

This visualization displays Turkish websites’ click-through rates as horizontal bars, with each bar’s length representing CTR and its position along the y-axis ordered by click count. The bar height reflects the impression volume, creating a comparative view across news, entertainment, sports, and other categories. Built with React and D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart, while data from the CSV file is loaded via `csv()`. The rectangular elements are styled with steelblue fill, and the visualization is rendered using WebGL.

May 11, 2020

Loading thumbnail…

Barchart

A horizontal barchart displays the population of China, India, and the United States, with each country’s bar length proportional to its population value. The SVG chart is built using D3 v5, with `scaleLinear` mapping population counts to pixel widths and `scaleBand` positioning categories along the y-axis. Data is loaded from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. Bars are rendered as SVG `rect` elements, with a steelblue fill applied through CSS.

May 11, 2020

Loading thumbnail…

Let's make a Map!

This visualization renders a world map using the Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. The code loads GeoJSON data from the World Atlas TopoJSON file (110m resolution), converts it using the `feature` method from topojson, and draws the paths with `d3.geoPath` and `geoNaturalEarth1`. It demonstrates the classic D3 pattern of fetching external geospatial data, projecting it, and appending SVG paths to the canvas.

Apr 9, 2020

Loading thumbnail…

Let's make a face!

A yellow circle face is drawn with SVG in D3 v5, featuring two eyes, animated eyebrows, and a smile created with an arc path. The eyebrows transition vertically via chained `transition().duration()` calls, moving down and back up. The face is centered using a translated group element, with circles and rectangles positioned relative to eye spacing and offset constants. The code uses `select`, `arc`, and SVG attributes to construct the static facial features while the eyebrows animate independently.

Apr 9, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped using SVG transforms. It shows how fill colors, stroke properties, and class-based styling apply to geometric elements. The code also includes a React-free JavaScript section that loads car data from an inline JSON string, filters it by price, and displays matching entries as text. The SVG uses native elements like `<circle>`, `<rect>`, and `<path>` with a `scale` transform, while the data handling relies on a Promise-based delay and DOM text manipulation.

Mar 31, 2020

Loading thumbnail…

HTML Cars Report

This example presents a list of used cars, showing the year, make, model, and price, with entries priced under $2,000 highlighted in red. The page initially displays a static, hardcoded list of three vehicles, while a JavaScript promise, created with `new Promise` and a `setTimeout`, simulates a two-second data fetch. After the delay, the code parses the embedded `carsJSON`, filters it by price, formats each entry into a string, and writes the result to a `<pre>` element. The project uses React's starter `bundle.js` and a plain CSS stylesheet for styling.

Mar 31, 2020