RITUZZ

@RITUZZ·13 public vizzes

cse564 lab-1

This example reads a credit card customer dataset from a CSV file using `d3.csv` and renders a bar chart using D3 v6 with SVG. The code defines linear and band scales (`scaleLinear`, `scaleBand`) and axes (`axisLeft`, `axisBottom`) but the rendering logic is commented out, so the visualization currently only loads the data and logs it to the console. The chart is intended to display a categorical variable against a numeric value, with steelblue rectangles for bars.

Feb 25, 2021

Loading thumbnail…

interactive world map with d3

This interactive world map displays country outlines colored in light green over a blue sphere, with hover highlighting in red. It utilizes D3 v6’s `geoNaturalEarth1` projection and `geoPath` to render the map, while TopoJSON loads geographic data from the world-atlas package. Zooming is enabled via `d3.zoom`, and country names are joined from a TSV file. The visualization renders as SVG elements.

Jan 29, 2021

Loading thumbnail…

world map with d3

A world map rendered in SVG shows country boundaries and a stylized ocean using a natural Earth projection. The visualization loads GeoJSON country data from the world-atlas dataset and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. A sphere outline is drawn as a separate path, while countries are filled with light green and outlined in black. The code imports `d3.json`, `select`, and `geoPath` from D3 v6, and uses `topojson.feature` to convert TopoJSON regions into drawable features.

Jan 28, 2021

Loading thumbnail…

hover to select d3

This example demonstrates an interactive fruit bowl visualization where hovering over circles selects them, highlighting the chosen fruit with a black stroke. The code loads D3 v6 via UNPKG and uses local ES6 modules, with `fruitBowl.js` defining a reusable chart function that leverages `scaleOrdinal` for color and radius mapping. Data comes from `data.csv`, though the visualization primarily uses generated fruit objects. SVG circles transition smoothly between states using `transition().duration(1000)`, while mouse events trigger state changes and re-rendering. The example also shows enter, update, and exit selections as fruits are dynamically removed or modified over time.

Jan 28, 2021

Loading thumbnail…

click to select d3

Click-to-select interactions drive a dynamic fruit bowl visualization built with D3 v6 and SVG. Fruit circles render from local data using d3.scaleOrdinal for color and radius, with transitions animating entries, exits, and type changes over time. Clicking a fruit toggles a black stroke via a callback, while d3.select and data joins manage updates. The example loads D3 from UNPKG and demonstrates modular ES6 imports for reusable chart components.

Jan 28, 2021

Loading thumbnail…

Fork of General update d3

This example demonstrates D3's general update pattern for animating changes to a data-driven visualization. A fruit bowl renders apples and lemons as scaled circles with colors, and a timed script modifies the data array by removing items and changing an apple to a lemon, triggering exit, update, and enter transitions. The code imports `select`, `range`, and `scaleOrdinal` from D3 v6, and uses SVG rendering within an HTML page. Data comes from a local CSV, though the visualization itself uses inline generated fruit objects.

Jan 28, 2021

Loading thumbnail…

General update d3

This example demonstrates D3’s general update pattern for animating SVG circle elements as data changes. Five circles representing fruits appear, with apples and lemons distinguished by color and size via an ordinal scale. The visualization removes and modifies elements over time through three timed steps, using D3’s selection, merge, and transition methods to smoothly animate position, radius, and fill. Data is loaded from a local CSV file, and the code imports D3 functions and a custom ES6 module.

Jan 28, 2021

Loading thumbnail…

scatterplot using d3

A scatterplot displays name-number pairs from a local CSV file, mapping names to the y-axis and numeric values (scaled by 1000) to the x-axis using d3.scalePoint and d3.scaleLinear. Circles are rendered via SVG with fixed radius and semi-transparent steelblue fill. The code imports d3 functions like select, csv, and axisBottom, and includes a formatted x-axis with tick size and a custom text label, demonstrating basic D3 v6 data binding and margin-based layout.

Jan 27, 2021

Loading thumbnail…

barchart customization using d3

This example demonstrates a customizable bar chart using D3 v6, rendering data from a CSV file as SVG rectangles. It uses `d3.scaleLinear` and `d3.scaleBand` to map numeric values and categorical names, with `d3.axisLeft` and `d3.axisBottom` for labeled axes. The chart features a formatted tick scale via `d3.format`, a customized grid with removed domain lines, and styled bars with steelblue fill. The code imports specific D3 functions and applies margins, padding, and axis labels to produce a polished visualization.

Jan 27, 2021

Loading thumbnail…

csv using d3

This example displays a bar chart of categorical data from a CSV file, mapping names to numbers. It loads D3 v6 via UNPKG and an external CSV, parsing the data with `d3.csv` and `+` conversion. The chart uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` with `d3.max` for the x-axis, rendered entirely as SVG elements. `d3.axisLeft` and `d3.axisBottom` generate the axes, while D3 selection API appends the rectangles.

Jan 26, 2021

Loading thumbnail…

d3 intro

A D3.js example renders an SVG scene of a large yellow circle, flanked by two smaller outlined circles, against a brown background. The visualization demonstrates basic SVG shape construction and styling through the D3 API, using methods like `append`, `attr`, and `style` to set geometry, fill, stroke, and layout properties. It reads width and height attributes from the SVG element and positions shapes relative to those dimensions. The page loads D3 from UNPKG and imports `select` and `csv` from the local script. A static CSV data file is present but not used in the displayed scene.

Jan 25, 2021

Loading thumbnail…

intro to d3

This example demonstrates basic SVG shape rendering and styling within an HTML page, displaying circles, rectangles, lines, and paths at fixed coordinates. The visualization loads D3.js via UNPKG but primarily relies on raw SVG elements with presentation attributes for colors, strokes, and transforms. A stylesheet defines the SVG path's green stroke and stroke-width through CSS classes. The example serves as a minimal introduction to combining SVG markup with imported JavaScript libraries and external CSS, though it does not yet showcase D3's data-binding or dynamic layout capabilities.

Jan 24, 2021

Loading thumbnail…

shapes using svg

This example displays a static SVG canvas containing basic geometric shapes: a blue circle, a green rectangle, a black line, and a green path. It demonstrates how to define shapes directly in HTML using SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with styling applied through an external stylesheet. The visualization uses no JavaScript libraries, relying purely on inline SVG attributes and CSS classes such as `.patth` to set stroke properties, while the root `<svg>` element is sized to 1000 by 1000 pixels.

Jan 24, 2021