cacho2294

@cacho2294·12 public vizzes

Bowl of Fruit

A bowl of fruit animates as a circle of apples and lemons shifts in size and position. Each fruit is represented by a colored circle, with apples in red and lemons in yellow, and labels appear below them. The display uses SVG and React, with D3.js transitions to animate changes. Over time, elements are removed or reclassified through a scripted sequence, and the `transition().duration()` method smoothly updates the circles' radii and x-coordinates, creating a dynamic, evolving still life.

Apr 8, 2020

Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates through a sequence of five apples that shrink, change type, and disappear over time. The visualization demonstrates how SVG circle elements are added, updated, and removed using D3's enter, merge, and exit selections. Each fruit's color and radius come from `scaleOrdinal` color and size scales, while a `transition().duration(1000)` animates the circles' growth, movement, and removal. The React app drives the state changes through timed `setTimeout` calls, and the `fruitBowl` function handles the animated rendering.

Apr 8, 2020

Loading thumbnail…

COVID-19 Forecast

This visualization displays a time-series area chart of COVID-19 infection counts, with dates on the x-axis and infected individuals on the y-axis, accompanied by a title and axis labels in Spanish. It uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to render an SVG path and scatter points from CSV data. The dataset comes from a GitHub-hosted file, and styling is applied via external CSS classes.

Apr 7, 2020

Loading thumbnail…

COVID-19 Forecast

This visualization shows a COVID-19 forecast line chart tracking reported infections over time, with a smooth curve fit through the data points and labeled axes for date and infection count. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path and circles. The data is loaded via `csv` from a remote GitHub repository, and styles are defined in an external stylesheet.

Apr 7, 2020

Loading thumbnail…

COVID-19 Forecast

This scatter plot visualizes COVID-19 infection counts over time, with the x-axis representing dates and the y-axis showing the number of infected individuals. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, along with `axisBottom` and `axisLeft` to render ticks. Circles mark each data point, colored steelblue, while axis labels and a title are added via SVG text elements. Data is loaded as CSV from a GitHub repository and parsed with JavaScript’s `Date` and numeric conversion.

Apr 6, 2020

Loading thumbnail…

Prueba

This example displays a horizontal bar chart of population counts for ten countries, using a linear scale for the x-axis and a band scale for the y-axis to position bars by country. The bars are rendered as SVG rectangles with a steelblue fill, sized by population values read from a CSV file and multiplied by 1,000. Built with React and D3 v5, it uses `csv`, `scaleLinear`, `scaleBand`, and `select` to append the rectangles. The chart is static, with no axes or labels drawn.

Apr 6, 2020

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The code uses React to structure the SVG rendering, with D3 v5 functions like `scaleLinear`, `extent`, and `format` for scales and tick formatting. Axes are built with the custom `AxisBottom` and `AxisLeft` components, while circular marks include a native `<title>` tooltip. The plot uses the Poppins font and D3’s `csv` loader to fetch data from a gist URL.

Apr 1, 2020

Loading thumbnail…

Let's make a face with d3.js!

A yellow face built with SVG circles, rectangles, and arcs animates its expressions. The face’s eyebrows shift downward and upward via chained `transition().duration()` calls, while a smile arc flips into a frown using the same timed transforms. The code constructs the face by appending SVG groups and shapes with d3 v5’s `select` and `arc` APIs, positioning elements relative to the center of a 960×500 SVG. Static facial features—eyes, irises, and a mouth—are drawn with basic geometry, while the background turns red through a direct DOM style update.

Apr 1, 2020

Loading thumbnail…

Making Bar Chat

This horizontal bar chart visualizes the populations of ten countries, with each bar’s length proportional to its population value. The chart uses D3’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` to render tick marks and labels. Data is loaded from a CSV file via D3’s `csv` function, and populations are multiplied by 1000 to convert from thousands to actual counts. The SVG output is generated in the `render` function, which appends a group element and rects positioned using the computed scales.

Mar 27, 2020

Loading thumbnail…

Prueba

This example renders a blank SVG canvas using D3 v5 within a React framework. The `index.js` file selects the SVG element via `d3.select` and attempts to read its width and height attributes, while the `styles.css` applies red text styling to the body. The visualization currently displays no data or graphical elements, serving as a minimal template that sets up the wrapper and selection logic for future chart development.

Mar 26, 2020

Loading thumbnail…

Prueba

This example presents a blank SVG canvas with a red, verdana-styled page title. The React-based code selects the SVG element using d3.select, reads its height and width attributes, and defines a render function intended to generate the visualization. The styles.css file sets the body text to red with a large font size. The visualization currently displays no data or graphics, serving as a minimal scaffold for future chart development.

Mar 26, 2020

Loading thumbnail…

Making Bar Chart

This bar chart displays the ten most populous countries in the world, using data from the United Nations World Population Prospects 2019. The chart renders horizontal bars whose lengths correspond to each country’s 2020 population. Built with React and D3 version 5, it uses custom axis components (`AxisBottom` and `AxisLeft`) for rendering ticks and labels, while `Marks` draws the rectangles. Hovering over a bar reveals a tooltip with the exact population value via an SVG `<title>` element.

Mar 25, 2020