Lidiamir

@Lidiamir·10 public vizzes

Teste with D3.js!

This example shows a system map rendered as SVG rectangles, each representing a unit and positioned vertically. Circular system nodes would be placed within these units, though the code currently contains commented-out logic for this. The visualization uses D3.js v6 to bind the `unidades` data to `<rect>` elements via `selection.selectAll('rect').data()`, with the `mapaSistemas` function handling the rendering. The data structures for `sistemas`, `projetos`, and `repositorios` are defined but not yet visualized; only the rectangular unit containers are drawn.

Mar 19, 2021

Loading thumbnail…

Click to select with D3.js!

This example displays a world map using an equirectangular projection, with each country rendered as a green SVG path with a black stroke. The data is loaded from the world-atlas TopoJSON dataset and converted to GeoJSON features via `topojson.feature`. The visualization relies on D3 v6’s `d3.json`, `d3.geoEquirectangular`, and `d3.geoPath` to generate the map geometry, and appends all paths to the SVG container at once. No click interaction or selection behavior is implemented beyond the title’s suggestion.

Mar 18, 2021

Loading thumbnail…

Fork of Hover to select with D3.js!

A fork of the classic "hover to select" D3.js example animates a row of fruit shapes that respond to mouse interaction. Five apples appear, with hovered fruit highlighted by a black outline; clicking away clears the selection. The visualization demonstrates data joins, updating an SVG circle’s radius and fill via `transition().duration(1000)`. It uses `d3.scaleOrdinal` for color and size, with timed mutations removing and replacing fruit to show enter, update, and exit transitions.

Mar 18, 2021

Loading thumbnail…

Click to select with D3.js!

Five fruit circles animate into a bowl, each colored by fruit type via a d3.scaleOrdinal color scale. Clicking a circle selects it, giving it a black stroke, while transitions update positions and radii. The example demonstrates data joins with selection.data, enter/merge/exit patterns, and d3.transition for smooth updates, including removal and type changes timed with setTimeout.

Mar 18, 2021

Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in and out of an SVG bowl as apples are eaten and one apple transforms into a lemon. The example demonstrates D3.js v6 data joins with enter, update, and exit selections, using `scaleOrdinal` for color and radius, and `transition().duration(1000)` to smoothly resize and remove circles. `setTimeout` triggers sequential state changes, showing how reusable chart functions like `fruitBowl` respond to changing data arrays.

Mar 16, 2021

Loading thumbnail…

Apples and Lemon with D3.js!

A live D3.js visualization renders a bowl of fruit as five apples, which are then dynamically eaten or swapped for lemons over three seconds. The SVG scene uses `d3.scaleOrdinal` to map fruit types to specific radii and colors, with a red apple and yellow lemon. The `fruitBowl` function manages enter, update, and exit selections to add and remove circles and text labels for each piece of fruit, driven by a timer that mutates the data array and re-renders.

Mar 16, 2021

Loading thumbnail…

Temperature in SF Scatter Plot with D3.js!

This scatter plot visualizes temperature in San Francisco over time, with each circle representing a temperature reading. The data is loaded from a CSV file, parsed, and rendered as an SVG using D3 v6. The code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map time and temperature values to coordinates, with axes showing tick marks, labels, and a titled chart. Circles are semi-transparent steel blue, and the margin-based layout positions the plot within a 960x500 SVG canvas.

Mar 15, 2021

Loading thumbnail…

Cars Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via `d3.csv` from VizHub. Using D3 v6, the code employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to an SVG canvas, with circles styled for transparency. Custom axis tick formatting via `d3.format` and rotated labels enhance readability, while margins and explicit width/height attributes position the chart. The rendering uses SVG elements appended dynamically through D3 selections.

Mar 12, 2021

Loading thumbnail…

Scatter Plot with D3.js!

This example shows a scatter plot of population data for five countries, with country names on the y-axis and population on the x-axis. It uses D3 v6 with the `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` APIs to load data from a CSV file and render SVG circles. The chart includes custom tick formatting that converts abbreviations like “G” to “B” and displays gridlines generated by `tickSize`.

Mar 12, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a horizontal bar chart of country populations using D3 version 6, rendered as SVG. It loads data from a CSV file, scales the population values with `scaleLinear` and maps country names via `scaleBand`, then draws rectangles for each bar. The chart includes axes created with `axisBottom` and `axisLeft`, custom tick formatting using `format` to abbreviate large numbers, and styling from an external CSS file.

Mar 12, 2021