Hojjat Karami

Fork of Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions for a fruit bowl, where apples and lemons appear, disappear, and change type with smooth updates. Five circles initially render as apples; clicking highlights a fruit with a black stroke, while timed updates remove the last apple, convert the third apple to a lemon, and filter out the second fruit. The visualization uses D3 v5 with the `fruitBowl` module, leveraging `selection.data()` with key functions, `transition().duration()` for enter, update, and exit animations, and ordinal scales for color and radius. SVG shapes are bound to data, with mouseover and mouseout events triggering selection changes.

Apr 14, 2023

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js, showing how data joins handle entering, updating, and exiting elements as a fruit bowl changes over time. Five apples are rendered initially, then an apple is removed, another is replaced by a lemon, and a second apple is deleted. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` with `transition()` to animate position changes and radius adjustments, while scaleOrdinal maps fruit types to colors and sizes. SVG circles and text labels update accordingly, with exiting elements fading out through a transformed transition before removal.

Bowl of grute, General update pattern

D3.js animates a bowl of fruit where apples and lemons appear, disappear, and change type over time. The general update pattern uses `selection.data`, `enter`, `merge`, and `exit` to handle circles and text labels, with `transition.duration(1000)` scaling radii. A linear scale positions items along the x-axis, while ordinal scales map fruit types to colors and sizes. Random IDs track each fruit through updates.

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates D3’s general update pattern for changing data arrays, showing how to add, remove, and modify elements in an SVG scene. Five apples are initially drawn, then one is removed, one is replaced by a lemon, and another apple is deleted, with each change re-rendering the bowl. The code uses D3’s `select`, `selectAll`, `enter`, `merge`, and `exit` methods to handle node creation, updating, and removal, alongside `scaleOrdinal` for color and radius mapping. The scene renders in SVG with circles and text labels, driven by timed `setTimeout` calls.

Fork of Cars Scatter Plot

This fork of the Cars Scatter Plot visualizes temperature in San Francisco over time, using a smooth line chart instead of points. The code imports D3 v5 modules including `select`, `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. It loads data from a CSV file hosted on VizHub, parses temperature as numbers and timestamps as dates, then draws axes with tick marks and labels. The dataset originates from the UCI Machine Learning Repository’s Auto MPG set, though the plotting logic here applies it to weather readings.

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The SVG rendering shows temperature in Celsius over time, with a smooth curved line generated using D3's `line` generator with `curveBasis`. The chart employs `scaleTime` and `scaleLinear` for the axes, which include gridlines and rotated labels. Data is loaded via `csv` and parsed into `Date` and numeric values before being passed to the render function.

Temperature in SF

This example presents a scatter plot of the Auto MPG dataset, showing each car’s horsepower against its weight. The visualization uses D3 v5 to scale the data with `scaleLinear`, draw axes with `axisLeft` and `axisBottom`, and render circles for each data point in an SVG. The plot also includes labeled axes, a title, and a grid created by tick lines. Data is loaded via `csv` from the UCI Machine Learning Repository.

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG data set. Red, semi-transparent circles represent individual cars, revealing the general trend and density of data points across the two quantitative axes. The visualization is built with D3 v5, using an SVG rendering approach. The code constructs linear scales for both axes, applies nice rounding, and renders grid lines through D3's axis generators, with labels applied via text elements.

Mar 30, 2023

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized, including tick formatting, removal of axis lines, and addition of axis labels. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom with custom tick formatting that converts units from billions to millions. SVG rendering with CSS styling for fonts and colors is employed.

Mar 30, 2023

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. The visualization demonstrates customized D3 axes, including a formatted x-axis that converts values to billions and a y-axis with removed domain and tick lines. Built with d3.v5, the chart uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, rendering via SVG. Bar widths are mapped to population values, and the chart includes a title and axis label with custom styling from the included CSS.

Fork of Responding to Resize

This example demonstrates a responsive SVG visualization that adapts to its container’s size by drawing a large green X across the full viewport. The chart fills the page via CSS positioning, and a JavaScript `redraw` function reads the container’s `clientWidth` and `clientHeight` on every window resize event. Using D3 v5, it binds an array of two line coordinates to SVG `line` elements, updating their endpoints and stroke properties dynamically. The code explicitly sets the SVG’s width and height attributes to match the measured dimensions, ensuring the graphic always spans the available space.

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes. A yellow circle forms the head, with black circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate upward and downward via chained `transition().duration()` calls, moving their containing group’s `transform` attribute over two seconds. The code uses D3 selections, `attr()`, and `append()` to construct elements, alongside the `arc()` generator from D3’s shape module.

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of SVG shapes—circles, rectangles, lines, and a path—arranged and styled with CSS. The visualization shows how basic geometric primitives can be grouped, transformed, and colored, with some shapes inheriting fill and stroke properties from parent `<g>` elements while others are set directly. The code uses raw SVG attributes like `translate` and `scale` for positioning, and CSS classes (`.lines`) to apply stroke styling to line and path elements. It renders entirely in SVG with no external data or JavaScript libraries.

Fork of D3 Starter

A minimal D3 starter example displays the text “Hello D3 version 7 df” in the center of the page, replacing the paragraph’s original content. The visualization uses D3 v7’s `select` API to target the `body` element and set its text content. The page loads D3 from the unpkg CDN and runs the script from `bundle.js`, with oversized font styling applied via CSS. This demonstrates the basic setup for beginning a D3 project, showing how to select an element and modify it with data-driven JavaScript.