JuliaHsu

@JuliaHsu·5 public vizzes

D3-SVG

This example demonstrates data binding in D3 by joining a dataset of five named scores to SVG circles and rectangles. The code uses `d3.selectAll` and `.data()` to bind the array to circle elements, dynamically adjusting their radius and fill color based on score values and parity. It then appends a new SVG with `rect` elements and text labels, using `.enter().append()` to create bars whose width reflects each score and displaying names and values alongside them. D3 v5 and SVG rendering are used throughout.

Mar 13, 2021

Loading thumbnail…

D3 - Function of data

This example demonstrates how D3 binds an array of five objects—each containing a name and score—to SVG circles, using the data to set each circle’s radius and fill color. The code explicitly calls `d3.selectAll('circle').data(scores)` to join the data, then uses anonymous functions within `attr` and `style` to map scores to radii and to alternate green and red fills based on score parity. It also appends a semi-transparent red rectangle to a new SVG via `d3.select('body').append('svg')`. All rendering uses SVG elements and D3 v5 selections.

Mar 13, 2021

Loading thumbnail…

Hello d3js

This example demonstrates basic DOM selection and manipulation with D3. It binds an array of score data to five SVG circles and uses `d3.select` and `d3.selectAll` to modify their attributes dynamically. The code applies styles like `fill` and `radius` through `.style` and `.attr`, including random radii and vertical offsets. A separate message div is updated with `d3.select('#message').text()`, while the third circle receives a CSS class via `.classed()` to highlight it.

Mar 13, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes by selecting X and Y axes from dropdown menus. Built with D3 v5, it uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Circles animate from the center using `transition().duration(2000)` when data changes. The data comes from UCI’s Machine Learning Repository, and the visual encoding uses SVG circles with opacity.

Mar 12, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a minimal React + D3 visualization starter template, showing a blank SVG canvas with visible margins. The code combines React 16.13.1 and D3 v6.2.0 via CDN links, using a `VizContainer` component that abstracts SVG and group elements following the margin convention. The component renders gray outer and inner rectangles when `showMargins` is true, with the main visualization area translated according to specified margin values. The example establishes reusable boilerplate with variables for dimensions and margins, ready for adding custom D3 visualizations.

Mar 12, 2021