Majaha21

Fork of Scatter Plots with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which columns to plot on the x- and y-axes via dropdown menus. The chart renders as an SVG with axes and gridlines, and circles animate into position using D3 transitions with staggered delays. The implementation uses d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft, with a custom dropDownMenu component managing the select elements.

May 24, 2021

Scatter Plots with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, plotting horsepower against a user-selected x-axis column via a dropdown menu. Built with D3 v6 and SVG, it uses scaleLinear, axisBottom, axisLeft, and d3.csv to render points. The dropDownMenu module triggers re-renders dynamically when the selection changes, updating the x-scale and axis accordingly. The visualization includes grid lines, axis labels, and a title, with styling applied through an external CSS file.

May 11, 2021

Fork of Choropleth Map

This choropleth map colors world countries by economic grouping, using a spectral color scale with a custom legend. The visualization reacts to user zoom and pan gestures, redrawing country boundaries through D3’s `geoPath` and `geoNaturalEarth1` projection. Country data merges TSV attributes with TopoJSON geometry via `topojson.feature`, and hovering any country highlights it in red, while a tooltip shows its name and economic category. The project relies on D3 v5’s `scaleOrdinal`, `schemeSpectral`, and the `zoom` event helper for interactivity.

May 8, 2021

Choropleth Map

A choropleth map colors countries by economic category using an ordinal color scale with a spectral palette. The visualization loads world geometry and country metadata from the world-atlas TopoJSON and TSV files, rendering paths with `d3.geoPath` and a Natural Earth projection. Users can pan and zoom via `d3.zoom`, while a custom legend built with D3 selections displays color categories as circles and text. Hovering highlights a country in red, and tooltips show each nation's name and economy type.

May 8, 2021

Fork of Fork of Choropleth Map

This choropleth map colors countries by their economy classification using a spectral color scale, with hover highlighting and a circular legend showing the categorical values. The visualization loads world topology from the world-atlas TopoJSON dataset and joins it with TSV metadata. Built with D3 v5, it uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering SVG paths, `d3.zoom` for pan and zoom, and `d3.scaleOrdinal` with `schemeSpectral` for color mapping.

May 6, 2021

Fork of Choropleth Map

This choropleth map visualizes countries colored by their economic classification, using colors from the D3 `schemeSpectral` scale. The map is rendered as SVG paths generated with `geoPath` and the `geoNaturalEarth1` projection, with country data loaded from the world-atlas TopoJSON and TSV files. A legend built with D3's `scaleOrdinal` and `selectAll` shows the color categories, while pan and zoom interactions are handled through `d3.zoom`. Hovering a country highlights it in red and reveals its name and economic group in a tooltip.

May 6, 2021

Choropleth Map

This choropleth map displays the world’s countries, each filled with a light green color that turns red on hover, while the ocean remains blue. It uses D3 v5 and TopoJSON to load world-atlas data, combining a TSV file for country names with a JSON topology for geographic boundaries. The map is rendered with an SVG using a natural Earth projection via `d3.geoPath`, and interactive panning and zooming are enabled through `d3.zoom`.

May 4, 2021

Fork of Color and Size Legends

This example demonstrates reusable legend components for both ordinal color scales and quantitative size scales. The color legend renders colored circles with labels for fruit categories, while the size legend displays circles scaled by magnitude using a square-root scale. Both legends are implemented as custom D3 functions that bind data to SVG groups, using `selection.enter()` and `selection.merge()` for updates. The code utilizes `d3.scaleOrdinal`, `d3.scaleSqrt`, and `scale.ticks()` to generate tick values for the size legend.

May 4, 2021

Color and Size Legends

Two legends created with D3 v5 are rendered as SVG. The color legend uses a categorical ordinal scale to map fruit categories to colored circles. The size legend uses a square-root scale to map data ticks to circle radii, with a reversed tick order to display larger values first. Both legends are built dynamically using D3's selection and merge APIs within `colorLegend` and `sizeLegend` functions.

May 4, 2021

Fork of World Countries Trees

This visualization displays the hierarchical structure of world countries, organized by continent and subregion using a tree layout. The data is loaded from a JSON file and rendered as an SVG with horizontal links connecting parent and child nodes. Using D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` functions, the code positions labels with font sizes decreasing by depth and includes zoom functionality via `d3.zoom`. Country names are styled with a Playfair Display serif font, and the visualization fills the entire browser window.

Apr 30, 2021

World Countries Trees

This visualization presents the hierarchical structure of world countries, organized by continent and region, as an interactive tree diagram. The layout uses a horizontal tree with curved links, and text labels sized by depth. The visualization supports pan and zoom via `d3.zoom`. The data is loaded from a JSON file and rendered with `d3.hierarchy` and `d3.tree`, using `d3.linkHorizontal` for the connecting paths.

Apr 29, 2021

Fork of World Countries Trees

This visualization displays a hierarchical tree of world countries organized by continent and region, using a horizontal dendrogram layout. The code loads structured geographic data from data.json and employs d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates the connecting paths rendered as SVG elements. The visualization demonstrates basic D3.js DOM manipulation by appending path elements to an SVG canvas sized to the viewport.

Apr 29, 2021

Blank Canvas

This example shows a blank, rounded rectangle filling the browser window as a simple canvas. It demonstrates fundamental DOM manipulation and SVG creation using D3.js v5. The code calculates the width and height from the document body, sets the SVG element's size accordingly, and appends a rectangle with a defined corner radius. Using the `select` function and chained `attr` and `append` methods, it illustrates how to build and style SVG shapes entirely through D3’s programmatic interface.

Apr 29, 2021

Fork of Cheap tricks for interaction

This example shows a world map rendered with SVG paths that change color on hover. It demonstrates basic DOM manipulation and interaction using D3.js, with a natural Earth projection and zoom behavior. The code loads world atlas TopoJSON and TSV data from unpkg, converts the TopoJSON to GeoJSON using `topojson.feature`, and uses `d3.geoPath` for rendering. Zooming is handled via `d3.zoom`, and country names appear as SVG `<title>` tooltips.

Apr 26, 2021

Blank Canvas

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows move. The visualization uses d3.select to attach an SVG canvas, then appends a rounded rectangle as the background. The face itself is constructed through basic SVG shapes, with interactive eyebrow animation driven by D3’s selection and attribute methods. Rendered entirely in SVG, the code highlights how D3 simplifies creating and updating visual elements. The interaction relies on D3’s event handling to trigger the eyebrow motion, showcasing core principles of data-driven document manipulation.

Apr 26, 2021

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

This visualization employs D3.js v5 and TopoJSON to render a world map on an SVG canvas. The map uses the Natural Earth dataset loaded from the `world-atlas` package, with country boundaries drawn as SVG paths using the `geoNaturalEarth1` projection and `geoPath` from D3. Countries are filled in light green with black outlines, while the surrounding sphere is filled blue. The code demonstrates DOM manipulation by selecting the SVG element, appending a sphere path, and then adding country paths after asynchronously fetching the geographic data.

Fork of HTML Starter

This example shows a minimal HTML page displaying the static text “Hello HTML” in large, centered type. The page includes inline CSS for styling and a small JavaScript snippet that logs “Hello JavaScript!” to the browser console, demonstrating basic script execution. It uses no external libraries or data sources, relying solely on the native DOM and console API for its simple visual and interactive output.

Bowl of fruit - Click to select

Five apples appear in a bowl and are visually selected by a black outline when hovered. Animations remove one apple, change a second to a lemon, and remove another, with all changes occurring over timed intervals. The D3 v6 code uses `select`, `range`, `scaleOrdinal`, and SVG `circle` elements with chained `.transition()` calls to animate radius and position, while `mouseover` and `mouseout` events trigger a `setSelectedFruit` callback.

Fork of Bowl of fruit - Hover to select

This example shows a bowl of five fruit represented as animated SVG circles. Each circle is colored and sized by its type—apples are red and large, lemons are yellow and small—using `d3.scaleOrdinal` for both color and radius. The visualization responds to user clicks: clicking a fruit highlights it with a black outline, and the fruit bowl changes over time as fruits are removed or replaced. The animation uses D3 v6 transitions to shrink exiting fruits and grow entering ones.

Animated Bowl of fruit - General Update Pattern

A bowl of fruit animates through the general update pattern as apples are eaten, replaced with lemons, and removed. The example demonstrates D3's enter, update, and exit selections with SVG elements, using `scaleOrdinal` for color and radius mapping. The code shows data joins on `<g>` groups, appending circles and text, while transitions are triggered by `setTimeout` to modify the fruit array and re-render.

Fork of Fork of Bowl of fruit - General Update Pattern

A bowl of fruit rendered in SVG demonstrates the general update pattern for data joins in D3. Apples and lemons, encoded with D3 ordinal scales for color and radius, are added and removed over time via timed `setTimeout` callbacks. The code uses `selection.enter`, `selection.merge`, and `selection.exit` to handle entering, updating, and exiting groups, while appending circles and text elements inside each group. The bowl itself is a static rectangle with rounded corners.

Fork of Bowl of fruit - General Update Pattern

A demonstration of D3's general update pattern shows a changing bowl of fruit, where apples are removed, replaced by lemons, or eaten over time. The visualization displays each fruit as a circle with a label, using ordinal scales for color and radius to distinguish types. The code applies incremental updates to SVG groups via D3's selection merge and exit methods, orchestrating changes with `setTimeout` calls to trigger sequential state changes. The example is built with D3 v6 and renders to SVG.

Apr 13, 2021

Fork of World Population Area Chart

This area chart visualizes world population growth over time, using a maroon filled area with a thick stroke to emphasize the upward trend. The chart includes labeled axes for time and population, with population values formatted in billions. Built with D3 v6, the visualization uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth area path from CSV data. Axis labels and tick formatting are applied via `axisBottom` and `axisLeft`, with population data sourced from a 2015 world population dataset.

Apr 10, 2021

World Population Area Chart

This area chart shows world population growth over time, using a maroon filled path to emphasize the change in total population from historical data through 2015. The visualization loads data from a CSV file and renders it as an SVG using d3.scaleTime, d3.scaleLinear, d3.area with a curveBasis interpolation, and d3.axisBottom/axisLeft with custom tick formatting that converts values to billions. The chart includes labeled axes for time and population, with a title at the top.

Apr 10, 2021

Temperature in San Francisco Line Chart

This line chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using a smooth curved line. The visualization is rendered as an SVG using D3 v6, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and axis components from `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file via D3’s `csv` method, with timestamps parsed as dates and temperatures as numbers. Grid lines and axis labels are styled through CSS classes, and the chart includes a title and custom margins.

Apr 8, 2021

Temperature in San Francisco Scatter Plot

This scatter plot displays temperature readings throughout a week in San Francisco, with time on the x-axis and temperature on the y-axis. Purple, semi-transparent circles reveal each data point. The visualization uses d3.scaleTime and d3.scaleLinear to map data values to SVG coordinates, with d3.axisBottom and d3.axisLeft generating the labeled axes. Data is loaded asynchronously from a CSV file using d3.csv, and the axes include custom tick sizing and grid lines.

Apr 8, 2021

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a collection of cars, with each car represented as a red, semi-transparent circle. The visualization uses D3.js (v6) to load the auto-mpg dataset via `d3.csv`, parse numerical values, and render the chart as an SVG. Linear scales from `d3.scaleLinear` map weight and horsepower to x and y coordinates, while `d3.axisBottom` and `d3.axisLeft` generate the axes with gridlines. Axis labels and a title are added as text elements, and CSS styles the circles, ticks, and labels for visual clarity.

Fork of Scatter Plot

This visualization shows the ten most populous countries as a dot plot, with population on the x-axis and country names on the y-axis, using D3 v6’s `scaleLinear` and `scalePoint` to map data. It is rendered as SVG, loading population data from a CSV file, and employs `axisBottom` and `axisLeft` to draw gridlines and labels, styling text via CSS.

Customizing Axes

This example displays the populations of the top ten most populous countries as a horizontal bar chart. It customizes the axes by removing the default domain lines and using a custom tick format that converts large numbers into abbreviated forms like “B” for billions via D3’s `format` function. The bar chart is rendered with SVG, using `d3.scaleLinear` and `d3.scaleBand` for the x and y scales, `d3.axisBottom` for the x-axis, and `d3.axisLeft` for the y-axis. Data is loaded from a CSV file.

Fork of Customizing Axes

This example displays a horizontal bar chart of the populations of the ten most populous countries, using data from a CSV file. The chart ranks countries from largest to smallest, with bars colored steelblue and clear axis labels. It uses D3 v6 APIs such as `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The code customizes axes by removing domain lines, adding grid lines, and formatting tick labels to show values in billions.

Customizing Axes

This example shows a horizontal bar chart ranking country populations, with a linear x-axis and a categorical y-axis. D3’s `scaleLinear` maps population values to bar widths, while `scaleBand` positions the country labels with padding. Axes are generated using `axisBottom` and `axisLeft`, with tick labels formatted via `format('.3s')` to display compact numbers like “1.41M”. The chart updates from a CSV file, which the code loads with `d3.csv` and multiplies each population value by 1000.

Fork of Making a Bar Chart

This horizontal bar chart displays population figures for ten countries, with each bar’s length proportional to the population value from a CSV file. The visualization uses D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and SVG `rect` elements for bars. Data is loaded asynchronously via `d3.csv` and multiplied by 1000 before rendering. Axes are generated using `axisLeft` and `axisBottom`, with margins applied through a translated group element.

Fork of Making a Bar Chart

Making a Bar Chart

This example shows a bar chart of country populations using data from a CSV file, with bars displayed as fixed-size steelblue rectangles in an SVG canvas. The code begins by loading and parsing the CSV data, converting population values to numbers, then uses D3 v6 modules including `select`, `csv`, `scaleLinear`, `max`, `scaleBand`, `axisLeft`, and `axisBottom` to structure the visualization. However, the current rendering only appends rectangles of constant width and height, without binding the population values to bar dimensions or adding axes, leaving the chart incomplete.