Enes Gök

@enesgokk·7 public vizzes

legend date

This scatterplot displays daily GrossAmount values over time, with each point colored by its price category through a categorical ordinal scale. The visualization includes an interactive color legend that highlights points matching the hovered value while fading others. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map date, price, and color encodings, rendering circles as SVG marks. Data comes from NOAA, loaded via `d3.csv`, with axes generated by custom `AxisBottom` and `AxisLeft` components.

Dec 2, 2021

Loading thumbnail…

legend mark

This example visualizes SPAC investment data as an interactive scatter plot, showing the relationship between current price and annualized return for various companies. Each point is colored by sector and sized by market cap, with a color legend on the right. Hovering over a legend item highlights the corresponding sector’s points while fading others, using React state and `onMouseEnter` handlers. The chart is rendered with SVG via D3 scales (`scaleLinear`, `scaleOrdinal`, `scaleSqrt`) and React components, reading CSV data through `d3.csv`.

Dec 2, 2021

Loading thumbnail…

horcepower legend highlight

A scatter plot of financial data displays GrossAmount over Date, with each point sized by GrossAmount and colored by Name. Hovering over a legend entry highlights only the corresponding data points while fading the rest to 20% opacity. The visualization is built with React, D3 v5 scales (`scaleLinear`, `scaleOrdinal`, `scaleSqrt`), and SVG rendering, using CSV data from a GitHub gist.

Dec 2, 2021

Loading thumbnail…

horsepower legend

This scatter plot visualizes the relationship between miles per gallon (mpg) and horsepower for various car models, with points colored by their country of origin. The visualization uses the Vega-Lite API, built on Vega and D3, to render an interactive SVG chart. Data comes from the UCI Machine Learning Repository's Auto MPG dataset. Tooltips display additional attributes like weight when hovering over individual data points. The chart is configured with custom axis styling and a dark color scheme for improved readability.

Dec 2, 2021

Loading thumbnail…

horsepower

A scatterplot shows gross sales amounts over time for a vacuum cleaner product, colored by currency code. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render the chart as an SVG. It loads CSV data from a GitHub gist via d3.csv, with circles sized at 200 pixels and 10% opacity to reveal overlapping points. Axes are customized through a config object, and tooltips display the currency code on hover.

Dec 1, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API template to create a scatter plot of auto-mpg dataset attributes. It visualizes the relationship between engine displacement and horsepower, with vehicle name as a tooltip. The visualization configures axis styling and dark guide colors for readability, and loads data from a CSV URL using the `csv` function from D3. The code leverages the Vega-Lite API (`vl.markPoint`, `vl.x`, `vl.y`, `vl.tooltip`) to define the marks and encodings, rendered as an interactive SVG with the Vega tooltip handler.

Dec 1, 2021

Loading thumbnail…

Fork of HTML Starter

This example uses React to render three static SVG circles on a 960×500 canvas, composing a simple face-like illustration. The code loads React and ReactDOM from UMD bundles via unpkg, then uses JSX to define SVG elements with attributes like `cx`, `cy`, and `r` for positioning and sizing. The HTML page includes a `<style>` block (currently empty) and a `bundle.js` script reference, though no dynamic behavior or data is demonstrated—the visualization is purely declarative and static.

Nov 30, 2021